jQuery关于使用伪类选择器的说明

jQuery选择器不仅功能强大，因为它支持基本的css选择器，还支持许多CSS伪类选择器，甚至可以自定义选择器。让我们来看看一些伪类选择器： th-child的用法。n-child是一个css3伪类选择器，已经在jQuery中实现。Jquery API中第n个子元素的定义是：“匹配其父元素下的第n个子元素或奇偶元素”。阅读起来感觉有点绕弯，我们举个例子说明一下：抄码如下： div ULLione/Li Li Two/Li Li三/Li Li四/Li Li五/Li Lisix/Li Li七/Li Li八/Li Linine/Li/ul ulli 1/Li Li2/Li Li/Li Li li4/Li li5/Li li6/Li li7/Li li8/Li li9/Li/ul/div脚本类型=' text/JavaScript ' $(' li33366css('背景色'，'蓝色')；/script运行如下： 。

API定义中的匹配是指所选元素的父元素不同，所以单独选择。在上例中，虽然总共选择了18个li，但这18个li属于两个不同的uls，因此将选择两个LI。如果它们被放入相同的ul，如果它们被放入相同的UL以执行上述代码，那么：。

了解上面匹配的父元素，让我们来谈谈这个选择器参数的用法。如上直接给出选择位置，但这里注意这个位置以1开始，而不是0 n多选择法，例如3n 1，-3n 1，4n等。匹配所有页面上存在的n的多个示例：副本代码如下： div ul lion/Li Li二/Li Li三/Li Li四/Li Li五/Li Lisix/Li Li七/Li Li八/Li Linine/Li/ul/div脚本类型=' text/JavaScript ' $(' li: th-child(3n-1)')。css('背景色'，'蓝色')；/脚本效果：

可以看出对应的元素都是匹配的。3.另一种用法是我们熟悉的奇数和偶数，如下：复制代码如下： Script Type=' text/JavaScript ' $(' li:第n个子(奇数)')。CSS('背景色'，'蓝色')；/脚本效果：

3360第一个孩子最后一个孩子从上面的第n个孩子中，我们可以看到“在匹配的父类下”的含义，第一个孩子和最后一个孩子也是如此。它们可以看作是第n个孩子的包装：第一个孩子相当于第n个孩子(1)。这里就不多说了。目前找不到第一个孩子的等价第n个子表达式，匹配父类下的最后一个子元素：效果是： 。

:输入不只是匹配输入选择器。我想大家都很熟悉，但需要注意的是，输入伪类选择器并不只是匹配输入标签。它还将匹配select和textarea:复制的代码如下：第一：输入类型=' input '/第二：选择id=' select '/选择第三：textarea/textareascript类型=' text/JavaScript ' alert($(' : input ')。长度)；//alert 3/script如您所见，不仅选择了输入，还选择了和textarea。伪类选择器可以嵌套。通常，我们可以通过嵌套伪类选择器来达到预期的效果。如下所示：复制代码如下： ulli 1/Lili 2/Lili 3/Lili 4/Lili 5/Lili 6/Lili 7/Li/ULScript Type=' text/JavaScript ' $(' li3360 not(: first)3360 not(: last)'). CSS/.脚本效果：

可以看出，除了第一个和最后一个li之外，其他都被选中了。当然，筑巢受层数限制，具体多少次我不太清楚(麻烦告诉我)。反正你用：就够了-) Custom伪类选择器jquery还为我们提供了一种扩展原选择器的方法，这样我们就可以根据自己的需要自定义选择器了。让我们举一个实际的例子来看看如何做到这一点：当我们使用jquery的serialize方法将当前表单中的元素提交给服务器时，我们总是选择ASP.NET的ViewState(Input Type=" hidden "/)，这无疑浪费了大量的资源。我们使用一个扩展的伪类选择器来查看如何不选择它。复制代码如下：表单名称=' form1 '方法=' post '操作=' default.aspx' id=' form1' div输入类型=' hidden ' name=' _ _ view state ' id=' _。_ VIEWSTATE ' value='/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/nof 37k/l7nyw 13 hvnlq=='//div脚本类型='text/javascript' $。expr[':']。noViewState=函数(元素){ return！$(元素)。attr(' id ')===' _ VIEWSTATE '；}警报($(':input:noViewState ')。size())；//alert0 viewstate未被选中/script/form以$.expr的方式扩展伪类选择器，可以看到上述选择器使用：noviewstate后，ViewState未被选中。总结： jQuery的伪类选择器是一个非常强大的功能。它内置了多种选择器，方便我们选择。我们可以嵌套甚至扩展这些伪类选择器。这使得我们的js编程更加有趣。