jQuery学习笔记（一）使用jQuery选择器（荐）

悠悠 2022-08-05 16:18 250阅读 0赞

jQuery预先的javascript的编程，提供了计划所有css3下的标准选择器，开发者可以利用这些选择器轻松选择各种元素，供javascript使用。

重要的是jQuery对这些选择器的兼容性特别好，主流的浏览器都测试通过，这使得理论上的css3选择器一下编程了事实。开发者可以按照以前的方法定义各种css类别，然后通过addClass()方法或者className属性将其添加到指定的元素集合中。

1.属性选择器

（属性可以参考jQuery文档或者http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp）

属性选择器的语法是在标记的后面用中括号"\[" 和"\]"添加相关属性，然后在赋予不同的逻辑关系。

以下为HTML

如果希望选择设置了title属性的标记，则使用以下语法

$("a[title]")

给设置了title属性的两个超链接添加css样式

![复制代码][copycode.gif]

![复制代码][copycode.gif]

显示样式：

![180237085586480.png][]

属性选择器还有很多种，大家可以参考各版本的jQuery的手册灵活使用，常用的有以下几类。

[attribute]
    [attribute=value] //匹配给定的属性是某个特定值的元素
    [attribute!=value] //匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    [attribute^=value] //匹配给定的属性是以某些值开始的元素
    [attribute$=value] //匹配给定的属性是以某些值结尾的元素
    [attribute*=value] //匹配给定的属性是以包含某些值的元素

例如匹配超链接以pdf结尾的元素，可以使用

$(function() {
            $("li a[href$='pdf']")
        });

2.包含选择器

jQuery还提供了包含选择器用来选择包含了某种特殊标记的元素，比如以下代码：

$("li:has(a)")

表示给包含了超链接的li元素

例如

$("div:has(p)").addClass("test");

表示给所有包含 p 元素的 div 元素添加一个 test 类

最后整理了jQuery支持的css3属性选择器，贡献查询。

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.7999992370605px; width:953px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选择器</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 说明</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> *</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有的标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> EF</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为F的标记，并且是E标记的子标记（包括孙，重孙标记）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E&gt;F</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为F的标记，并且是E标记的子标记（不包括孙标记）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E+F</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为F的标记，并且该标记紧接着前面的E标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E~F</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为F的标记，并且该标记前面有一个E标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E:has(F)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且该标记包含F标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E.C</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，属性分类为C，如果去掉E，就是属性选择器.C</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E#I</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，id为I，如果去掉E，就是ＩＤ选择器I</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E[A]</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且设置了属性A</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E[A=V]</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且属性A的值等于V</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E[A^=V]</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且属性A的值以V开头</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E[A$=V]</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且属性A的值以V结尾</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> E[A *=V]</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有名称为E的标记，并且属性A的值包含V</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 纯属手打，如有错误，请指正</td> 
  </tr> 
 </tbody> 
</table>

3.位置选择器

css3还允许通过标记所处的位置来进行选择，例如选择第一个li元素

$("li:first-child")

选择奇数行的li元素

$("li:nth-child(odd)")

需要注意的是:nth-child(odd)的选择器和li:odd选择出的结果是一样的，这是因为：nth-child的相关css 选择器是从1开始计数的，而其他的选择器是从0开始计数的。

例如以下

$("p:eq(4)").addClass()

匹配添加className的元素有5个。

以下整理了jQuery支持的css3位置选择器

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.7999992370605px; width:953px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选择器</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 说明</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :first</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第一个元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :last</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 最后一个元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :first-child</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第一个子元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :last-child</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 最后一个子元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :only-child</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有没有兄弟的元素，例如：p:only-child选中所有的p元素，如果该p元素是父元素的唯一子元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :nth-child(n)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第n个子元素（从1开始计数）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :nth-child(odd/even)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有奇数号或者偶数号子元素（从1开始计数）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :nth-child(nX+Y)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 利用公式来计算元素的位置，例如li:nth-child(5n+1)，表示选中所有的li元素，并且这些li元素为父元素的的5n+1个元素（1,6,11,16...）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :odd或者:even</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 奇数或者偶数号元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :eq(n)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第n个元素（从0开始计数）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :gt(n)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第n个之后的所有元素（n从0开始计数，并且计算不包含第n本身）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :lt(n)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 第n个之前的所有元素（n从0开始计数，并且计算不包含第n本身）</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 纯属手打，如有错误，请指正</td> 
  </tr> 
 </tbody> 
</table>

4.过滤选择器

