深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
前面的话
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器。属性过滤选择器可分为简单属性选择器、具体属性选择器和条件属性选择器三种。本文将详细该部分内容
简单属性选择器
[attribute]
[attribute]选择器选择拥有该属性的元素,返回集合元素
//选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //选择同时拥有title属性和id属性的所有span元素 $('span[id][title]')
<button id="btn1" style="color: red;">$('[title]')</button> <button id="btn2" style="color: blue;">$('span[title]')</button> <button id="btn3" style="color: green;">$('span[id][title]')</button> <button id="reset">还原</button> <div><span title="span0">span0</span><span>span1</span><span title="span2">span2</span><i title="i0">i0</i><span id="span3" title="span3">span3</span><i>i1</i> </div> <script> reset.onclick = function(){history.go();} //选择拥有title属性的所有元素,结果是span0、span2、i0、span3 btn1.onclick = function(){$('[title]').css('color','red');}//选择拥有title属性的所有span元素,结果是span0、span2、span3 btn2.onclick = function(){$('span[title]').css('color','blue');}//选择同时拥有title属性和id属性的所有span元素,结果是span3 btn3.onclick = function(){$('span[id][title]').css('color','green');} </script>
对应于CSS的简单属性选择器
[title]{color:red;}span[title]{color:blue;}span[id][title]{color:green;}
如果使用javascript实现类似$('span[id][title]').css('color','green')的效果
var spans = document.getElementsByTagName('span'); for(var i = 0; i < spans.length; i++){if((spans[i].id != '') && (spans[i].title != '')){spans[i].style.color = 'green';} }
具体属性选择器
[attribute=value]
[attribute=value]选择器选择属性值为value的元素,返回集合元素
//选择class值为test的元素 $('[class="test"]') //选择class值为test的span元素 $('span[class="test"]') //选择class值为test span的span元素 $('span[class="test span"]') //选择class值为span test的span元素 $('span[class="span test"]')
严格匹配
[注意]具体属性选择器的匹配属于严格匹配
【1】$('[class="test"]')匹配class属性只有test值的情况;而class="test test1"将不会被匹配
【2】[class="a1 a2"]和[class="a2 a1"]并不相同,它们分别只严格匹配class="a1 a2"和class="a2 a1"的元素
<button id="btn1" style="color: red;">$('[class="test"]')</button> <button id="btn2" style="color: blue;">$('span[class="test"]')</button> <button id="btn3" style="color: green;">$('span[class="test span"]')</button> <button id="btn4" style="color: pink;" >$('span[class="span test"]')</button> <button id="reset">还原</button> <div><span class="test">span0</span><span>span1</span><span class="span test">span2</span><i class="test">i0</i><span class="test span">span3</span><i>i1</i> </div> <script> reset.onclick = function(){history.go();} //选择class属性只是'test'的所有元素,结果是span0、i0 btn1.onclick = function(){$('[class="test"]').css('color','red');}//选择class属性只是'test'的所有span元素,结果是span0 btn2.onclick = function(){$('span[class="test"]').css('color','blue');}//选择class属性是'test span'的所有span元素,结果是span3 btn3.onclick = function(){$('span[class="test span"]').css('color','green');}//选择class属性是'span test'的所有span元素,结果是span2 btn4.onclick = function(){$('span[class="span test"]').css('color','pink');} </script>
对应于CSS选择器的具体属性选择器
[class="test"]{color:red;}span[class="test"]{color:blue;}span[class="test span"]{color:green;}span[class="span test"]{color:pink;}
如果使用javascript实现类似$('span[class="span test"]').css('color','pink')的功能
var spans = document.getElementsByTagName('span'); for(var i = 0; i < spans.length; i++){if(spans[i].className == 'span test'){spans[i].style.color = 'pink';} }
id选择器
在CSS选择器,id选择器和id属性选择器并不相同,因为它们的优先级不同。而jQuery选择器,并没有优先级的概念,如果两个选择器对相同id属性同时设置,则后面覆盖前面
<button id="btn1">$('#test')在后</button> <button id="btn2">$('[id="test"]')在后</button> <button id="reset">还原</button> <div id="test" style="height:20px;">测试内容</div> <script> reset.onclick = function(){history.go();} btn1.onclick = function(){$('[id="test"]').css('color','blue'); $('#test').css('color','red'); } btn2.onclick = function(){$('#test').css('color','red');$('[id="test"]').css('color','blue'); } </script>
条件属性选择器
条件属性选择器共包括6种,其中[attribute!=value]选择器是jQuery自己拓展的选择器
[attribute!=value]
[attribute!=value]选择器选择属性值不等于value的元素,返回集合元素
[注意]class="test test1"的元素也符合$('[class!="test"]')的情况,因为属性选择器的严格匹配机制
[attribute^=value]
[attribute^=value]选择器选择属性值以value开始的元素,返回集合元素
[attribute$=value]
[attribute$=value]选择器选择属性值以value结束的元素,返回集合元素
[attribute*=value]
[attribute*=value]选择器选择属性值包含value的元素,返回集合元素
[attribute|=value]
[attribute|=value]选择器选择属性值等于value或以value-开头的元素,返回集合元素
[attribute~=value]
[attribute~=value]选择器选择属性值用空格分隔的值中包含value的元素,返回集合元素
[注意]$('[class~="test"]')选择器包含class="test"的元素的情况
<button id="btn1" style="color: red;">!=</button> <button id="btn2" style="color: blue;">^=</button> <button id="btn3" style="color: green;">$=</button> <button id="btn4" style="color: pink;" >*=</button> <button id="btn5" style="color: gray;" >|=</button> <button id="btn6" style="color: orange;" >~=</button> <button id="reset">还原</button> <div><span>1</span><span class="test">2</span><span class="test1">3</span><span class="is-test">4</span><span class="test test1">5</span><span class="test-1">6</span> </div> <script> reset.onclick = function(){history.go();}//选择class属性不是'test'的所有元素,结果是1、3、4、5、6 btn1.onclick = function(){$('div [class!="test"]').css('color','red');}//选择class属性以'test'开始的所有元素,结果是2、3、5、6 btn2.onclick = function(){$('div [class^="test"]').css('color','blue');}//选择class属性以'test'结束的所有元素,结果是2、4 btn3.onclick = function(){$('div [class$="test"]').css('color','green');}//选择class属性包含'test'的所有元素,结果是2、3、4、5、6 btn4.onclick = function(){$('div [class*="test"]').css('color','pink');}//选择class属性等于'test'或以'test-'开头的所有元素,结果是2、6 btn5.onclick = function(){$('div [class|="test"]').css('color','gray');}//选择class属性在用空格分隔的值包含'test'的所有元素,结果是2、5 btn6.onclick = function(){$('div [class~="test"]').css('color','orange');} </script>
对应于CSS选择器中的部分属性选择器
[注意]由于[attribute!=value]是jQuery自己拓展的,所以并没有对应的CSS选择器
[class^="test"]{color:blue;}[class$="test"]{color:green;}[class*="test"]{color:pink;}[class!="test"]{color:gray;}[class~="test"]{color:orange;}
如果使用javascript实现类似$('span[class~="test"]').css('color','orange')的功能
var spans = document.getElementsByTagName('span'); for(var i = 0; i < spans.length; i++){if(/^test\s|\stest\s|\stest$|^test$/.test(spans[i].className)){spans[i].style.color = 'orange';} }
最后
属性选择器的功能十分强大,特别是条件属性选择器,基本覆盖属性值的各种情况。但在实际中,使用属性选择器却寥寥,可能是因为使用javascript或jQuery多用于改变元素属性值,所以使用属性值作为选择标准并不稳定
欢迎交流
转载于:https://www.cnblogs.com/xiaohuochai/p/5809206.html
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器相关推荐
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分--状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div> <button>b ...
- 深入学习 jQuery 选择器系列第三篇——过滤选择器之索引选择器 - 小火柴的蓝色理想 - 博客园...
博客地址: http://www.cnblogs.com/xiaohuochai/p/5807292.html#3559878 写的很细致的博文, 手动收藏+转发. 转载于:https://www ...
- jquery选择器之属性选择器
[attribute] 匹配指定属性名的所有元素 [attribute=value] 匹配给定的属性名是某个特定值的属性 [attribute!=value] 匹配给定的属性名不是某个特定值的属性 ...
- CSS基础(四)-- CSS选择器之标签选择器
随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML. #------------------------------------------------我是可耻的分割线----------- ...
- HTML基础选择器之属性选择器的基本介绍
- 基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- 【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器(基本筛选器)
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些 基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
- 离线强化学习(Offline RL)系列3: (算法篇)策略约束 - BRAC算法原理详解与实现(经验篇)
论文原文:[Yifan Wu, George Tucker, Ofir Nachum: "Behavior Regularized Offline Reinforcement Learnin ...
- UR机器人装箱姿态_UR10 RG2机械臂手臂+RealsenseZR300 机器人手眼标定 系列第四篇
UR10 RG2机械臂手臂+RealsenseZR300 机器人手眼标定 系列第四篇 发布时间:2018-09-18 17:43, 浏览次数:1180 , 标签: UR RG RealsenseZR ...
最新文章
- 大数据处理过程中,如何让Hadoop运行得更快一些?
- python 将PascalVOC(XML)格式的标注数据批量转换为YOLO(txt)格式的标注数据
- C语言再学习 -- 详解C++/C 面试题 2
- 运算符之:5、位运算符(7个)
- 百度语音识别rest html,delphi调用百度语音识别REST API(示例代码)
- java用i/o查看文件_Java文件I / O基础
- Linux 实操———CentOS 6 安装配置 Oracle JDK 1.8
- python从文件夹中提取指定文件_使用Python实现从各个子文件夹中复制指定文件的方法...
- dataframe groupby_详解pandas中的map、apply、applymap、groupby、agg.
- 搜狗Q1每天进账1886万,输入法日处理6亿请求成中国最大语音App
- bvp解算器是什么_几种飞控的姿态解算算法
- 单片机跑马灯程序c语言,用单片机编写几种跑马灯程序
- 谷歌账号无法与服务器建立连接服务器,谷歌市场无法与服务器建立可靠的数据连接怎么解决...
- windows11截屏快捷键失效
- table总结insertRow、deleteRow 学习
- 国内期货期权保证金计算方式
- CodeForces 964A Splits
- 油田生产数据选取22.4.1 观察实验
- 职业发展,选择大都市还是回老家?
- 为什么我们的代码难以维护(草稿)