jquery选择器用法_jQuery属性选择器

2022-11-16 18:00:40 浏览数 (1)

jQuery的选择器

一、 基本选择器 1. ID选择器 ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。 使用公式:(“#id”) 示例:(“#box”) //获取id属性值为box的元素 2. 元素选择器 元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。 使用公式:(“element”) 示例:(“div”) //获取所有div元素 3.类名选择器 类选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配类的名称就可以被类选择器选取到。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。 使用公式:(“.class”) 示例:(“.box”) //获取class属性值为box的所有元素 4.复合选择器 复合选择器将多个选择器(可以是ID选择器、元素选择器或是类名选择器)组合在一起,两个选择器之间以逗号”,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。 注意:多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个匹配的元素合并后一起返回。 使用公式:(“selector1,selector2,……,selectorN”) selector1:一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等 selector2:另一个有效的选择器,可以是ID选择器、元素选择器或类名选择器等 selectorN:(可选择)任意多个选择器,可以是ID选择器、元素选择器或类名选择器等 示例:(“div,#btn”) //要查询文档中的全部的<div>元素和id属性为btn的元素 5.通配符选择器

二、层次选择器 1. ancestor descendant选择器 ancesdor descendant选择器中ancestor代表祖先,descendant代表子孙,用于在给定的祖先元素下匹配所有的后代元素 使用公式:(“ancestor descendant”) ancestor是指任何有效的选择器。 descendant是用以匹配元素的选择器,并且它是ancestor所指定元素后代元素 示例:(“ul li”) //匹配ul元素下的全部li元素 2. parent>child选择器 parent>child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素,使用该选择器只能选择父元素的直接子元素 使用公式:(” parent>child “) parent是指任何有效的选择器 child是用以匹配元素的选择器,并且它是parent元素的子元素 示例:(“prev next”) prev是指任何有效的选择器 next是一个有效选择器并紧接着prev选择器 示例:(“div img”) //匹配<div>标签后的<img>标记 4. prev~siblings选择器 prev~siblings选择器用于匹配prev元素之后的所有siblings元素,其中prev和siblings是个相同辈元素 使用公式:

三、过滤选择器 1.简单过滤器 简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器 :first 说明:匹配找到的第一个元素,它是与选择器结合使用的 示例:(“tr:first”) //匹配表格的第一行 :last 说明:匹配找到的最后一个元素,它是与选择器结合使用的 示例:(“tr:last”) //匹配表格最后一行 :even 说明:匹配所有索引值为偶数的元素,索引值从0开始计数 示例:(“tr:even”) //匹配索引值为偶数的行 :odd 说明:匹配所有索引值为奇数的元素,索引值从0开始计数 示例:(“tr:odd”) //匹配索引值为奇数的行 :eq(index) 说明:匹配一个给定索引值的元素 示例:(“div:eq(1)”) //匹配第二个div元素 :gt(index) 说明:匹配所有大于给定索引值的元素 示例:(“span:gt(0)”) //匹配索引大于0的span元素(注:大于0,而不包括0) :lt(index) 说明:匹配所有小于给定索引值的元素 示例:(“div:lt(2)”) //匹配索引小于2的div元素(注:小于2,而不包括2) :header 说明:匹配h1,h2,h3……之类的标题元素 示例:(“.cls:header”) //匹配全部类名为cls的标题元素,如果”:”前不写则匹配所有的标题元素 :not(selector) 说明:去除所有给定选择器匹配的元素 示例:(“input:not(:checked)”) //匹配没有被选中的input元素 animated 说明:匹配所有正在执行动画效果的元素 示例:(“div:animated”) //匹配正在执行的动画的div元素 2.内容过滤器 内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选 :contains(text) 说明:匹配包含给定文本的元素 示例:(“li:contains(‘word’)”) //匹配含有”word”文本内容的元素 :empty 说明:匹配所有不包含子元素或者文本的空元素 示例:(“td:empty”) //匹配不包含子元素或者文本的单元格 :has(selector) 说明:匹配含有选择器所匹配元素的元素 示例:(“td:has(p)”) //匹配表格的单元格中还有<p>标记的单元格 :parent 说明:匹配含有子元素或者文本的元素 示例:(“input:checked”) //匹配所有被选中的input元素 :disabled 说明:匹配所有不可用元素 示例:(“input:disenabled”) //匹配所有不可用input元素 :enabled 说明:匹配所有可用的元素 示例:(“input:enabled”) //匹配所有可用的input元素 :selected 说明:匹配所有选中的option元素 示例:(“select option:selected”) //匹配所有被选中的选项元素 5.子元素过滤器 子元素选择器就是筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定 :first-child 说明:匹配所有给定元素的第一个子元素 示例:(“ul li:first-child”) //匹配ul元素中的第一个子元素li :last-child 说明:匹配所有给定元素的最后一个子元素 示例:(“ul li:last-child”) //匹配ul元素中的最后一个子元素li :only-child 说明:如果某个元素是它父元素中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配 示例:(“ul li:only-child”) //匹配只含有一个li元素的ul元素中的li :nth-child(index/even/odd/equation) 说明:匹配可每个父元素下的第index个子或奇偶元素,index从1开始,而不是从0开始 示例:(“ul li :nth-child(even)”) //匹配ul中索引值为偶数的li元素

四、属性选择器 属性选择器就是通过元素的属性作为过滤条件进行筛选对象 [attribute] 说明:匹配包含给定属性的元素 示例:(“div[name]”) //匹配包含有name属性的div元素 [attribute=value] 说明:匹配属性值为value的元素 示例:(“div[name=’test’]”) //匹配name属性是test的div元素 [attribute!=value] 说明:匹配属性值不等于value的元素 示例:(“div[name!=’test’]”) //匹配name属性不是test的div元素 [attribute*=value] 说明:匹配属性值含有value的元素 示例:(“div[name*=”test”]”) //匹配name属性值中含有test值的div元素 [attribute^=value] 说明:匹配属性值以value开始的元素 示例:(“div[name^=’test’]”) //匹配name属性以test开头的div元素 [attribute=value] 说明:匹配属性值以value结束的元素 示例:(“div[name=’test’]”) //匹配name属性以test结尾的div元素 [selector1][selector2][selectorN] 说明:复合属性选择器,需要同时满足多个条件时使用 示例:

五、表单选择器 表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中 :input 说明:匹配所有的input元素 示例: (“:input”) //匹配所有的input元素 (“form :input”) //匹配<form>标记中的所有input元素,需要注意,在form和冒号之间有一个空格 :button 说明:匹配所有的普通按钮,即type=”button”的input元素 示例:(“.button”) //匹配所有普通按钮 :checkbox 说明:匹配所有的复选框 示例:(“:checkbox”) //匹配所有的复选框 :file 说明:匹配所有的文件域 示例:(“:file”) //匹配所有的文件域 :hidden 说明:匹配所有的不可见元素,或者type为hidden的元素 示例:(“:hidden”) //匹配所有的隐藏域 :image 说明:匹配所有的图像域 示例:(“:image”) //匹配所有的图像域 :password 说明:匹配所有的密码域 示例:(“:password”) //匹配所有的密码域 :radio 说明:匹配所有的单选按钮 示例:(“:radio”) //匹配所有的单选按钮 :reset 说明:匹配所有的重置按钮,即type=”reset”的input元素 示例:(“:reset”) //匹配所有的重置按钮 :submit 说明:匹配所有的提交按钮,即type=”submit”的input元素 示例:(“:submit”) //匹配所有的提交按钮 :text 说明:匹配所有的单行文本框 示例:(“.text”) //匹配所有的单行文本框

选择器中注意事项

1.选择器中含有特殊符号的注意事项 含有”.”、”#”、”{“、”}”等特殊字符:根据W3C规定,属性值中是不能包含这些特殊字符的,但在实际的项目中偶尔会遇到这种表达式中含有”#”和”}”等特殊字符的情况。这时,如果按照普通方法去处理的话就会出现错误,解决这类错误的方法是使用转义符号将其转义。

<div id=”li#db”>liaidb</div> <div id=”lidb(1)”>lilovedb</div> 如果按照普通方式来获取,例如: (“#li\#db”); (“#lilovedb\(1\)”);

2.属性选择器的@符号问题: 在jQuery升级版本过程中,jQuery在1.3.1版本中彻底放弃了1.1.0版本遗留的@符号,假如我们使用1.3.1以上的版本,那么不需要在属性前添加@符号

(“div[@name=”lidb”]”); 正确写法是将@符号去掉,即改为如下形式: (“div[name=”lidb”]”); 选择器中空格的注意事项 在实际应用当中,选择器中含有空格也是不容忽视的,多一个空格或则少一个空格也会得到截然不同的结果。

<div class=”name”> <div style=”display: none;”>小李</div> <div style=”display: none;”>小王</div> <div style=”display: none;”>小明</div> <div style=”display: none;” class=name>小张</div> </div> <div style=”display: none;” class=name>小玉</div> <div style=”display: none;” class=name>小刘</div> 使用如下的jQuery选择器分别获取它们 <script type=”text/javascript”> var b=(“.name:hidden”); console.log(a) console.log(b) </script> 以上代码会出现不同的结果,是因为后代选择器和过滤选择器的不同

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/230951.html原文链接:https://javaforall.cn

0 人点赞