jQuery整理笔记二----jQuery选择器整理

谁践踏了优雅 2022-08-27 10:54 240阅读 0赞

**一、基本选择器**

1、ID选择器

JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下：

var element=document.getElementById("id");

jQuery简化了其操作： var $element=$("\#id");

实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaScript的原生方法。

2、类型选择器

跟ID选择器一样，JavaScript同样提供了原生的方法用来在DOM中选择指定类型的元素。

var elements=document.getElementByTagName(tagName"");

jQuery对其包装后的简化方法是 var $elements=$("tagName");

3、类选择器

JavaScript没有提供内置的类选择方法，我们可以自己为其拓展一个，代码如下：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  document.getElementsByClassName=function(className)\{  
2.    
3.       var el=\[\],  
4.    
5.           \_el=document.getElementsByTagName("\*");   //获取所有元素  
6.    
7.           for(var i=0;i**<****\_el.length**;i++)\{  
8.    
9.              if(\_el\[i\]==className)\{  
10.   
11.               el\[el.length\]=\_el\[i\];  
12.   
13.             \}  
14.   
15.           \}  
16.   
17.     return el;  
18.   
19. \}

下面举个例子，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色

代码如下 实例2-1：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

上述例子可以看得到jQuery的写法要相对简单一些，而且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自定义的效率高。

**4、通配选择器（"\*"）**

该选择器可以匹配上下文中的所有元素，下面示例将选择body下的所有元素

实例2-2：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

**5、分组选择器**

jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器的应用能力，选个多组元素可以通过逗号分隔符来分隔多个不同的选择器。，这些选择器可以是任意类型的，也可以是复合选择器。

实例2-3：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

**二、层级选择器**

层级选择器就是根据HTML文档结构中节点之间的包含或者并列关系，决定匹配元素的一种方法。

1、关系选择器

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-1 关系选择器</span>  
 <tbody> 
  <tr> 
   <th><span style="font-family:Arial"><span style="font-size:14px">选择器</span></span></th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">ancestor &nbsp;descendant</span></td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-family:SimSun">&nbsp; &nbsp; &nbsp; 在给定祖先元素下匹配所有后代元素。ancestor，表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("form input")可以匹配表单下的所有input元素。</span></p> </td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">parent&gt;child</span></td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-family:SimSun">&nbsp; &nbsp; &nbsp; 在给定父元素下匹配所有子元素。perent表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("table&gt;tr")可以匹配table下的所有tr元素</span></p> </td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">prev + next &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-family:SimSun">&nbsp; &nbsp; &nbsp; 匹配所有紧接在prev元素后的next元素。prev表示任何有效选择器，next表示一个有效选择器并且紧接着第一个选择器 。例如：$("lable + input")匹配所有跟在lable后面的input元素</span></p> </td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">prev ~ siblings<span style="white-space:pre"></span></span></td> 
   <td> <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px"> <span style="font-family:SimSun">&nbsp; &nbsp; &nbsp; &nbsp;匹配prev元素之后的所有siblings元素。prev表示任何有效选择器，siblings表示一个选择器，并且它是作为prev选择器的同辈。例如：$("form ~ input")匹配所有跟form元素同辈的input元素。</span></p> </td> 
  </tr> 
 </tbody> 
</table>

通过上面的表格我们不一定能完全明白这几个选择器的细节地方，还是写个实例演示一下。

实例2-4：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

2、子元素选择器

这个写个实例吧。

实例2-5：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

注意：

A、:nth-child(even) :nth-child(odd) //分别是匹配偶数位元素和奇数位元素 可以用2n和2n+1替代

B、我们用过的eq(n)选择器是从0开始计数的，而刚刚整理的那些选择器是从1开始计数的，使用的时候要注意

**三、过滤选择器**

过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式相同，即以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器、可见过滤器。下面分别介绍：

1、定位过滤器

定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.

![Center][]

