:input并不只是匹配input
个选择符我想大家都比较熟悉，但是要注意，input伪类选择符不只是匹配<input>标签，还会匹配<select>和<textarea>:
复制代码 代码如下:
第一个：<input type="input" />
第二个：<select>
</select>
第三个：<textarea></textarea>
<script type="text/javascript">
alert($(":input").length);//alert 3
</script>
可以看到，不光<input>被选择，<select>和<textarea>也被选择了
伪类选择符可以嵌套
通常情况下，我们可以通过嵌套伪类选择符来达到我们需要的效果,伪类选择符，如下：
复制代码 代码如下:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script type="text/javascript">
$("li:not(:first):not(:last)").css("background-color", "blue");
</script>
效果:
可见，除了第一个和最后一个li,其它都被选择.当然，嵌套是有层数限制的，具体的次数我就不太清了(各位高手记得麻烦告诉我下),反正够你进行不是变态的使用:-)
自定义伪类选择符
jquery还提供给我们扩展原有选择符的方式，可以让我们根据自己的需要自定义选择符，下面通过一个有实际意义的例子看如何做到：
在我们使用jquery的serialize方法将当前表单中的元素提交到服务器时，总是会选上asp.net的ViewState(<input type=”hidden” />)这无疑浪费了好多资源，我们通过一个扩展的伪类选择符看如何不选择它:
复制代码 代码如下:
<form method="post" action="default.aspx">
<div>
<input type="hidden" 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没有被选择.
小结:
jQuery的伪类选择符是很强大的一项功能,它内置了很多种方便我们选择的选择符，我们可以嵌套甚至扩展这些伪类选择符.这让我们的js编程更加愉悦了许多.
您可能感兴趣的文章: