jquery 样式切换代码备份

</p> <p>$(document).ready(function()</p> <p>{</p> <p>$(’.styleswitch’).click(function()</p> <p>{</p> <p>switchStylestyle(this.getAttribute(”rel”));</p> <p>return false;</p> <p>});</p> <p>var c = readCookie(’style’);</p> <p>if (c) switchStylestyle(c);</p> <p>});</p> <p>function switchStylestyle(styleName)</p> <p>{</p> <p>$(’link[@rel*=style]‘).each(function(i)</p> <p>{</p> <p>this.disabled = true;</p> <p>if (this.getAttribute(’title’) == styleName) this.disabled = false;</p> <p>});</p> <p>createCookie(’style’, styleName, 365);</p> <p>}</p> <p>$(document).ready(function()</p> <p>{</p> <p>$(‘.styleswitch’).click(function()</p> <p>{</p> <p>switchStylestyle(this.getAttribute(”rel”));</p> <p>return false;</p> <p>});</p> <p>var c = readCookie(’style’);</p> <p>if (c) switchStylestyle(c);</p> <p>});</p> <p>function switchStylestyle(styleName)</p> <p>{</p> <p>$(‘link[@rel*=style]’).each(function(i)</p> <p>{</p> <p>this.disabled = true;</p> <p>if (this.getAttribute(‘title’) == styleName) this.disabled = false;</p> <p>});</p> <p>createCookie(’style’, styleName, 365);</p> <p>

表格排序 TableSorter plug-in for jQuery

jquery 实现园角效果

$(document).ready(function(){ $(”div.roundbox”) .wrap(’ <div class="dialog">‘+ </p> <p>‘ <div class="bd">‘+ </p> <p>‘ <div class="c">‘+ </p> <p>‘ <div class="s">‘+ </p> <p>‘</p></div> <p>‘+ </p> <p>‘</p></div> <p>‘+ </p> <p>‘</p></div> <p>‘+ </p> <p>‘</p></div> <p>‘);</p> <p>$(’div.dialog’).prepend(’ <div class="hd">‘+</p> <p>‘ <div class="c"></div> <p>‘+</p> <p>‘</p></div> <p>‘)</p> <p>.append(’ <div class="ft">‘+</p> <p>‘ <div class="c"></div> <p>‘+</p> <p>‘</p></div> <p>‘);</p> <p>});</p> <p>

效果在此

jquery 教程

标签页

立即显示代码

</p> <p>$(document).ready(function(){</p> <p>$(’input.mailto’).click(function(){ </p> <p>$(’p.instructions’).remove();</p> <p>$.post(’mailtoInfo.php’,{</p> <p> pass: “secret”</p> <p>},function(txt){</p> <p> $(’div.email’).html(txt);</p> <p>});</p> <p>}); </p> <p>});</p> <p>

15 Days Of jQuery

可拖动界面 类似 linux.ubuntu.org.cn

http://www.learningjquery.com/

jQuery Form Plugin ajax 表单处理

日期选择

</p> <p>jQuery.noConflict(); //将$方法用jQuery代替</p> <p>function fontBigger(elt)</p> <p>{</p> <p> //var work = jQuery(elt).parent().next(); //或者父目录的下一个目录</p> <p> var work = jQuery(”div[@name='"+elt+"']“);</p> <p> work.each(function(){</p> <p> jQuery(this).html(”<span class='fontwrap' style='font-size:100%'>“+jQuery(this).html()+”</span>“);</p> <p> var wrap=jQuery(this).children(’.fontwrap’);</p> <p> var m = wrap.css(’fontSize’).match(/(d+(?:.d+)?)(.*)/);</p> <p> wrap.css(’fontSize’, (1.2 * parseFloat(m[1])) + m[2]);</p> <p> });</p> <p>}</p> <p>function fontSmaller(elt)</p> <p>{</p> <p> //var work = jQuery(elt).parent().next();</p> <p> var work = jQuery(”div[@name='"+elt+"']“);</p> <p> work.each(function(){</p> <p> jQuery(this).html(”<span class='fontwrap' style='font-size:100%'>“+jQuery(this).html()+”</span>“);</p> <p> var wrap=jQuery(this).children(’.fontwrap’);</p> <p> var m = wrap.css(’fontSize’).match(/(d+(?:.d+)?)(.*)/);</p> <p> wrap.css(’fontSize’ , (parseFloat(m[1]) /1.2) + m[2]);</p> <p> });</p> <p>}</p> <p>function texteOnly(elt,th)</p> <p>{</p> <p> //var texte = jQuery(elt).parent().next(); </p> <p> var texte = jQuery(”div[@name='"+elt+"']“);</p> <p> jQuery(”body”).toggleClass(’onlytext_wrapper’); //BODY的CLASS＝onlytext_wrapper</p> <p> if (this['backTextOnly']) { </p> <p> texte.removeClass(”onlytext”); </p> <p> texte.addClass(”ottextq”); //全屏用CLASS=onlytext</p> <p> jQuery(th).parent().insertBefore(jQuery(”#marktextonly”)).after(texte);</p> <p> jQuery(”#marktextonly”).remove();</p> <p> jQuery(’body’).children().show();</p> <p> this.backTextOnly = false;</p> <p> return;</p> <p> }</p> <p> //点击全屏</p> <p> texte.removeClass(”ottextq”); //返回时候清除CLASS</p> <p> texte.addClass(”onlytext”); //全屏用CLASS=onlytext</p> <p> jQuery(texte[texte.length-1]).after(’ <div id="marktextonly">marktextonly</div> <p>‘);</p> <p> jQuery(th).parent().prependTo(”body”).after(texte).siblings().slice(texte.length).hide(); </p> <p> this.backTextOnly = true;</p> <p>

via http://www.ll19.com/index.php/91/sample-post/

jQuery 文档

也就是实现 css counter 的样式处理以及 odd,even 自动识别。

:nth-child(event) 目前（2007-30-31）只有 Konqueror 支持，firefox (2.0.0.6)和 opera (9.24)都不行。只能考虑 js 实现。

</p> <style> <p>body {font:12px/150% tahoma;padding:4px;}</p> <p>p:nth-child(even) {background: red}</p> <p>p:nth-child(odd) {background: blue}</p> </style> <p><body></p> <p>第一段文字</p> <p>第二段文字</p> <p>第三段文字</p> <p>第四段文字</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

点击这里打开新窗口浏览此网页

jQuery 用的是 css2 和 xpath 的语法。

点击这里打开新窗口浏览此网页

转一个 jQuery 选择器，不错的文章

1. CSS 选择器（CSS Selectors）

jQuery 完整地支持 CSS 1-3，并且可以在（选择器）表达式里加入自定义的 CSS-like （和xPath）。

1.1 jQuery 支持的 CSS 选择器语法

* * 任何 element

* E 类型为 E 的所有element（其实 E 可以是任何 element）

* E:nth-child(n) 一个类型为 E 的 element，它是其父 element 的第 n 个子 element

* E:first-child 一个类型为 E 的 element，它是其父 element 的第一个子 element （相当于E:nth-child(0)）

* E:last-child 一个类型为 E 的 element，它是其父 element 的最后一个子 element

* E:only-child 一个类型为 E 的 element，它是其父 element 的唯一子 element

* E:empty 一个类型为 E 的用户界面（UI） element，它没有子 element（包括 文本 element）

* E:enabled 一个类型为 E 的用户界面（UI） element，它被设置为禁止（disabled）

* E:disabled 一个类型为 E 的用户界面（UI） element，它被设置为允许（enabled）

* E:checked 一个类型为 E 的用户界面（UI） element，它处于选中（checked）状态（适用于单选按钮和复选框）

* E:selected 一个类型为 E 的用户界面（UI） element，它处于被选择（selected）状态（在选择范围内，有一个或多个可供选择的 element ）。注意：selected 属性并不在 CSS 的规范内，但jQuery 提供内部支持

* E.myclass 一个类型为 E 的 element，它的 class 类是“myclass”

* E#myid 一个类型为 E 的 element，它的 id 是“myid”

* E:not(s) 一个类型为 E 的 element，并且结果集中的 element 不匹配（不包含）选择器 s（用作过滤）

* E F 一个类型为 F 的 element，它是类型为E 的 element 的子孙 element（注意是子孙 element）

* E > F 一个类型为 F 的 element，它是类型为E 的 element 的子 element（注意是子 element）

* E + F 一个类型为 F 的 element，它是紧跟在类型为E 的 element 后面的一个兄弟 element（注意 F 是 E 的兄弟节点，并且是紧跟随其后的一个）

* E ~ F 一个类型为 F 的 element，它是类型为E 的 element 后面的一个兄弟 element（注意 F 是 E 的兄弟节点，并且位置在E 的后面）

* E,F,G 一个类型为 E 的 element，一个类型为 F 的 element，一个类型为 G 的 element（用于选择多个 element）

1.2 jQuery 支持，但（跟 CSS 规范）有所不同的选择器语法

不同之处是必须在属性名前加上符号“@”

o E[@foo] 一个类型为 E 的 element，它具有属性“foo”

o E[@foo=bar] 一个类型为 E 的 element，它具有属性“foo = bar”

o E[@foo^=bar] 一个类型为 E 的 element，它具有属性“foo“，并且其属性值是以”bar“开头的

o E[@foo$=bar] 一个类型为 E 的 element，它具有属性“foo“，并且其属性值是以”bar“结尾的

o E[@foo*=bar] 一个类型为 E 的 element，它具有属性“foo“，并且其属性值包含”bar“

o E[@foo=bar][@baz=bop] 一个类型为 E 的 element，它具有属性“foo = bar”和属性”baz = bop“

注：以上的“bar”和“bop”均为字符串。

1.3 jQuery 不支持的选择器语法（略）

因为没什么实际的作用，所以这里也不作赘述，想了解详情的可以参阅官方帮助文档。

1.4 Contex 和 Anchoring

可以设置 contex 来 anchor（定位） 选择器，这也是 jQuery 跟 CSS 规范的一个不同之处。用户可以使用语法： $(expr, context) 来设置 context root。默认的 context root 是整个文档。

2. XPath 选择器（XPath Selectors）

XPath 也是 jQuer 支持的选择器语法之一。jQuery 支持基本的 XPath 语法。下面以一些例子作说明。

2.1 定位路径（Location Paths）

o 绝对路径，相对于整个 HTML 文档

$(”/html/body//p”) $(”body//p”) $(”p/../div”)

o 相对路径，相对于设置的 context node “this”

$(”p/*”, this) $(”/p//a”, this)

2.2 支持 Axis 选择器

o “//” ： 子孙 elements （div 所有类型为 p 的子孙 elements）

$(”/div//p”) $(”//div//p”)

o “/” ： 子 elements （div 所有类型为 p 的子 elements）

$(”//div/p”)

o “~” ： 兄弟 elements （div 所有类型为 form 的兄弟 elements）

$(”//div ~ form”)

o ““..”： 父 elements （div 的父 element 下的类型为 p 的子 elements）

$(”//div/../p”)

2.3 支持谓词语法（Predicates）

o [@foo] 具有属性“foo”

$(”//input[@foo]”)

o [@foo=’test’] 具有属性“foo = ‘test’”

$(”//a[@foo = ‘tsxt’]”)

o [Nodelist] 其子孙 elements 匹配 Nodelist（用于过滤）

$(”//div[p]”) $(”//div[p/a]”)

2.4 jQuery 支持，但（跟 XPath 规范）有所不同的谓词语法（Predicates）

o [last()] or [position()=last()] becomes :last（选择结果集中的最后一个 element）

$(”p:last”)

o [0] or [position()=0] becomes :eq(0) or :first（选择结果集中的第个 element）

$(”p:first”) $(”p:eq(0)”)

o [position() < 5] becomes :lt(5)（选择结果集中索引大于5的 elements）

$(”p:lt(5)”)

o [position() > 2] becomes :gt(2)（选择结果集中索引小于2的 elements）

$(”p:gt(2)”)

注：“becomes” 前面的是 XPath 的 predicates 语法，后面是等价的 jQuery 语法。

3. jQuery 自定义的选择器（Custom Selectors）

jQuery 具有一些自定义的选择器语法，这些语法虽然并不在 CSS 和XPath 规范之内，但它们相当的便捷，所在 jQuery 将它们囊括进来。

3.1 自定义选择器（Custom Selectors）

o :even 结果集中其索引为偶数（双数）的 elements

o :odd 结果集中其索引为奇数（单数）的 elements

o :eq(N) and :nth(N) 选择结果集中索引为 N 的 elements

o :gt(N) 选择结果集中索引大于 N 的 elements

o :lt(N) 选择结果集中索引小于 N 的 elements

o :first 选择结果集中的第一个 element （相当于 eq(0) 或者 nth(0)）

o :last 选择结果集中的最后一个 element

o :parent 在结果集中选择 elements，它必须具有子 elements（包括文本节点）（跟 :empty 相反）

o :contains(’test’) 选择结果集中包含有指定文本的 elements

o :visible 选择所有可见（visible）的 elements（ display 属性的值等于 visible、block、inline，或者 visibility 属性的值等于 visible，不包括 hidden 类型的 elements（关于 hidden 类型，如
））

o :hidden 选择所有隐藏（visible）的 elements（ display 属性的值等于 none，或者 visibility 属性的值等于 hidden，不包括 hidden 类型的 elements（关于 hidden 类型，如
））

例子：

$(”p:first”).css(”fontWeight”,”bold”); $(”div:hidden”).show(); $(”/div:contains(’test’)”, this).hide();

3.2 表单选择器（Form Selectors）

o :input 选择所有表单 elements（input, select, textarea, button）

o :text 选择所有文本域 (type=”text”).

o :password 选择所有密码域 (type=”password”).

o :radio 选择所有单选按钮 (type=”radio”).

o :checkbox 选择所有复选框 (type=”checkbox”).

o :submit 选择所有提交按钮 (type=”submit”).

o :image 选择所有图像域 (type=”image”).

o :reset 选择所有重置按钮 (type=”reset”).

o :button 选择所有按钮 (type=”button”).

o :file 选择所有
.

:hidden 也是可用的，在上面的3.1 节有介绍。

建议在使用表单选择时提供一个 context root，例子：

$(’#myForm :input’)

$(’input:radio’, myForm)

上面最后的一行语句将会选择所有的“myForm”表单里的所有单选按钮，相当于[@type=radio]（即 $(”[@type = radio],myForm”)），但用表单选择器会稍微快点，尤其对于大型的表单。

后者的区别在于 odd（奇数行）hover 的时候颜色不同。

点击这里打开新窗口浏览此网页

点击这里打开新窗口浏览此网页

相关日志：

表格（table） html 代码设计

点击这里打开新窗口浏览此网页

留此，备用。里面有注释。jQuery 1.1.1 查询手册

jQuery cheatsheet

这个 例子挺有趣，道理也很简单，ol 外面的那个数字也受 ol 的样式控制，所以里面用 p 恢复普通样式即可

</p> <style type="text/css"> <p>ol {color:red;font-size:150%;font-style:italic;font-weight:700;}</p> <p>li p {color:#666;font-style:normal;font-size:12px;font-family:verdana,sans-serif}</p> </style> <ol> <li> <p>列表项目</p> </li> <li> <p>列表项目</p> </li> <li> <p>列表项目</p> </li> <li> <p>列表项目</p> </li> </ol> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

via Style Your Ordered List