jQuery选择器

时间: 2019-09-10阅读: 260标签: 选择器

选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码,而且可以达到事半功倍的效果


jQuery的优点:

1.简洁的语法

2.完善的事件处理机制


css选择器

选择器语法 描述实例
标签选择器E{css规则}以文档标签作为选择符div{width:100px;}
ID选择符#id {css规则}以文档元素的唯一标识id号作为选择符#box{width:100px;height:100px;}
类选择符E.className{css规则}以文档元素的类名作为选择符div.box{color:#fff;}
.box{background:red;}
群组选择器E1,E2,E3{css规则}多个元素应用同样的样式div,p,h1{padding:0;margin:0}
后代选择器E F{css规则}以元素E的后代元素F作为选择符.box a{color:green;}
通配符选择器*{css规则}以文档的所有元素作为选择符*{font-size:14px;}
伪类选择器:after   :before


jQuery选择器

基本选择器是jquery中常用的选择器,也是最简单的选择器,他通过元素和标签来查找DOM中的元素,注意:在网页中,id名称只能使用一次,class允许多次使用。


基本选择器

选择器描述返回实例
#id根据匹配给定的id匹配一个元素单个元素$("#test")选取id为test的元素
.class根据给定的类名匹配元素集合元素$(".test")选取class为test的元素
element根据给定的元素名称集合元素$("p")选取所有的p元素
*匹配所有的元素集合元素$("*")选取所有的元素
Selector1,Selector2,Selector3...将每一个选择器匹配到的元素合并后一起返回集合元素$("div,span,.p.box")选取所有div,所有span,和class名为box的p元素


层次选择器

层次选择器 通过 DOM 元素之间的层次关系来获取特定元素 , 例如后代元素 , 子元素 , 相邻元素 , 兄弟元素等 , 则需要使用层次选择器。
注意:(“ prev ~ div”) 选择器只能选择 “ # prev ” 元素 后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点 就可以选取
选择器描述返回实例
$("ancestor descendant")选取ancestor元素里的所有descendant元素集合元素$("div span")选取div里的所有span元素
$("parent>child")选取parent下的所有子元素child集合元素$("div>span")选取div下的所有名为span的子元素
$(" prev+next ")选取紧接在prev元素后面的next元素集合元素$(".one+div")选取class名为one的下一个div元素
$("prev~siblings")选取元素prev元素之后的所有兄弟siblings元素集合元素$(".one~p")选取class名为one后面的所有子元素为siblings的元素
 
基本过滤选择器
过滤选择器主要是通过特定的规则进行筛选 出所需的 DOM 元素 , 该选择器 都以 “ : ” 开头; 按照不同的过滤规则 , 过滤选择器可以分为基本过滤 , 内容过滤 , 可见性过滤 , 属性过滤 , 子元素过滤和表单对象属性过滤选择器 .
选择器描述返回实例
:first选取第一个元素单个元素$("div:first")选取所有div的第一个div元素
:last选取最后一个元素单个元素$("div:last")选取所有div第最后一个div元素
:not(selector)选取除了selector元素之外的元素集合元素$("div:not('.box')")选取除了class名为box元素的其他div元素
:even选取所有索引号为偶数的元素,索引号从0开始集合元素$("div:even")选取所有索引号为偶数的div元素
:odd选取所有索引号为奇数的元素,索引号从0开始集合元素$("div:odd")选取所有索引号为奇数的 div元素
:eq(index)选取索引号为index的元素单个元素$("div:eq(0)")选取索引号为0的div元素,也就是第一个div元素
:gt(index)选过索引号大于index的元素集合元素$("div:gt(2)")选取索引号大于2的div元素
:lt(index)选取索引号小于index的 元素集合元素$("div:lt(3)")选取索引号 小于3的 div元素
:header选取网页中所有的标题元素(h1,h2,h3,h4,h5,h6)集合元素$(":header")选取网页中所有 的标题元素
H1,h2...
:animated选取当前正在执行动画的元素集合元素$("div:animated")选取当前正在执行动画的 div


内容过滤器

  过滤器的规则主要体现在子元素和文本内容上.

选择器描述返回实例
:conntains("text")筛选文本中包含"text"的元素集合元素$("p:contains('你好')")选取文本包含“你好”的元素
:empty选取不包含子元素或文本的空元素集合元素$("div:empty")选取不包含子元素或文本的div元素
:has(selector)选取含有selector元素的元素集合元素$("div:has('p')")选取含有p元素的div元素
:parent选择含有子元素或文本的元素集合元素$("div:parent")选取含有子元素或文本的div元素


可见性过滤器

可见性过滤器根据元素可不可见的状态

选择器描述返回实例
:hidden选取所有不可见的元素集合元素$(":hidden")选取所有不可见的元素,包括display:none;type="hidden";visiblity:hidden
:visible选取所有可见元素集合元素$(":visible")选取所有可见元素


属性过滤器

属性过滤器通过元素的属性来获取属性的元素。

选择器描述返回实例
[attribute]选择拥有此属性的元素集合元素$("div[id]")选取拥有id属性的 div元素
[attribute=value]选择属性值为value的元素集合元素$("div[title='box']")选取title为box的 div元素
[attribute!=value]选择属性值不等于value的元素集合元素$("div[title!='box']")选取title不为box的 div元素,其中没有title属性的元素也会被选择
[attribut^=value]选择属性值以value开头的元素集合元素$("div[title^=''b"])选取title以b开头的 div元素
[attribut$=value]选择属性值以value结束的元素集合元素$("div[title$=''b"])选取title以b结尾的 div元素
[attribut*=value]选择属性值含有value的元素集合元素$("div[title*=''b"])选取title属性值含有b的 div元素
[selector1] [selector2] [selectorN]选择含有多个属性的选择器集合选择器$("div[id][]")选取含有id属性和class属性,并且的div元素


