jQuery选择器的强大不仅在于选择器支持基本的css选择符，还支持很多CSS的伪类选择符，甚至可以自定义选择符，下面让我们来看看一些伪类选择符
:nth-child的用法
nth-child是一个css3伪类选择符,在jQuery中被实现了，在Jquery API中对nth-child的定义是：”匹配其父元素下的第N个子或奇偶元素“。读着感觉有点绕口，下面让我们通过例子来说明:
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/1_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074615.jpg[/img]
[/url]
API定义中的匹配其父辈指的是所选元素的父元素不同，则分开选择。在上面例子中虽然一共选择18个<li>但是这18<li>分属于2个不同的<ul>,所以会选择两个.如果将其放入同一个<ul>中，如果放入同一个<ul>执行上面代码，则：
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/2_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074616.jpg[/img]
[/url]
理解了上面匹配父辈元素，下面来说说这个选择符参数的用法.
[list=1]向上面那样直接给出选择的位置，但是这里注意，这个位置是以1为开始的，而不是0 n个倍数选择法，比如可以使3n+1,-3n+1，4n,等，匹配所有页面上存在的n的倍数 [/list]
例子:
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/3_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074617.jpg[/img]
[/url]
可见相对应的元素都被匹配
3.还有一种用法是我们熟知的odd和even,就是奇数和偶数，如下：
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/4_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074618.jpg[/img]
[/url]
[b]:first-child&last-child[/b]
从上面的nth-child可以看到”匹配父类下的“含义，first-child和last-child也同样是这样.它们可以看做nth-child的封装：
first-child和nth-child(1)等价，这里就不多说了.
而first-child目前我还找不到等价的nth-child表达式，匹配父类下的最后一个子元素:
效果:
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/5_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074619.jpg[/img]
[/url]
[b]:input并不只是匹配input[/b]
个选择符我想大家都比较熟悉，但是要注意，input伪类选择符不只是匹配<input>标签，还会匹配<select>和<textarea>:
[url=http://images.cnblogs.com/cnblogs_com/CareySon/WindowsLiveWriter/jQueryTips5_11F7C/z11111111111111111111111_2.jpg][img]http://files.jb51.net/file_images/article/201304/2013042410074620.jpg[/img]
[/url]
可见，除了第一个和最后一个li,其它都被选择.当然，嵌套是有层数限制的，具体的次数我就不太清了(各位高手记得麻烦告诉我下),反正够你进行不是变态的使用:-)
[b]自定义伪类选择符[/b]
jquery还提供给我们扩展原有选择符的方式，可以让我们根据自己的需要自定义选择符，下面通过一个有实际意义的例子看如何做到：
在我们使用jquery的serialize方法将当前表单中的元素提交到服务器时，总是会选上asp.net的ViewState(<input type=”hidden” />)这无疑浪费了好多资源，我们通过一个扩展的伪类选择符看如何不选择它:
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3+7k/L7nyw13HVnLQ==" />
</div>
<script type="text/javascript">
$.expr[":"].noViewState = function(element) {
return !$(element).attr("id") === "_VIEWSTATE";
}
alert($(":input:noViewState").size());//alert 0 ViewState has not been choosen
</script>
</form>
通过$.expr的方式对伪类选择符进行扩展，可以看出，上面的选择符使用:noViewState后,viewState没有被选择.
[b]小结:[/b]
jQuery的伪类选择符是很强大的一项功能,它内置了很多种方便我们选择的选择符，我们可以嵌套甚至扩展这些伪类选择符.这让我们的js编程更加愉悦了许多.
微信版
扫一扫进微信版
返回顶部
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
