jQuery选择器
- >
- 话题 >
选择器是jQuery的基本,在jQuery中,对事宜处置,遍历DOM和Ajax操作都依赖于选择器。不仅能简化代码，而且可以到达事半功倍的效果
jQuery的优点:
1.简练的语法
2.完善的事宜处置机制
css选择器...
选择器是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.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入
2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入
3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入
链接: http://www.fly63.com/article/detial/5243
- 发表于 2021-04-05 13:23
- 阅读 ( 224 )
- 分类：互联网
0 条评论
请先 登录 后评论
