ASP源码.NET源码PHP源码JSP源码JAVA源码DELPHI源码PB源码VC源码VB源码Android源码
当前位置:首页 >> 网页制作 >> Javascript教程 >> 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器(1/3)

来源:网络整理     时间:2016-08-26     关键词:

本篇文章主要介绍了" 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器",主要涉及到方面的内容,对于Javascript教程感兴趣的同学可以参考一下: ×目录[1]简单属性 [2]具体属性 [3]条件属性前面的话  属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器...

×

目录
[1]简单属性 [2]具体属性 [3]条件属性

前面的话

  属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于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、span3btn1.onclick =function(){$('[title]').css('color','red');}

//选择拥有title属性的所有span元素,结果是span0、span2、span3btn2.onclick =function(){$('span[title]').css('color','blue');}

//选择同时拥有title属性和id属性的所有span元素,结果是span3btn3.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')的效果

相关图片

相关文章