登录  /  注册
首页 > web前端 > js教程 > 正文

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

青灯夜游
发布: 2018-10-20 11:35:46
原创
6191人浏览过

jquery的过滤选择器做什么?常用过滤选择器有哪些?本篇文章就给大家介绍jquery的过滤选择器,让大家了解常用的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')  //选择 所有的标题元素.比如h1, h2, h3等等...
登录后复制

⑩: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] 选取拥有此属性的元素

$(&#39;div[title]&#39;)  //选取含有 属性title 的div元素
登录后复制

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

$(&#39;div[title=test]&#39;)  //选取 属性title值等于 test 的div元素
登录后复制

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

$(&#39;div[title!=test]&#39;)  //选取 属性title值不等于 test 的div元素
登录后复制

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

 $(&#39;div[title^=te]&#39;)  //选取 属性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”)的元素

$(&#39;div[title|="en"]&#39;)  //选取 属性title等于en或以en为前缀(该字符串后跟一个连字符&#39;-&#39;)的元素
登录后复制

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

$(&#39;div[title~="uk"]&#39;)//选取 属性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 选取每个父元素下的第一个子元素,返回集合元素

//选取每个父元素下的第一个子元素
$(&#39;div.one :first-child&#39;)
登录后复制

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

//选取每个父元素下的最后一个子元素
$(&#39;div.one :last-child&#39;)
登录后复制

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

//如果父元素下的仅仅只有一个子元素,那么选中这个子元素
$(&#39;div.one :only-child&#39;)
登录后复制

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

//选取每个父元素下的第2个子元素
$(&#39;div.one :nth-child(2)&#39;)
登录后复制

总结:以上就是几种常见jquery过滤选择器的全部介绍,大家可以动手使用这些过滤选择器来实现自己想要的效果。希望能对大家的学习有所帮助,更多相关教程请访问jQuery视频教程JavaScript视频教程bootstrap视频教程

以上就是jquery的过滤选择器有哪些?常用的过滤选择器有哪些?的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号