以上效果实现代码 实例2-6：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
2.  **<****html****>**  
3.   **<****head****>**  
4.    **<****title****>** New Document **</****title****>**  
5.    **<****meta** name="Generator" content="EditPlus"**>**  
6.    **<****meta** name="Author" content=""**>**  
7.    **<****meta** name="Keywords" content=""**>**  
8.    **<****meta** name="Description" content=""**>**  
9.    **<****script**  src="jquery-2.1.0.min.js" type="text/javascript"**>****</****script****>**  
10.   **<****script** type="text/javascript"**>**  
11.   <!--  
12.         $(function()\{  
13.             $("tr:first").css("color","red");                   //设置第一行字体为红色  
14.             $("tr:eq(0)").css("font-size","20px");              //设置第一行字体大小为20像素 font-size:20px  
15.             $("tr:last").css("color","blue");                   //设置最后一行字体为蓝色  
16.             $("tr:even").css("background","\#ffd");              //设置偶数行背景色为\#ffd  
17.             $("tr:odd").css("background","\#dff");               //设置技术行背景色为\#dff  
18.             $("tr:gt(3)").css("font-size","14px");              //设置从第五行开始所有的字体大小为14px  
19.             $("tr:lt(4)").css("font-size","14px");              //设置1-4行字体大小为14px  
20.               
21.         \})  
22.   //--**>**  
23.   **</****script****>**  
24.  **</****head****>**  
25.   
26.  **<****body****>**  
27.     **<****table****>**  
28.     **<****tr****>**  
29.         **<****th****>**选择器**</****th****>**  
30.         **<****th****>**说  明**</****th****>**  
31.     **</****tr****>**  
32.     **<****tr****>**  
33.         **<****td****>**:first**</****td****>**  
34.         **<****td****>**匹配找到的第一个元素，例如，$("tr:first")表示匹配表格的第一行**</****td****>**  
35.     **</****tr****>**  
36.     **<****tr****>**  
37.         **<****td****>**:last**</****td****>**  
38.         **<****td****>**匹配找到的最后一个元素，例如，$("tr:last")表示匹配表格的最后一行**</****td****>**  
39.     **</****tr****>**  
40.     **<****tr****>**  
41.         **<****td****>**:not**</****td****>**  
42.         **<****td****>**去除所有与给定选择器匹配的元素。例如，$("input:not(:checked)")可以匹配所有未选中的input元素**</****td****>**  
43.     **</****tr****>**  
44.     **<****tr****>**  
45.         **<****td****>**:even**</****td****>**  
46.         **<****td****>**匹配所有索引值为偶数的元素，从0开始计数。例如$("tr:even"),可以匹配表格的偶数行**</****td****>**  
47.     **</****tr****>**  
48.     **<****tr****>**  
49.         **<****td****>**:odd**</****td****>**  
50.         **<****td****>**上面是偶数，这个是奇数**</****td****>**  
51.     **</****tr****>**  
52.     **<****tr****>**  
53.         **<****td****>**:eq**</****td****>**  
54.         **<****td****>**匹配一个给定索引值的元素，例如，$("tr:eq(0)")可以匹配第一个tr**</****td****>**  
55.     **</****tr****>**  
56.     **<****tr****>**  
57.         **<****td****>**:gt**</****td****>**  
58.         **<****td****>**匹配所有大于给定索引值的元素，从0开始计数。例如，$("tr:gt(0)")可以匹配表格的第二行以及后面的行**</****td****>**  
59.     **</****tr****>**  
60.     **<****tr****>**  
61.         **<****td****>**:lt**</****td****>**  
62.         **<****td****>**上面是大于，这个是小于，eq就相当于等于呗**</****td****>**  
63.     **</****tr****>**  
64.     **<****tr****>**  
65.         **<****td****>**:header**</****td****>**  
66.         **<****td****>**匹配如h1\\h2\\h3类标题元素**</****td****>**  
67.     **</****tr****>**  
68.     **<****tr****>**  
69.         **<****td****>**:animated**</****td****>**  
70.         **<****td****>**匹配所有正在执行动画效果的元素**</****td****>**  
71.     **</****tr****>**  
72.     **</****table****>**  
73.  **</****body****>**  
74. **</****html****>**

**2、内容过滤器**

内容过滤器主要根据匹配元素所包含的的子元素或者文本内容进行过滤。主要有四种方式：

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-2 内容选择器</span>  
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>说 &nbsp; &nbsp; 明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">:contains</span></td> 
   <td><span style="font-family:SimSun">匹配包含给定文本的元素，例如，$("div:contains('图片')") 匹配所有包含文本"图片"的div元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:has</span></td> 
   <td><span style="font-family:SimSun">匹配含有选择器所匹配的元素的元素，例如，$("div:has(p)")匹配所有包含p元素的div元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:empty</span></td> 
   <td><span style="font-family:SimSun">匹配所有不包含子元素或者文本的空元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:parent</span></td> 
   <td><span style="font-family:SimSun">匹配含有子元素或者文本的元素，与empty相互对应</span></td> 
  </tr> 
 </tbody> 
</table>

实例2-7：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

执行效果如下：

![SouthEast][]

**3、可见过滤器**

可见过滤器就是根据元素的可见或者隐藏来进行匹配的

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-3 可见过滤器</span>  
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>说 &nbsp; 明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">:hidden</span></td> 
   <td><span style="font-family:SimSun">匹配所有不可见元素，或者type为hidden的元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:visible</span></td> 
   <td><span style="font-family:SimSun">匹配所有可见元素</span></td> 
  </tr> 
 </tbody> 
</table>

这个比较简单好记

实例2-8：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

执行效果：  
![SouthEast 1][]

**四、属性选择器**

属性选择器一般是根据元素的属性和其值作为过滤的条件来匹配相应的DOM元素

1、七种属性选择器

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-4 属性选择器</span>  
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>说 &nbsp; 明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">[attribute]</span></td> 
   <td><span style="font-family:SimSun">匹配包含给定属性的元素，例如，$("div[id]") 匹配所有包含id属性的div元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[attridute=value]</span></td> 
   <td><span style="font-family:SimSun">匹配属性等于特定值的元素，属性值的引号大多数是可选的，如果属性值包含"]"时，需要加引号以避免冲突。</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[attridute!=value]</span></td> 
   <td><span style="font-family:SimSun">跟上面的相对应，很好理解</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[attridute^=value]</span></td> 
   <td><span style="font-family:SimSun">匹配给定的属性是以某些值开始的元素，例如，$("input[name^='text']")表示所有name属性值是以text开始的input元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[attridute$=value]</span></td> 
   <td><span style="font-family:SimSun">匹配给定的属性是以某些值结尾的元素，跟上面的相对应</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[attridute*=value]</span></td> 
   <td><span style="font-family:SimSun">匹配给定的属性是包含某些值得元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">[selector1][selector2][selector3]</span></td> 
   <td><span style="font-family:SimSun">复合属性选择器，需要同时满足多个条件时使用，例如，$(input[name*='text'][id])表示匹配所有name属性值包含text的且包含id属性的input元素。</span></td> 
  </tr> 
 </tbody> 
</table>

2、使用属性选择器示例

看一个示例，在这个示例中将根据超链接文件的类型，分别为不同类型的文件添加图标。

实例2-8

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

执行前后效果：

![SouthEast 2][]

![SouthEast 3][]

**五、表单选择器**

表单是页面中使用频率较高的元素之一，但是很多表单域都是使用input元素来定义的，为了方便用户能够灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便地获取表单中某类表单域对象。

1、基本表单选择器

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-5 表单选择器</span>  
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>说 &nbsp; 明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">:input</span></td> 
   <td><span style="font-family:SimSun">匹配所有input、textarea、select和button元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:text</span></td> 
   <td><span style="font-family:SimSun">匹配所有单行文本框</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:password</span></td> 
   <td><span style="font-family:SimSun">匹配所有密码框</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:radio</span></td> 
   <td><span style="font-family:SimSun">匹配所有单选按钮</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:checkbox</span></td> 
   <td><span style="font-family:SimSun">匹配所有复选框</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:submit</span></td> 
   <td><span style="font-family:SimSun">匹配所有提交按钮</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:image</span></td> 
   <td><span style="font-family:SimSun">匹配所有图像域</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:reset</span></td> 
   <td><span style="font-family:SimSun">匹配所有重置按钮</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:button</span></td> 
   <td><span style="font-family:SimSun">匹配所有普通按钮</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:file</span></td> 
   <td><span style="font-family:SimSun">匹配所有文件域</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:hidden</span></td> 
   <td><span style="font-family:SimSun">匹配所有隐藏域</span></td> 
  </tr> 
 </tbody> 
</table>

下面看一个表单实例

实例2-9：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

处理前后效果图：

![SouthEast 4][]                                                  ![SouthEast 5][]

注意：$("\#form1 text") 在form1后面有一个空格

2、高级表单选择器

除了简单的表单域选择器外，jQuery还根据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同，它们可以选择任何类型的表单域，因为它主要根据表单属性来选择。

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px">  
 <span style="font-family:SimSun; font-size:12px">表2-6 高级表单选择器</span>  
 <tbody> 
  <tr> 
   <th>选择器</th> 
   <th>说 &nbsp; 明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td><span style="font-family:SimSun">:enabled</span></td> 
   <td><span style="font-family:SimSun">匹配所有可用元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:disabled</span></td> 
   <td><span style="font-family:SimSun">匹配所有不可用元素</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:checked</span></td> 
   <td><span style="font-family:SimSun">匹配所有被选中的元素（复选框、单选按钮等，不包括select的option）</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-family:SimSun">:selected</span></td> 
   <td><span style="font-family:SimSun">匹配所有选中的option元素</span></td> 
  </tr> 
 </tbody> 
</table>

实例2-10：

**\[html\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

前后效果：

![Center 1][]![Center 2][]

[view plain]: http://blog.csdn.net/caohaicheng/article/details/23911159#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/302317
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/302317/fork
[Center]: /images/20220824/df33317b82ee4899be4907f2beb595ed.png
[SouthEast]: /images/20220824/72d934ed21c14a2b97a8ae8a13f93034.png
[SouthEast 1]: /images/20220824/777224155f434c72b2283c4fe30aa4e3.png
[SouthEast 2]: /images/20220824/8255df1529b74881b73e0a21843955bd.png
[SouthEast 3]: /images/20220824/e23404e7c0de480492bd26b8ce7be69c.png
[SouthEast 4]: https://img-blog.csdn.net/20140417103940703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 5]: /images/20220824/16e5d666b52843ad8de1c617b51bd799.png
[Center 1]: https://img-blog.csdn.net/20140417110444218?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220824/fad0c9d6b65e4a3284e88e39d3854c91.png