jquery学习记录二（过滤性选择器）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery学习记录二（过滤性选择器）相关的知识，希望对你有一定的参考价值。
过滤性选择器包括：
1.:first过滤选择器
2.:eq(index)过滤选择器
3.:contains(text)过滤选择器
4.:has(selector)过滤选择器
5.:hidden过滤选择器
6.:visible过滤选择器
7.[attribute=value]属性选择器
8.[attribute!=value]属性选择器
9.[attribute*=value]属性选择器
10.:first-child子元素选择器
11.last-child子元素选择器
过滤性选择器，该类型的选择器是根据某过滤规则进行的元素的匹配，书写时以“：”号开头，通常用于查找集合元素中的某一位置的单个元素。
（1）:first,:last 过滤性选择器：eg:$("li:first") $("li:last")
first选择第一个li标签，last选择最后一个li标签。
<body> <div>改变最后一行"苹果"背景颜色：</div> <ol> <li>葡萄</li> <li>香蕉</li> <li>橘子</li> <li>西瓜</li> <li>苹果</li> </ol> <script type="text/javascript"> $("li:last").css("background-color", "red"); </script> </body>
（2）：eq（index）过滤选择器
如果想从一组标签元素数组中，灵活选择任意一个标签元素，我们可以使用:eq(index),其中参数index表示索引号，它从0开始，如果index的值为3，表示选择的是第4个元素。如下选择的是“葡萄”。
<body> <div>改变中间行"葡萄"背景颜色：</div> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> <script type="text/javascript"> $("li:eq(2)").css("background-color", "#60F"); </script> </body>
（3）：contains（text）过滤选择器
与上面介绍的：eq（index）选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找多个元素，使用：contains（text）选择器更好，它的功能是选择包含指定文字字符串的全部元素，它通常与其他元素结合使用，获取包含”text“字符串内容的全部元素。如下选择的是1,3,5.
<body> <div>改变包含"jQuery"字符内容的背景色：</div> <ol> <li>强大的"jQuery"</li> <li>"javascript"也很实用</li> <li>"jQuery"前端必学</li> <li>"java"是一种开发语言</li> <li>前端利器——"jQuery"</li> </ol> <script type="text/javascript"> $("li:contains(‘jQuery‘)").css("background", "green"); </script> </body>
（4）：has（selector）过滤选择器
包含的元素名称。如下选择的是2,4.
<body> <div>改变包含"label"元素的背景色：</div> <ol> <li><p>我是P先生</p></li> <li><label>L妹纸就是我</label></li> <li><p>我也是P先生</p></li> <li><label>我也是L妹纸哦</label></li> <li><p>P先生就是我哦</p></li> </ol> <script type="text/javascript"> $("li:has(‘label‘)").css("background-color", "blue"); </script> </body>
（5）：hidden过滤选择器
：hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。
<body> <h3>显示隐藏元素的内容</h3> <input id="hidstr" type="hidden" value="我已隐藏起来"/> <div></div> <script type="text/javascript"> var $strhtml = $("input:hidden").val(); $("div").html($strHTML); </script> </body>
（6）：visible过滤选择器
与：hidden选择器正好相反，也就是只要不将元素的display属性值设置为none，那么都可以通过该选择器获取。如下获取的是香蕉，葡萄和苹果。
<body> <h3>修改可见“水果”的背景色</h3> <ul> <li style="display:none">橘子</li> <li style="display:block">香蕉</li> <li style="display:">葡萄</li> <li>苹果</li> <li style="display:none">西瓜</li> </ul> <script type="text/javascript"> $("li:visible").css("background-color","blue"); </script> </body>
（7）[attribute=value]属性选择器
该选择器的功能是获取与属性名和属性值完全相同的全部元素，其中 []是专用于属性选择器的括号符。
<body> <h3>改变"title"属性值为"蔬菜"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="水果">苹果</li> <li title="水果">西瓜</li> </ul> <script type="text/javascript"> $("li[title=‘蔬菜‘]").css("background-color", "green"); </script> </body>
（8）[attribute!=value] 属性选择器
<body> <h3>改变"title"属性值不为"蔬菜"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="水果">苹果</li> <li title="水果">西瓜</li> </ul> <script type="text/javascript"> $("li[title!=‘蔬菜‘]").css("background-color", "green"); </script> </body>
（9）[attribute*=value]属性选择器
该选择器可以获取属性值中包含制定内容的全部元素，其中[]是专用于属性选择器的括号符。
如下选择的有”香蕉“，”小西红柿“和”西瓜“。
<body> <h3>改变"title"属性值包含"果"的背景色</h3> <ul> <li title="蔬菜">茄子</li> <li title="水果">香蕉</li> <li title="蔬菜">芹菜</li> <li title="人参果">小西红柿</li> <li title="水果">西瓜</li> </ul> <script type="text/javascript"> $("li[title*=‘果‘]").css("background-color", "green"); </script> </body>
（10）:first-child子元素过滤选择器
使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的是只有一个元素，并不是一个集合，而使用：first-child 子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合，常用多个集合数据的选择处理。如下选择的是”芹菜“和”橘子“。
<body> <h3>改变每个"蔬菜水果"中第一行的背景色</h3> <ol> <li>芹菜</li> <li>茄子</li> <li>萝卜</li> <li>大白菜</li> <li>西红柿</li> </ol> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> <script type="text/javascript"> $("li:first-child").css("background-color", "green"); </script> </body>
（11）:last-child子元素过滤选择器
该子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用于多个集合数据的选择处理。如下获取的是”西红柿“和”西瓜“。
<body> <h3>改变每个"蔬菜水果"中最后一行的背景色</h3> <ol> <li>芹菜</li> <li>茄子</li> <li>萝卜</li> <li>大白菜</li> <li>西红柿</li> </ol> <ol> <li>橘子</li> <li>香蕉</li> <li>葡萄</li> <li>苹果</li> <li>西瓜</li> </ol> <script type="text/javascript"> $("li:last-child").css("background-color", "blue"); </script> </body>
以上是关于jquery学习记录二（过滤性选择器）的主要内容，如果未能解决你的问题，请参考以下文章