天天狠操狠狠射,蜜臀AV无码一区二区三区免费

綜合案例

這是一個綜合的案例，主要就是展示選擇器的使用，案例中的選擇器是相對比較復雜的，很多時候我們不需要寫這么復雜的選擇器，但是案例是為了展示整個選擇器的知識點的運用

右邊是一段文本，我們通過不同的選擇器給指定的文字賦予顏色

分析一段復雜的選擇器：

$("#menu_con div.tag dd > p:first-child")

這段組合的選擇器表達式用到了幾個之前學到的選擇器：ID、Class、元素、層級、子元素篩選器

當用到篩選器 :first-child的時候我們就知道了，這肯定是一組合集，意味著p元素是有多個，而且是分布在不同父元素dd里面的

圈圈中就是選擇器對應的選擇到的元素：

這個選擇器其實挺復雜的，現實的開發中，我們應該要避免出現這么冗余繁瑣的選擇器，可以最簡單的在a元素的父元素上加一個id，或者class直接定位即可。當然這樣的處理可能無形中可能要多出一個無意義的屬性了

PS：本節主要是對選擇器使用的練習，有其他需后期學到的知識提前出現，童鞋們可以酌情去研究和思考。

任務

分別在66、73、79、85、90行填寫對應的代碼使其效果如下圖：

?不會了怎么辦: $("#menu_con div.tag dd > p:first-child")

$("#menu_con > div:first dd:eq(0) > a:lt(4)")

$("#menu_con a[name='setColor']")

$("#menu div.tag dd a:nth-child(10)")

$(".tag:first a:contains('更多')")

index.html
imooc.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery標簽切換效果</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>  <div id="menu">  <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元素 ?.css('color','#9932CC'); </script> <script type="text/javascript"> //找到男裝下第一類衣服把a元素從順序1-4加上顏色 //可以通過基本篩選器lt,選擇匹配集合中所有索引值小于給定index參數的元素 //注意了index是從0開始計算，所以選在1-4,為對應的index就是4 ?.css('color','red'); </script> <script type="text/javascript"> //找到男裝所有a元素中屬性名name="setColor"的元素，并設置顏色 //這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素 ?.css('color','blue'); </script> <script type="text/javascript"> //不分男女，選中第一類衣服中第9個a元素，并改變顏色 //這里用了nth-child 選擇的他們所有父元素的第n個子元素 ?.css('color','#66CD00'); </script> <script type="text/javascript"> //找到女裝下第一類衣服，把a元素中包含文字"更多"的節點，改變顏色 ?.css('color','#C71585'); </script> </body> </html>

* { margin: 0; padding: 0; list-style: none; } body { font-size: 12px; } #menu { width: 360px; overflow: hidden; margin: 100px auto; border: 1px solid #BF9660; } #menu_con { width: 358px; height:160px; border-top: none } a{ margin: 5px; }

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-16 綜合案例

綜合案例

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

2-16 綜合案例

熱搜

最近搜索清空

綜合案例

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～