1. 程式人生 > 實用技巧 >JQuery 04 選擇器2

JQuery 04 選擇器2

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