jQuery--过滤器（子元素过滤器、表单对象属性过滤器）详解

深碍√TFBOYSˉ_ 2021-08-14 01:30 465阅读 0赞

#### 子元素过滤器 ####

在页面设计过程中需要突出某些行时，可以通过基本过滤选择器中的:eq()来实现表单中行的凸显，但不能同时让多个表具有相同的效果。在jQuery中， 字元素过滤选择器可以轻松地选取所有父元素中的指定元素，并进行处理。

<table> 
 <thead> 
  <tr> 
   <th align="center">选择器</th> 
   <th align="center">描述</th> 
   <th align="center">返回</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">:first-child</td> 
   <td align="center">选取每个父元素中的第一个元素</td> 
   <td align="center">JQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:last-child</td> 
   <td align="center">选取每个父元素中的最后一个元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:only-child</td> 
   <td align="center">当父元素只有一个子元素时，进行匹配，否则不匹配</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:nth-child(N\odd\even)</td> 
   <td align="center">选取每个父元素中的第N个子元素或奇偶元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:first-of-type</td> 
   <td align="center">选取每个父元素中的第一个元素（1.9+）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:last-of-type</td> 
   <td align="center">选取每个父元素中的最后一个元（1.9+）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:only-of-type</td> 
   <td align="center">当父元素只有一个子元素时匹配，否则不匹配（1.9+）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
 </tbody> 
</table>

其中，在:nth-child(N | odd | even)选择器中，元素的下标从1开始。

*  当参数N为整数时，表示选取集合中的第N个元素
 *  当参数为odd时，表示选取集合中所有下标为奇数的元素
 *  当参数为even时，表示选取集合中所有下标为偶数的元素
 *  当参数为an+b形式时，表示从第b个开始，每隔a个选取一个，例如3n+2表示从第2个开始每个3个选取一个

在:first-child选择器用于选取父元素中的第1个元素，且该元素在结构上处于第1个元素，但该元素在相同类型中位于第1即可，在结构位置上没有要求。同理，:last-of-type、:only-of-typehe ：first-of-type选择器类似，仅在相同类型中符合要求即可，不需要考虑元素的具体位置。

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery子元素过滤选择器</title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<table id="dataTable">
    			<tr><td>序号</td><td>商品名称</td><td>价格</td><td>库存数量</td>
    				<td>上架数量</td><td>保质期</td></tr>
    			<tr><td>1</td><td>大宝</td><td>25</td><td>100</td>
    				<td>40</td><td>2019-1-2</td></tr>
    			<tr><td>2</td><td>海飞丝</td><td>30</td><td>20</td>
    				<td>33</td><td>2020-12-4</td></tr>
    			<tr><td>3</td><td>迪奥</td><td>1000</td><td>39</td>
    				<td>23</td><td>2020-3-4</td></tr>
    			<tr><td>4</td><td>飞利浦</td><td>2000</td><td>60</td>
    				<td>67</td><td>2024-4-4</td></tr>	
    			<tr><td colspan="6">共计：4中商品</td></tr>
    		</table>
    		<ul>
    			<span>商品名称</span>
    			<li>大宝</li>
    			<li>海飞丝</li>
    			<li>迪奥</li>
    			<li>飞利浦</li>
    			<span>共计：4种商品</span>
    		</ul>
    		<ul>
    			<span>商品名称</span>
    			<li>飞利浦</li>
    			<span>共计：4种商品</span>
    		</ul>
    		
    		<script type="text/javascript"> $(function(){ //第一列 $("#dataTable tr td:first-child").css("background-color","gray"); //最后一列 $("#dataTable tr td:last-child").css("background-color","blue"); //最后一行 $("#dataTable tr td:only-child").css("border","5px solid yellow"); //偶数列 $("#dataTable tr td:nth-child(even)").css({ fontStyle:"italic",fontWeight:"800"}); //第二个开始，每3个选一个 $("#dataTable tr td:nth-child(3n+2)").css("background-color","red"); //第一个li $("li:first-child").css("background-color","blue"); //最后一个li $("li:last-child").css("background-color","red"); //奇数li $("li:nth-child(odd)").css({ fontStyle:"italic",fontWeight:"bold"}); //俩个ul中的第一个li $("li:first-of-type").css({ backgroundColor:"yellow",color:"blue"}); //俩个ul中的最后一个li $("li:last-of-type").css({ backgroundColor:"lightgreen",color:"red"}); //第二个ul中的唯一li $("li:only-of-type").css("color","gray"); }); </script>
    	</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">:enabled</td> 
   <td align="center">选取表单中属性为可用的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:disabled</td> 
   <td align="center">选取表单中属性为不可用的元素</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:checked</td> 
   <td align="center">选取表单中被选中的元素（单选按钮、复选框）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
  <tr> 
   <td align="center">:selected</td> 
   <td align="center">选取表单中被选中的选项元素（下拉列表）</td> 
   <td align="center">jQuery对象数组</td> 
  </tr> 
 </tbody> 
</table>

示例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery表单对象属性过滤选择器</title>
    		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
    	</head>
    	<body>
    		<form id="myform" action="#">
    			用户ID：<input type="text" value="U0001" disabled/>
    			用户名：<input type="tel" name="userName" value="请输入用户名" /><br />
    			密码：<input type="password" name="userPwd" value="请输入密码" /><br />
    			验证码：<input type="text" name="validateCode" disabled /><br />
    			销售类型：<input type="checkbox" name="goodsType" value="红酒" checked/>红酒
    			<input type="checkbox" name="goodsType" value="饮料" />饮料
    			<input type="checkbox" name="goodsType" value="运动装" checked/>运动装
    			<input type="checkbox" name="goodsType" value="太阳伞" />太阳伞
    			<br />
    			销售区域：<select name="province" multiple>
    				<option value="北京">北京</option>
    				<option value="山东" selected>山东</option>
    				<option value="重庆">重庆</option>
    				<option value="长三角" select>长三角</option>
    				<option value="内蒙古">内蒙古</option>
    			</select>
    			<hr />用户信息如下：<br /><span id="result"></span>
    		</form>
    		
    		<script type="text/javascript"> $(function(){ //这只复选框意外的input样式 $("input:not([type='checkbox'])").css({ marginTop:"3px", width:"200px"}); // $("#myform input:disabled").css({ backgroundColor:"red", borderColor:"yellow"}); // $("#myform input:enabled").css("color","aqua"); // var goodsType = $("#myform input:checked"); var province = $("#myform option:selected").text(); $("#result").html("销售区域：" + province + "<br/>销售类型有：" + goodsType.length + "个"); }); </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/57c1466d10a44d6680372814beb364f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/e3cf5164055040009c068d0712a4dbe4.png