子元素过滤器
在页面设计过程中需要突出某些行时&＃xff0c;可以通过基本过滤选择器中的:eq()来实现表单中行的凸显&＃xff0c;但不能同时让多个表具有相同的效果。在jQuery中&＃xff0c; 字元素过滤选择器可以轻松地选取所有父元素中的指定元素&＃xff0c;并进行处理。
| 选择器 | 描述 | 返回 |
|---|
| :first-child | 选取每个父元素中的第一个元素 | JQuery对象数组 |
| :last-child | 选取每个父元素中的最后一个元素 | jQuery对象数组 |
| :only-child | 当父元素只有一个子元素时&＃xff0c;进行匹配&＃xff0c;否则不匹配 | jQuery对象数组 |
| :nth-child(N\odd\even) | 选取每个父元素中的第N个子元素或奇偶元素 | jQuery对象数组 |
| :first-of-type | 选取每个父元素中的第一个元素&＃xff08;1.9&＃43;&＃xff09; | jQuery对象数组 |
| :last-of-type | 选取每个父元素中的最后一个元&＃xff08;1.9&＃43;&＃xff09; | jQuery对象数组 |
| :only-of-type | 当父元素只有一个子元素时匹配&＃xff0c;否则不匹配&＃xff08;1.9&＃43;&＃xff09; | jQuery对象数组 |
其中&＃xff0c;在:nth-child(N | odd | even)选择器中&＃xff0c;元素的下标从1开始。
- 当参数N为整数时&＃xff0c;表示选取集合中的第N个元素
- 当参数为odd时&＃xff0c;表示选取集合中所有下标为奇数的元素
- 当参数为even时&＃xff0c;表示选取集合中所有下标为偶数的元素
- 当参数为an&＃43;b形式时&＃xff0c;表示从第b个开始&＃xff0c;每隔a个选取一个&＃xff0c;例如3n&＃43;2表示从第2个开始每个3个选取一个
在:first-child选择器用于选取父元素中的第1个元素&＃xff0c;且该元素在结构上处于第1个元素&＃xff0c;但该元素在相同类型中位于第1即可&＃xff0c;在结构位置上没有要求。同理&＃xff0c;:last-of-type、:only-of-typehe &＃xff1a;first-of-type选择器类似&＃xff0c;仅在相同类型中符合要求即可&＃xff0c;不需要考虑元素的具体位置。
示例&＃xff1a;
<html><head><meta charset&＃61;"UTF-8"><title>jQuery子元素过滤选择器title><script type&＃61;"text/Javascript" src&＃61;"js/jquery-2.1.0.js" >script>head><body><table id&＃61;"dataTable"><tr><td>序号td><td>商品名称td><td>价格td><td>库存数量td><td>上架数量td><td>保质期td>tr><tr><td>1td><td>大宝td><td>25td><td>100td><td>40td><td>2019-1-2td>tr><tr><td>2td><td>海飞丝td><td>30td><td>20td><td>33td><td>2020-12-4td>tr><tr><td>3td><td>迪奥td><td>1000td><td>39td><td>23td><td>2020-3-4td>tr><tr><td>4td><td>飞利浦td><td>2000td><td>60td><td>67td><td>2024-4-4td>tr> <tr><td colspan&＃61;"6">共计&＃xff1a;4中商品td>tr>table><ul><span>商品名称span><li>大宝li><li>海飞丝li><li>迪奥li><li>飞利浦li><span>共计&＃xff1a;4种商品span>ul><ul><span>商品名称span><li>飞利浦li><span>共计&＃xff1a;4种商品span>ul><script type&＃61;"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"});$("#dataTable tr td:nth-child(3n&＃43;2)").css("background-color","red");$("li:first-child").css("background-color","blue");$("li:last-child").css("background-color","red");$("li:nth-child(odd)").css({fontStyle:"italic",fontWeight:"bold"});$("li:first-of-type").css({backgroundColor:"yellow",color:"blue"});$("li:last-of-type").css({backgroundColor:"lightgreen",color:"red"});$("li:only-of-type").css("color","gray");});script>body>
html>
表单对象属性过滤选择器
表单对象属性过滤器是指通过表单对象的属性特征进行筛选的选择器。
| 选择器 | 描述 | 返回 |
|---|
| :enabled | 选取表单中属性为可用的元素 | jQuery对象数组 |
| :disabled | 选取表单中属性为不可用的元素 | jQuery对象数组 |
| :checked | 选取表单中被选中的元素&＃xff08;单选按钮、复选框&＃xff09; | jQuery对象数组 |
| :selected | 选取表单中被选中的选项元素&＃xff08;下拉列表&＃xff09; | jQuery对象数组 |
示例&＃xff1a;
<html><head><meta charset&＃61;"UTF-8"><title>jQuery表单对象属性过滤选择器title><script type&＃61;"text/Javascript" src&＃61;"js/jquery-2.1.0.js" >script>head><body><form id&＃61;"myform" action&＃61;"#">用户ID&＃xff1a;<input type&＃61;"text" value&＃61;"U0001" disabled/>用户名&＃xff1a;<input type&＃61;"tel" name&＃61;"userName" value&＃61;"请输入用户名" /><br />密码&＃xff1a;<input type&＃61;"password" name&＃61;"userPwd" value&＃61;"请输入密码" /><br />验证码&＃xff1a;<input type&＃61;"text" name&＃61;"validateCode" disabled /><br />销售类型&＃xff1a;<input type&＃61;"checkbox" name&＃61;"goodsType" value&＃61;"红酒" checked/>红酒<input type&＃61;"checkbox" name&＃61;"goodsType" value&＃61;"饮料" />饮料<input type&＃61;"checkbox" name&＃61;"goodsType" value&＃61;"运动装" checked/>运动装<input type&＃61;"checkbox" name&＃61;"goodsType" value&＃61;"太阳伞" />太阳伞<br />销售区域&＃xff1a;<select name&＃61;"province" multiple><option value&＃61;"北京">北京option><option value&＃61;"山东" selected>山东option><option value&＃61;"重庆">重庆option><option value&＃61;"长三角" select>长三角option><option value&＃61;"内蒙古">内蒙古option>select><hr />用户信息如下&＃xff1a;<br /><span id&＃61;"result">span>form><script type&＃61;"text/Javascript">$(function(){$("input:not([type&＃61;&＃39;checkbox&＃39;])").css({marginTop:"3px", width:"200px"});$("#myform input:disabled").css({backgroundColor:"red", borderColor:"yellow"});$("#myform input:enabled").css("color","aqua");var goodsType &＃61; $("#myform input:checked");var province &＃61; $("#myform option:selected").text();$("#result").html("销售区域&＃xff1a;" &＃43; province &＃43; "
销售类型有&＃xff1a;" &＃43; goodsType.length &＃43; "个");});script>body>
html>
京公网安备 11010802041100号