jquery中有哪些常用的过滤选择器

这篇“jquery中有哪些常用的过滤选择器”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“jquery中有哪些常用的过滤选择器”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

jquery的过滤选择器做什么？常用过滤选择器有哪些？

首先我们了解一下jquery过滤选择器选择器的相关知识：

jquery 选择器可以对 HTML 元素组或单个元素进行操作。而，过滤选择器是jquery 选择器中应用最为广泛的一种，它可以根据某一类过滤规则进行元素匹配，查找到（一个或多个）元素，书写时以：开头。

jquery过滤选择器可以分为以下几大类：

1. jquery基本过滤选择器（重点）

2. jquery内容过滤选择器

3. jquery可见性过滤选择器

4. jquery属性过滤选择器

5. jquery状态过滤选择器

6. jquery子元素过滤选择器
   

下面我们就以上述的分类来聊聊常见的jquery过滤选择器有哪些，以及这些jquery过滤选择器的使用方法。

jquery基本过滤选择器（重点）

①first()或者：first 选取第一个元素

//选择第一个div元素
$('div:first')  
$('div').first()

②last()或者：last 选取最后一个元素

//选择最后一个div元素
$('div:last')   
$('div').last()

③：not(selector) 选取除开给定选择器的其他元素

 $('div:not(.one)')  //选择class不为one的 所有div元素

④：even 选取索引为偶数的元素，索引从0开始

 $('div:even')   //选择 索引值为偶数 的div元素

⑤：odd 选取索引为奇数的元素，索引从0开始

$('div:odd')  //选择 索引值为奇数 的div元素

⑥：eq(index) 选取制定索引元素，从0开始

$('div:eq(3)')  //选择 索引等于 3 的div元素

⑦：gt(index) 选取大于给定索引的元素，从0开始

$('div:gt(3)')  //选择 索引大于 3 的div元素

⑧：lt(index) 选取小于给定索引的元素，从0开始

$('div:lt(3)')  //选择 索引小于 3 的div元素

⑨：header 选取标题类型元素

$(':header')  //选择 所有的标题元素.比如h2, h3, h4等等...

⑩：animated 选取正在执行动画效果的元素

$(':animated')   //选择 当前正在执行动画的所有元素

⑪：focus 选取当前被焦点的元素

$(':focus')  //选择 当前选取焦点的所有元素

jquery内容过滤选择器

①：contains(text) 选取包含指定文本的元素

$("div:contains('Runob')")    // 选取包含 Runob文本的元素

②：empty 选取不包含子元素或文本的空元素

$("td:empty")       //选取不包含子元素或者文本的tb空元素

③：has(selector) 选取含有选择器匹配元素的元素

$("div:has('.mini')")  //选取含有class为mini元素 的div元素

④：parent 选取包含子元素或文本的空元素

$("div:parent")                //选取含有子元素或者文本的div元素

jquery可见性过滤选择器

①：hidden 选取不可见的元素

$("li:hidden")       //选取所有不可见元素，或type为hidden的元素,例：<input type="hidden"/>

②：visible 选取可见的元素

$("li:visible")      //选取所有可见 li 元素

jquery属性过滤选择器

①[attribute] 选取拥有此属性的元素

$('div[title]')  //选取含有 属性title 的div元素

②[attribute=value] 选取属性值为value的元素

$('div[title=test]')  //选取 属性title值等于 test 的div元素

③[attribute!=value] 选取属性值不等于value的元素

$('div[title!=test]')  //选取 属性title值不等于 test 的div元素

④[attribute^=value] 选取属性值以value开始的元素

 $('div[title^=te]')  //选取 属性title值 以 te 开始 的div元素

⑤[attribute$=value] 选取属性值以value结束的元素

$("div[title$=est]")  //选取 属性title值 以 est 结束 的div元素

⑥[attribute*=value] 选取属性值含有value的元素

$("div[title*=es]")  //选取 属性title值 含有 es  的div元素

⑦[attribute|=value] 选取属性值等于value或前缀为value(即”value-xxx”)的元素

$('div[title|="en"]')  //选取 属性title等于en或以en为前缀（该字符串后跟一个连字符'-'）的元素

⑧[attribute~=value] 选取属性值用空格分隔的值中包含给定值的元素

$('div[title~="uk"]')//选取 属性title用空格分隔的值中包含字符uk的元素

⑨[attribute1][attribute2]…[attributeN] 组合属性选择器

$("div[id][title*=es]")  //组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素

jquery状态过滤选择器

①：enabled 选取可用的元素

$("input:enabled")    // 选取可用的 input

②：[attribute=value] 选取不可用的元素

$("input:disabled")   // 选取不可用的 input

③：checked 选取选中的元素

$("input:checked")    // 选取选中的 input

④：selected 选取选中的元素

$("option:selected")  // 选取选中的 option

jquery子元素过滤选择器

①：first-child 选取每个父元素下的第一个子元素，返回集合元素

//选取每个父元素下的第一个子元素
$('div.one :first-child')

②：last-child 选取每个父元素下的最后一个子元素，返回集合元素

//选取每个父元素下的最后一个子元素
$('div.one :last-child')

③：only-child 选取每个父元素下的唯一子元素，返回集合元素

//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
$('div.one :only-child')

④：nth-child(index)选取每个父元素下的第index个子元素或者奇偶元素，index从1算起

//选取每个父元素下的第2个子元素
$('div.one :nth-child(2)')

以上是“jquery中有哪些常用的过滤选择器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！