jQuery中的过滤性选择器有哪些_知识百科

jquery中的选择器有很多，比如子元素选择器，后代选择器，过滤性选择器等等，这篇文章就和大家讲讲jquery中的过滤性选择器，正在学习选择器的朋友可以参考一下，希望对你有帮助。

:first和:last过滤选择器

:first得到一组相同标签元素中的第1个元素
:last得到一组相同标签元素中的最后1个元素
例如：

 改变最后一行"苹果"背景颜色：
  葡萄
 香蕉
 橘子
 西瓜
 苹果
 
 <ｓｃｒｉｐｔ type="text/javascript"> $("li:last").css("background-color", "red");

:contains(text)过滤选择器

:contains(text)选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象
例如：

 改变包含"jQuery"字符内容的背景色：
  强大的"jQuery"
 "javascript"也很实用
 "jQuery"前端必学
 "java"是一种开发语言
 前端利器——"jQuery"
 
<ｓｃｒｉｐｔ type="text/javascript"> $("li:contains('jQuery')").css("background", "green");

:has(selector)过滤选择器

:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素
例如：

 改变包含"label"元素的背景色：
  我是P先生
 L妹纸就是我
 我也是P先生
 我也是L妹纸哦
 P先生就是我哦
 
<ｓｃｒｉｐｔ type="text/javascript"> $("li:has('label')").css("background-color", "blue");

:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素
例如：

 显示隐藏元素的内容
 value="我已隐藏起来"/> 
 <ｓｃｒｉｐｔ type="text/javascript"> var $strHTML = $("input:hidden").val(); $("p").html($strHTML);

:visible过滤选择器

:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。
例如：

 修改可见“水果”的背景色
  橘子
 香蕉
 葡萄
 苹果
 西瓜
 
 <ｓｃｒｉｐｔ type="text/javascript"> $("li:visible").css("background-color","blue");

[attribute=value]属性选择器

[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
例如：

 改变"title"属性值为"蔬菜"的背景色
  茄子
 香蕉
 芹菜
 苹果
 西瓜
 
 <ｓｃｒｉｐｔ type="text/javascript"> $("li[title='蔬菜']").css("background-color", "green");

[attribute!=value]属性选择器

[attribute!=value]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。

[attribute*=value]属性选择器

[attribute*=value]它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。
例如：

 改变"title"属性值包含"果"的背景色
  茄子
 香蕉
 芹菜
 小西红柿
 西瓜
 
 <ｓｃｒｉｐｔ type="text/javascript"> $("li[title*='果']").css("background-color", "green");

:first-child子元素过滤选择器

:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
例如：

 改变每个"蔬菜水果"中第一行的背景色
  芹菜
 茄子
 萝卜
 大白菜
 西红柿
 
  橘子
 香蕉
 葡萄
 苹果
 西瓜
 
 <ｓｃｒｉｐｔ type="text/javascript"> $("li:first-child").css("background-color", "green");