內容篩選選擇器 · 偽全棧技術匯總

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上內容過濾器描述如下表： ![](https://box.kancloud.cn/2016-03-20_56ee4c18bd62a.jpg) **注意事項：** :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。 :parent與:empty是相反的，兩者所涉及的子元素，包括文本節點 ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>內容篩選器</h2> <h3>:contains/:has</h3> <div class="left"> <div class="div"> <p>:contains</p> </div> <div class="div"> <p>:contains</p> </div> <div class="div"> <p> <span>:has</span> </p> </div> <div class="div"> <p>:contains</p> </div> </div> <script type="text/javascript"> //查找所有class='div'中DOM元素中包含"contains"的元素節點 //并且設置顏色 $('.div:contains(":contains")').css("color", "#CD00CD"); </script> <script type="text/javascript"> //查找所有class='div'中DOM元素中包含"span"的元素節點 //并且設置顏色 $(".div:has(span)").css("color", "blue"); </script> <h3>:parent/:empty</h3> <div class="left"> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a>:parent</a> </div> <div class="aaron"> <a></a> </div> </div> <script type="text/javascript"> //選擇所有a元素，找到對應的父元素 //增加一個藍色的邊框 $("a:parent").css("border", "3px groove blue"); </script> <script type="text/javascript"> //找到a元素下面的所有空節點(沒有子元素) //增加一段文本與邊框 $("a:empty").text(":empty").css("border", "3px groove red"); </script> </body> </html> ~~~