1)[attribute]:匹配包含给定属性的元素
eg:$("#btn").click(function(){
//点击按钮后将含有id属性的div背景变为绿色
$("div[id]").css("background","color");
});
<body>
<input type="button" value="将含有id属性的div背景变为绿色" id="btn">
<div id="one"></div>-----------绿色
<div></div>
<div id="three"></div>---------绿色
</body>
2)[attribute=value]:匹配给定的属性是某个特定值的元素
eg:$("#btn").click(function(){
//点击按钮后将id=one的div背景变为绿色
$("div[id=one]").css("background","color");
});
<body>
<input type="button" value="将id=one属性的div背景变为绿色" id="btn">
<div id="one"></div>---------绿色
<div></div>
<div id="three"></div>
</body>
3)[attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素。
eg:$("#btn").click(function(){
//点击按钮后将id!=one的div背景变为绿色
$("div[id!=one]").css("background","color");
});
<body>
<input type="button" value="将id!=one属性的div背景变为绿色" id="btn">
<div id="one"></div>
<div></div>--------------绿色
<div id="three"></div>--------------绿色
</body>
4)[attribute^=value]:匹配给定的属性是以某些值开始的元素
eg:$("#btn").click(function(){
//点击按钮后将id以a开头的div背景变为绿色
$("div[id^=a]").css("background","color");
});
<body>
<input type="button" value="将id以a开头的div背景变为绿色" id="btn">
<div id="one"></div>
<div id="abcd"></div>---------------绿色
<div id="three"></div>
</body>
5)[attribute$=value]:匹配给定的属性是以某些值结尾的元素
eg:$("#btn").click(function(){
//点击按钮后将id以d结束的div背景变为绿色
$("div[id$=d]").css("background","color");
});
<body>
<input type="button" value="将id以d结束的div背景变为绿色" id="btn">
<div id="one"></div>
<div id="abcd"></div>-------------绿色
<div id="three"></div>
</body>
6)[attribute*=value]:匹配给定的属性是以包含某些值的元素
eg:$("#btn").click(function(){
//点击按钮后将id包含b的div背景变为绿色
$("div[id*=b]").css("background","color");
});
<body>
<input type="button" value="将id包含b的div背景变为绿色" id="btn">
<div id="one"></div>
<div id="abcd"></div>---------------绿色
<div id="three"></div>
</body>
7)[selector1][selector2][selectorN]:复合属性选择器,需要同时满足多个条件时使用
eg:$("#btn").click(function(){
//点击按钮后将有class属性且id含有f的div背景颜色变为绿色
$("div[class][id*=f]").css("background","color");
});
<body>
<input type="button" value="将含有id属性的div背景变为绿色" id="btn">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four" class="abcd">--------------------------绿色
</body>