示例 8 :
属性
$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素
注: 一般不要使用[class=className] 而应该使用.className
因为使用$("[class='className']") .toggleClass("anotherClassName")
会导致class变成className anotherClassName,再次 使用 [class=className] 就无法选中了
而.className没有这个问题。
<script src="https://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b1").click(function(){ $("div[id]").toggleClass("border"); }); $("#b2").click(function(){ $("div[id='pink']").toggleClass("border"); }); $("#b3").click(function(){ $("div[id!='pink']").toggleClass("border"); }); $("#b4").click(function(){ $("div[id^='p']").toggleClass("border"); }); $("#b5").click(function(){ $("div[id$='k']").toggleClass("border"); }); $("#b6").click(function(){ $("div[id*='ee']").toggleClass("border"); }); }); </script> <button id="b1">给有id属性的div切换边框</button> <button id="b2">给id=pink的div切换边框</button> <button id="b3">给有id!=pink属性的div切换边框</button> <button id="b4">给有id以p开头的div切换边框</button> <button id="b5">给有id以k结尾的div切换边框</button> <button id="b6">给有id包含ee的div切换边框</button> <br> <br> <style> .pink{ background-color:pink; } .green{ background-color:green; } .border{ border: 1px blue solid; } button{ margin-top:10px; display:block; } div{ margin:10px; } </style> <div id="pink"> id=pink的div </div> <div id="green"> id=green的div </div> <div > 没有id的div </div>