上一章介绍了常用的表单元素过滤选择器,为我们选择目标元素又增添了一种工具,今天介绍属性过滤选择器,它也是很常用的,下面请看使用介绍。为了更好的学习,我们先列出一段HTML代码:
<body>
<div id="one" class="aaa">
id=one,class=aaa的div
<br />
<div class="mini">class=mini的div</div>
</div>
<div id="two" class="aaa" title="test">
id=two,class=aaa,title=test的div
<br />
<div class="mini" title="other">
class=mini,title=other的div
</div>
<div class="mini" title="test">
class=mini,title=test的div
</div>
</div>
<div class="bbb" title="other">
class=bbb,title=other的div
<div class="mini">class=mini的div</div>
<div class="mini">class=mini的div</div>
<div class="mini" title="west">class=mini,title=west的div</div>
</div>
<div>
<input type="hidden" />
包含input(type=hidden)的div
</div>
<div title="test est">
title=test est
</div>
</body>
一、[attribute]
选择器:[attribute]
描述:匹配包含给定属性的元素
返回值:元素集合
示例:
$("body div[title]").css("background", "#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802062730468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
二、[attribute=‘value’]
选择器:[attribute=‘value’]
描述:匹配给定的属性是某个特定值的元素
返回值:元素集合
示例:
$("body div[title='test']").css("background","#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802062834500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
三、[attribute!=‘value’]
选择器:[attribute!=‘value’]
描述:匹配所有不包含指定的属性或属性不等于特定值的元素
返回值:元素集合
示例:
$("body div[title!='test']").css("background","#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802063441116?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
四、[attribute^=‘value’]
选择器:[attribute^=‘value’]
描述:匹配给定的属性是以某些值开始的元素
返回值:元素集合
示例:
$("body div[titel^='te']").css("background","#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802063621265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
五、[attribute$=‘value’]
选择器:[attribute$=‘value’]
描述:匹配给定的属性是以某些值结尾的元素
返回值:元素集合
示例:
$("body div[title$='est']").css("background","#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802063832853?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
六、[attribute~=‘value’]
选择器:[attribute~=‘value’]
描述:匹配给定的属性是包含某些值的元素(value必须是用空格分隔的单词)
返回值:元素集合
示例:
$("body div[title~='est']").css("background","#ffbbaa");
上面这个例子只有
<div title="test est">
title=test est
</div>
能匹配上,est必须是title属性值中的一项。
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802064245651?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
七、[attribute*=‘value’]
选择器:[attribute*=‘value’]
描述:匹配给定的属性是包含某些值的元素
返回值:元素集合
示例:
$("body div[title*='est']").css("background","#ffbbaa");
上面这个例子
<div title="test est">
title=test est
</div>
<div class="mini" title="test">
class=mini,title=test的div
</div>
<div class="mini" title="west">
class=mini,title=west的div
</div>
......
都能匹配上,只有title的属性值包含est就行,无论est是属性值中单独的一项或者是属性值的一部分,都可以的。
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802064046472?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
八、[attribute1][attribute2]
选择器:[attribute]
描述:复合属性选择器,需要满足多个条件时使用(求交集)
返回值:元素集合
示例:
$("body div[id][title*='est']").css("background", "#ffbbaa");
运行截图如下:
![这里写图片描述](https://img-blog.csdn.net/20170802064943248?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3VuY2xl/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
九、其他示例
用js给元素添加属性
$(".c1").css("color","#f00");
$("p").css("background-color","yellow");
$("p").attr('class','yellowBackgroundColor');
给表格隔行变换背景颜色
$("#tab tr:odd").css("background-color","#fceded"); //基数行
$("#tab tr:even").css("background-color","#f79898"); //偶数行
五种获取元素的方法
//a元素中包含title属性
$("#div2 a[title]").css(“"text-decoration","none");
//a元素中href属性以http开头
$("#div2 a[href^=http]").css("color","#f00");
//a元素中href属性以html结尾
$("#div2 a[href$=html]").css("color","#f00");
//a元素中href属性值为www.baidu.com
$("#div2 a[href=’www.baidu.com’]").css("color","#f00");
//a元素中href属性包含http
$("#div2 a[href*=http]").css("color","#f00");