jquery-可見性和屬性過濾選擇器
阿新 • • 發佈：2018-12-26
可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。
在可見性選擇器中，需要注意選擇器：hidden，它不僅包括樣式屬性display為“none”的元素，也包括文字隱藏域（<input type="hidden"/>）和Visibility:hidden之類的元素。
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素。
程式碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>可見性和屬性濾選擇器</title> <script src="../libs/jquery.js"></script> <style type="text/css"> div,span,p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaaaaa; font-size: 12px; } div.hide{ display: none; } </style> </head> <body> <div class="one" id="one"> id is one,class also is one <div class="mini">class name is mini</div> </div> <div class="one" id="two" title="test"> id is two, class is one, title is test <div class="mini" title="other">class is mini,title is other</div> <div class="mini" title="test">class is mini, title is test</div> </div> <div class="one"> <div class="mini">class is mini</div> <div class="mini">class is mini</div> <div class="mini">class is mini</div> <div class="mini"></div> </div> <div class="one"> <div class="mini">class is mini</div> <div class="mini">class is mini</div> <div class="mini">class is mini</div> <div class="mini" title="test">class is mini, title is test</div> </div> <div style="display: none" class="none"> style的display為“none”的div </div> <div class="hide"> class is hide</div> <div> 包含input的type為“hidden”的div <input type="hidden" size="8"> </div> <span id="mover">正在執行動畫的sapn元素</span> <script> //可見性過濾選擇器 /*$("div:visible")//改變所有可見的div元素的背景色 .css("background","#339966");*/ /*$("div:hidden").show(3000);//顯示隱藏的div元素，3000為隱藏元素顯示出來的速度，3000是時間，單位是毫秒可任意設定*/ //屬性過濾選擇器 /*$("div[title]")//改變含有屬性title的div元素的背景色 .css("background","#660000");*/ /*$("div[title=test]")//改變屬性title值等於test的div元素的背景色 .css("background","#666699");*/ /*$("div[title!=test]")//改變屬性title值不等於test的div元素背景色 .css("background","#660099");*/ /*$("div[title^=te]")//改變屬性title值以te開始的div元素的背景色 .css("background","#669933");*/ /*$("div[title$=est]")//改變屬性title值以est結束的div元素的背景色 .css("background","#66FF33");*/ /*$("div[title*=es]")//改變屬性title值含有es的div元素的背景色 .css("background","#9900CC");*/ $("div[id][title*=es]")//改變含有屬性id，並且屬性title值含有es的div元素的背景色 .css("background","#996600") </script> </body> </html>