$(".aaron:lt(2)").css("color", "#f00");沒反應
<!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>:first/:last/:even/:odd</h3>
??? <div class="left">
??????? <div class="div">
??????????? <p>div:first</p>
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>:odd</p>
??????? </div>
??????? <div class="div">
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>:odd</p>
??????? </div>
??????? <div class="div">
??????????? <p>:even</p>
??????? </div>
??????? <div class="div">
??????????? <p>div:last</p>
??????????? <p>:odd</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??? //找到第一個div
??? $(".div:first").css("color", "blue");
??? </script>
?? ?
??? <script type="text/javascript">
??? //找到最后一個div
??? $(".div:last"").css("color", "#CD00CD");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:even 選擇所引值為偶數(shù)的元素，從 0 開始計數(shù)
??? $(".div:even").css("border", "3px groove red");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:odd 選擇所引值為奇數(shù)的元素，從 0 開始計數(shù)
??? $(".div:odd").css("border", "3px groove blue");
??? </script>
?? ?
?? ?
??? <h3>:eq/:gt/:lt</h3>
??? <div class="left">
??????? <div class="aaron">
??????????? <p>:lt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:lt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:eq(2)000</p>
??????? </div>
??????? <div class="aaron">
??????? </div>
??????? <div class="aaron">
??????????? <p>:gt(3)</p>
??????? </div>
??????? <div class="aaron">
??????????? <p>:gt(3)</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??? //:eq
??? //選擇單個
??? $(".aaron:eq(2)").css("border", "3px groove red");
??? </script>
?? ?
??? <script type="text/javascript">
??? //:gt 選擇匹配集合中所有索引值大于給定index參數(shù)的元素
??? $(".aaron:gt(3)").css("border", "3px groove red");
??? </script>
?? ?
???? <script type="text/javascipt">
??? //:lt 選擇匹配集合中所有索引值小于給定index參數(shù)的元素
??? //與:gt相反
?? $(".aaron:lt(2)").css("color", "#f00");
??? </script>
?? ?
??? <h3>:not</h3>
??? <div class="left">
??????? <div>
??????????? <input type="checkbox" name="a" />
??????????? <p>Aaron</p>
??????? </div>
??????? <div>
??????????? <input type="checkbox" name="b" />
??????????? <p>慕課</p>
??????? </div>
??????? <div>
??????????? <input type="checkbox" name="c" checked="checked" />
??????????? <p>其他</p>
??????? </div>
??? </div>
??? <script type="text/javascript">
??????? //:not 選擇所有元素去除不匹配給定的選擇器的元素
??????? //選中所有緊接著沒有checked屬性的input元素后的p元素，賦予顏色
??????? $("input:not(:checked)+p").css("background-color", "#f00");
??? </script>
</body>
</html>
2016-10-15
2016-10-18
現(xiàn)在才發(fā)現(xiàn)復制過來代碼錯了，重新發(fā)下
2016-10-18
<!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>
<!--代碼部分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.衛(wèi)衣</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參數(shù)的元素
??? //注意了index是從0開始計算，所以選在1-4,為對應的index就是4
?? $("#menu_con a:lt(4)").css('color','red');
</script>
<script type="text/javascript">
??? //找到男裝所有a元素中屬性名name="setColor"的元素，并設置顏色
??? //這里用的屬性選擇器[attribute='value']選擇指定屬性是給定值的元素
? $("#menu_con a[neme='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元素中包含文字"更多"的節(jié)點，改變顏色
$("#menu_female .tag a:contains('更多')").css('color','#C71585');
</script>
</body>
</html>