子元素过滤选择器

选择器描述返回实例
:nth-child(index/even/odd)注意:index从1开始选取每个父元素下的第index元素或奇偶元素集合元素 $("ul li:nth-child(3)")选择ul下的第三个li
:first-child选取父元素下的第一个子元素集合元素 $("ul li: first-child ")选择ul下的第一个li
:last-child选取父元素下的最后一个子元素集合元素 $("ul li:last-child ")选择ul下的最后一个li
:only-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配。如果父元素中含有其它元素,刚不会匹配集合元素 $("ul li:only-child ")在ul中选择是唯一元素的li元素
    


 表单对象属性过滤选择器

 通过对选择的表单进行过滤

选择器描述返回实例
:enabled选取所有可用元素集合元素$("#form1 :enabled")选取form1下所有可用的元素
:disabled选取所有不可用元素集合元素$("#form2:disabled")选取id为form2表单内的所有不可用的元素
:checked选中所有被选中的元素(单选,复选)集合元素$("#form3:checked")选中id为form3表单下所有被选中的元素
:selected选取所有被选中 的选项元素(下拉列表)集合元素$("select:selected")选取所有被选中的选项元素


表单选择器

选择器描述返回实例
:inpput选取所有的<input><textarea><select><button>元素集合元素$(":input")选取所有的<input><textarea><select><button>元素
:text选取所有的当行文本框集合元素$(":text")选取所有的单行文本框
:password选取所有的密码框集合元素$(":password")选取所有的密码框
:radio选取所有的单选框集合元素$(":radio")选取所有的单选框
:checkbox选取所有的多选框集合元素$(":checkbox")选取所有的多选框
:submit选取所有的提交按钮集合元素$(":submit")选取所有的提交按钮
:reset选取所有的重置按钮集合元素$(":reset")选取所有的重置按钮
:image选取所有的图像按钮集合元素$(":image")选取所有的图像按钮
:button选取所有的按钮集合元素$("button")选取所有的按钮
:file选取所有的上传域集合元素$(":file")选取所有的上传域
:hidden选取所有的不可见元素集合元素$(":hidden")选取所有不可见

 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5243

jQuery :eq() 选择器

:eq() 选择器选取带有指定 index 值的元素。 index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。经常与其他元素/选择器一起使用,来选择指定的组中特定序号的元素

css选择器中:first-child与:first-of-type

css选择器中:first-child与:first-of-type是比较容易混淆的概念,这里用案例介绍它们具体的区别。:first-child 选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。

你需要知道的CSS 属性选择器!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的

css怎么选择父元素下的某个元素?

css可以通过一些选择器来实现选择父元素下某个元素的效果。:first-child p:first-child(first第一个 child子元素)(找第一个子元素为p):last-child p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

CSS选择器:nth-child()和:nth-of-type()的使用

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。:nth-child()和:nth-of-type()的支持度,所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

css选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全