07-过滤选择器-属性
2017-08-31 本文已影响0人
轻思维
过滤选择器-属性
属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 | |
|---|---|---|---|---|
| [attribute] | 选择拥有此属性的元素 | 集合元素 | $(“div[id]”)选择拥有id属性的div元素 | |
| [attribute=value] | 选择属性值为value的元素 | 集合元素 | $("div[id=test]")选择id属性值为test的div元素 | |
| [attribute!=value] | 选择属性值不为value的元素 | 集合元素 | $("div[id!=test]")选择id属性值不为test的div元素,没有id属性的div也会被选择 | |
| [attribute^=value] | 选择属性值以value开始的元素 | 集合元素 | $(“div[id^=test]”)选择id属性值以test开始的所有div元素 | |
| [attribute$=value] | 选择属性以value值结束的元素 | 集合元素 | $(“div[id$=test]”)选择id属性值以test结束的所有div元素 | |
| [attribute*=value] | 选择属性中含有value的元素 | 集合元素 | $(“div[id*=test]”)选择id属性值中含有test的所有div元素 | |
| [A1][A2]…A[N] | 用属性选 | 择器合并成一个复合属性选择器。满足多个条件。 | 集合元素 | $(“div[id][title$=test]”)选择拥有id属性,并且title属性以test结束的所有div元素 |
案例根据不同的 a链接添加不同的图标背景
html
<h3>jquery 属性过虑资料下载</h3>
<ul>
<li><a href="./课件" target="_blank" > 课件</a></li>
<li><a href="精通JavaScript.pdf" target="_blank"> 参考书</a></li>
<li><a href="课件/第二章jQuery选择器.pptx" target="_blank">第二章jQuery选择器</a></li>
<li><a href="filter.txt" target="_blank" >选择器总结</a></li>
<li><a href="filter.html" target="_blank" >案例1</a></li>
<li><a href="taotest2.html" target="_blank">案例2</a></li>
</ul>
js
$(function(){
$("a[href$=html]").addClass("html");
$("a[href$=txt]").addClass("txt");
$("a[href^=./]").addClass("fl");
})
css
ul,li,a{
margin:0; padding:0;
list-style:none;
text-decoration:none;
color:#444;}
a:visited{color:#444;
}
a:hover{ color:#000;}
li{
height:30px;
line-height:30px;
border-bottom:1px dashed #444;
width:200px;
}
li a{
display:block;
height:30px;
line-height:30px;
padding-left:25px;
background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat;
}
.pdf{ background-position:0 -2px;}
.fl{ background-position:0 -255px;}
.pptx{ background-position:0 -440px;}
.txt{ background-position:0 -160px;}
.html{background-position:0 -347px;}
