jQuery--过滤选择器（简单过滤选择器、内容过滤选择器）详解

绝地灬酷狼 2021-08-13 23:46 439阅读 0赞

#### 过滤选择器 ####

基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。

#### 简单过滤选择器 ####

简单过滤选择器是过滤选择器中用得最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，书写时均以冒号(:)开头。

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">描述</th> 
   <th align="center">返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">:first</td> 
   <td align="center">选取第一个元素</td> 
   <td align="center">单个jQuery对象</td> 
  </tr> 
  <tr> 
   <td align="center">:last</td> 
   <td align="center">选取最后一个元素</td> 
   <td align="center">单个jQuery对象</td> 
  </tr> 
  <tr> 
   <td align="center">:even</td> 
   <td align="center">选取所有索引值为偶数的元素，索引从0开始</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:odd</td> 
   <td align="center">选取所有索引值为奇数的元素、索引从0开始</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:header</td> 
   <td align="center">选取所有标题元素，如h1、h2等</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:focus</td> 
   <td align="center">获取当前获取焦点的元素（1.6+）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:root</td> 
   <td align="center">获取文档的根元素（1.9+）</td> 
   <td align="center">单个JQuery对象</td> 
  </tr> 
  <tr> 
   <td align="center">:animated</td> 
   <td align="center">选取所有正在执行动画效果的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:eq(index)</td> 
   <td align="center">选取索引等于index的元素，索引从0开始</td> 
   <td align="center">单个jQuery对象</td> 
  </tr> 
  <tr> 
   <td align="center">:gt(index)</td> 
   <td align="center">选取索引大于index的元素，索引从0开始</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:lt(index)</td> 
   <td align="center">选取索引小于index的元素，索引从0开始</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:not(selector)</td> 
   <td align="center">选取selector意外的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div>
    			<table>
    				<tr><td>11</td><td>12</td><td>13</td></tr>
    				<tr><td>21</td><td>22</td><td>23</td></tr>
    				<tr><td>31</td><td>32</td><td>33</td></tr>
    				<tr><td>41</td><td>42</td><td>43</td></tr>
    				<tr><td>51</td><td>52</td><td>53</td></tr>
    				<tr><td>61</td><td>63</td><td>63</td></tr>
    				<tr><td>71</td><td>72</td><td>73</td></tr>
    				<tr><td colspan="3">6</td></tr>
    			</table>
    			<script type="text/javascript"> $(function(){ //第一行 $("table tr:first").css("background-color","gray"); //最后一行 $("table tr:last").css("text-align","right"); //第三行 $("table tr:eq(2)").css("color","red"); //所有偶数行 $("table tr:odd").css("background-color","#dddddd"); //根元素 $(":root").css("background-color","#EFEFEF"); //除了第一行 $("table tr:not(:first)").css("font-size", "20pt"); }); </script>
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

#### 内容过滤选择器 ####

内容过滤选择器是指根据元素的文字内容或所包含的子元素的特征进行过滤的选择器。

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">描述</th> 
   <th align="center">返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">:contains(text)</td> 
   <td align="center">选取包含text内容的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:has(selector)</td> 
   <td align="center">选取含有selector所匹配的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:empty</td> 
   <td align="center">选取所有不包含文本或者子元素的空元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:parent</td> 
   <td align="center">选取含有字元素或文本的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<div>
    			<table>
    				<tr><td>11</td><td>12</td><td>13</td></tr>
    				<tr><td>21</td><td>22</td><td>23</td></tr>
    				<tr><td>31</td><td>32</td><td>33</td></tr>
    				<tr><td>41</td><td>42</td><td>43</td></tr>
    				<tr><td><span>51</span></td><td>52</td><td></td></tr>
    				<tr><td>61</td><td>63</td><td></td></tr>
    				<tr><td>71</td><td>72</td><td></td></tr>
    				<tr><td colspan="3">8</td></tr>
    			</table>
    		</div>
    		<script type="text/javascript"> $(function(){ //内容包含“2”的td $("td:contains('2')").css("font-weight","900"); //包含文本的td $("td:parent").css("background-color","yellow"); //不包含文本的td $("td:empty").css("background-color", "red"); //包含span的td $("td:has('span')").css("background-color","blue"); }); </script>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/ee3cda2728e849b5959dec4591efe5d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/ec4364819e4c457aa4d53252fa3f5074.png