除了css3中的一些选择器外，jQuery还提供了很多自定义的过滤选择器，用来处理更复杂的选择。例如很多时候希望知道用户所选中的复选框，如果通过属性值来判断，那么只能获得初始状态下选中的情况，而不是真实的选择情况。利用jQuery的:checked选择器则可以轻松获得用户的选择。

实例代码如下

![复制代码][copycode.gif]

![复制代码][copycode.gif]

另外，过滤器之间可以迭代使用。

:checkbox:checked:enabled

表示input type="checkbox"中所有被用户选中而且没有被禁用的。

以下整理了jQuery中常用的选择过滤器

<table style="border:1px solid silver; border-collapse:collapse; word-break:break-word; color:rgb(75,75,75); font-family:Verdana,Arial,Helvetica,sans-serif; font-size:13px; line-height:20.7999992370605px; width:953px"> 
 <tbody style=""> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选择器</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 说明</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :animated</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有处于动画中的元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :button</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有按钮，包括input[type=button]、[type=submit]、[type=reset]和&lt;button&gt;标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :checkbox</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 所有复选框，等同于input[type=checkbox]标记</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :contains(foo)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选择了包含文本"foo"的元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :disabled</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 页面中被禁用了的元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :enabled</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 页面中没有被禁用的元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :file</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 上传文件元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :header</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选中所有的标题元素，如&lt;h1&gt;&lt;h6&gt;</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :hidden</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 页面中被隐藏了的元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :image</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 图片提交按钮，等同于input[type=image]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :input</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 表单元素，包括&lt;input&gt;,&lt;select&gt;,&lt;textarea&gt;,&lt;button&gt;</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :not(filter)</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 反向选择</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :parent</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 选择所有子元素（包括文本）的元素，空元素将被排除</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :password</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 密码文本框,等同于input[type=password]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :radio</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 单选按钮,等同于input[type=radio]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :reset</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 重置按钮，等同于input[type=reset]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :selected</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 下拉菜单被选中的项</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :submit</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 提交按钮，包括input[type=submit]和button[type=submit]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :text</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 文本输入框，等同于input[type=text]</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> :visble</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 页面中的所有可见元素</td> 
  </tr> 
  <tr style=""> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> &nbsp;</td> 
   <td style="font-family:Verdana,Helvetica,Arial; word-break:break-all; line-height:1.5; border:1px solid silver; border-collapse:collapse; padding:3px"> 纯属手打，如有错误，请指正</td> 
  </tr> 
 </tbody> 
</table>

5.实现反向过滤

上述过滤器中的:not(filter)的过滤器可以进行反向选择，其中filter参数可以是任意其它的过滤选择器，例如下面代码表示<input>标记中所有非radio元素

input:not(:radio)

另外过滤选择器还可以迭代使用。

以下的例子就是使用jQuery的反向过滤功能。

![复制代码][copycode.gif]

![复制代码][copycode.gif]

以上代码中的选择器如下：

$(":input:not(:checkbox):not(:radio)").addClass("altcss");

表示所有的<input><select><textarea>或<button>中非checkbox和非radio的元素（这里要注意input和:input的区别），除了单选按钮和复选框，表单的其它元素都添加了altcss样式风格。

注意：在:not(filter)中，filter参数必须是过滤选择器，而不能是其它的选择器 ，下面的代码是典型的语法错误。

div:not(p:hidden)

正确的写法是

div p:not(:hidden)

**其他精彩文章**

## [jQuery教程(29)-jQuery插件开发之为插件方法指定参数][jQuery_29_-jQuery] ##

## [jQuery教程(28)-jQuery插件开发之使用插件][jQuery_28_-jQuery] ##

## [jQuery教程(27)-jQueryajax操作之修改默认选项][jQuery_27_-jQueryajax] ##

## [jQuery教程(26)-ajax操作之使用JSONP加载远程数据][jQuery_26_-ajax_JSONP] ##

## [jQuery教程(25)-ajax操作之安全限制][jQuery_25_-ajax] ##

[copycode.gif]: /images/20220806/cc2b1331399148c4b71c3539d37dae3a.png
[180237085586480.png]: /images/20220806/18f7b39e7e9e484298e4888e3386e2c9.png
[jQuery_29_-jQuery]: http://www.itmmd.com/201501/519.html
[jQuery_28_-jQuery]: http://www.itmmd.com/201501/518.html
[jQuery_27_-jQueryajax]: http://www.itmmd.com/201501/515.html
[jQuery_26_-ajax_JSONP]: http://www.itmmd.com/201501/512.html
[jQuery_25_-ajax]: http://www.itmmd.com/201501/511.html