綜合案例
這是一個(gè)綜合的案例，主要就是展示選擇器的使用，案例中的選擇器是相對比較復(fù)雜的，很多時(shí)候我們不需要寫這么復(fù)雜的選擇器，但是案例是為了展示整個(gè)選擇器的知識點(diǎn)的運(yùn)用
右邊是一段文本，我們通過不同的選擇器給指定的文字賦予顏色
分析一段復(fù)雜的選擇器：
$("#menu_con div.tag dd > p:first-child")
這段組合的選擇器表達(dá)式用到了幾個(gè)之前學(xué)到的選擇器：ID、Class、元素、層級、子元素篩選器
當(dāng)用到篩選器 :first-child的時(shí)候我們就知道了，這肯定是一組合集，意味著p元素是有多個(gè)，而且是分布在不同父元素dd里面的
圈圈中就是選擇器對應(yīng)的選擇到的元素：
這個(gè)選擇器其實(shí)挺復(fù)雜的，現(xiàn)實(shí)的開發(fā)中，我們應(yīng)該要避免出現(xiàn)這么冗余繁瑣的選擇器，可以最簡單的在a元素的父元素上加一個(gè)id，或者class直接定位即可。當(dāng)然這樣的處理可能無形中可能要多出一個(gè)無意義的屬性了
PS：本節(jié)主要是對選擇器使用的練習(xí)，有其他需后期學(xué)到的知識提前出現(xiàn)，童鞋們可以酌情去研究和思考。
任務(wù)
分別在66、73、79、85、90行填寫對應(yīng)的代碼使其效果如下圖：
- ?不會了怎么辦
-
$("#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('更多')")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery標(biāo)簽切換效果</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>
<!--代碼部分begin-->
<div id="menu">
<!--tag標(biāo)題-->
<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.衛(wèi)衣</a>
<a>7.小西褲</a>
<a>8.風(fēng)衣</a>
<a>9.吊帶背心</a>
<a>10.連衣裙</a>
<a name="setColor">11.蕾絲連衣裙</a>
<a>12.復(fù)古連衣裙</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">
//找到男裝下第一類衣服中的第一個(gè)p元素，并改變顏色
//可以通過子類選擇器 p:first-child 篩選出第一個(gè)p元素
?.css('color','#9932CC');
</script>
<script type="text/javascript">
//找到男裝下第一類衣服把a(bǔ)元素從順序1-4加上顏色
//可以通過基本篩選器lt,選擇匹配集合中所有索引值小于給定index參數(shù)的元素
//注意了index是從0開始計(jì)算，所以選在1-4,為對應(yīng)的index就是4
?.css('color','red');
</script>
<script type="text/javascript">
//找到男裝所有a元素中屬性名name="setColor"的元素，并設(shè)置顏色
//這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素
?.css('color','blue');
</script>
<script type="text/javascript">
//不分男女，選中第一類衣服中第9個(gè)a元素，并改變顏色
//這里用了nth-child 選擇的他們所有父元素的第n個(gè)子元素
?.css('color','#66CD00');
</script>
<script type="text/javascript">
//找到女裝下第一類衣服，把a(bǔ)元素中包含文字"更多"的節(jié)點(diǎn)，改變顏色
?.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;
}
請驗(yàn)證，完成請求
由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求
