过滤选择器-属性

属性过滤选择器

选择器	描述	返回	示例
[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;}