示例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

<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>