jQuery中選擇器綜合使用案例
阿新 • • 發佈：2018-11-10
以下為jQuery中選擇器綜合使用案例：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery-3.3.1.js"></script> <title>無標題文件</title> </head> <body> <!--程式碼部分begin--> <div id="menu"> <!--tag標題--> <div id="menu_female"> <h3>女裝</h3> <div class="tag" style="display: block;"> <dl> <dd> <p>第一類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.雪紡衫</a> <a>4.針織衫</a> <a>5.短外套</a> <a>6.衛衣</a> <a>7.小西褲</a> <a>8.風衣</a> <a>9.吊帶背心</a> <a>10.連衣裙</a> <a name="setColor">11.蕾絲連衣裙</a> <a>12.復古連衣裙</a> <a>13.印花連衣裙</a> <a>14.真絲連衣裙</a> <a>更多</a> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二類</p> <a>1.揹帶褲</a> <a>2.哈倫褲</a> <a>3.牛仔褲</a> <a>4.休閒褲</a> <a>5.小腳褲</a> <a>6.西裝褲</a> <a>7.打底褲</a> <a>8.闊腳褲</a> <a>9.短褲</a> <a>10.馬甲/背心</a> <a>11.羽絨服</a> <a>12.棉服</a> <a>13.夾克</a> <a>14.POLO衫</a> <a>更多</a> </dd> </dl> </div>> </div> <div id="menu_con"> <h3>男裝</h3> <div class="tag" style="display:block"> <dl> <dd> <p>第一類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.牛仔褲</a> <a>4.休閒褲</a> <a>5.短褲</a> <a>6.針織衫</a> <a>7.西服</a> <a>8.西褲</a> <a>9.嘻哈褲</a> <a>10.西服套裝</a> <a>11.馬甲/背心</a> <a name="setColor">12.羽絨服</a> <a>13.棉服</a> <a>14.夾克</a> <p>更多</p> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二類</p> <a>1.襯衫</a> <a>2.T恤</a> <a>3.牛仔褲</a> <a name='setColor'>4.休閒褲</a> <a>5.短褲</a> <a>6.針織衫</a> <a>7.西服</a> <a>8.西褲</a> <a>9.嘻哈褲</a> <a>10.西服套裝</a> <a>11.馬甲/背心</a> <a>12.羽絨服</a> <a>13.棉服</a> <a>14.夾克</a> <p>更多</p> </dd> </dl> </div>> </div> </div> <script type="text/javascript"> //找到男裝下第一類衣服中的第一個p元素，並改變顏色 //可以通過子類選擇器 p:first-child 篩選出第一個p元素 $('#menu_con div.tag dd>p:first-child').css('color','#9932CC'); </script> <script type="text/javascript"> //找到男裝下第一類衣服把a元素從順序1-4加上顏色 //可以通過基本篩選器lt,選擇匹配集合中所有索引值小於給定index引數的元素 //注意了index是從0開始計算，所以選在1-4,為對應的index就是4 $('#menu_con>div:first dd:eq(0)>a:lt(4)').css('color','red'); </script> <script type="text/javascript"> //找到男裝所有a元素中屬性名name="setColor"的元素，並設定顏色 //這裡用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素 $('#menu_con a[name="setColor"]').css('color','blue'); </script> <script type="text/javascript"> //不分男女，選中第一類衣服中第9個a元素，並改變顏色 //這裡用了nth-child 選擇的他們所有父元素的第n個子元素 $('.tag a:nth-child(9)').css('color','#66CD00'); </script> <script type="text/javascript"> //找到女裝下第一類衣服，把a元素中包含文字"更多"的節點，改變顏色 $('#menu_female div.tag:first a:contains("更多")').css('color','#C71585'); </script> </body> </html>
執行結果為：
