jQuery选择器
知识点：
1.回顾上节课内容
jQuery基本选择器----包括ID选择器，标签选择器，类选择器，通配选择器和组选择器5种
a. ID选择器： $("#id")
b. 标签选择器：$("element")
c. 类选择器：$(".className")
d. 通配选择器：$("*") 匹配指定上下文中所有元素
e. 组选择器：$("selector1,selector2,selectorN") 特点：无数量限制，以逗号分隔 (逐个匹配，结果全部返回)
案例：
<div>
<h4>论语</h4>
<div>子在川上曰：</div>
<p>“逝者如斯夫！</p>
<p>不舍昼夜。”</p>
</div>
======================================================================================================================
2.层级选择器:通过DOM的嵌套关系匹配元素
jQuery层级选择器----包含选择器、子选择器、相邻选择器、兄弟选择器4种
a.包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。 (不受层级限制)
b.子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
c.相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
d.兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。
案例：
<BODY>
<!--包含选择器/子选择器/兄弟选择器/相邻选择器-->
<div class="main">
<span>1<img src="images/1.jpg"/></span>
2<img src="images/1.jpg"/>
</div>
3<img src="images/1.jpg">
4<img src="images/1.jpg">
<div>
5<img src="images/1.jpg">
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//$(".main img").css("border","5px solid red");
//$(".main > img").css("border","5px solid blue");
//$(".main + img").css("border","5px solid blue");
$(".main ~ img").css("border","5px solid blue");
});
</script>
</BODY>
综合应用：
<body>
<h1>沁园春·雪</h1>
<h2>123</h2>
<div>
<span><div>北国风光，千里冰封，万里雪飘。
<div>望长城内外，惟余莽莽；大河上下，顿失滔滔。</div>
<p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
<p>须晴日，看红装素裹，分外妖娆。</p>
</div></span>
<p id="mp">江山如此多娇，引无数英雄竞折腰。</p>
</div>
<p class="c1">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<p class="c1">一代天骄，成吉思汗，只识弯弓射大雕。</p>
<p>俱往矣，数风流人物，还看今朝。</p>
</body>
1. 让id为mp的元素文字大小变成30px
2. 让class名为.c1的元素背景为#CCFF99
3. 将所有的div和p，统一显示间距
4. 将所有的div增加 2像素 实线 红色
5. 将div下的所有子div中文字变蓝色blue
6. 将div中包含的div颜色变成#FF99FF
7. 将div的所有兄弟标签p的字体颜色变成蓝色
8. 将紧跟着div的p标签的边框设为2像素 实线 #009900
3.常用伪类选择器:可以看作是一种特殊的类选择符
选择器 说明
:first 匹配找到的第1个元素
:last 匹配找到的最后一个元素
:eq 匹配一个给定索引值的元素
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not 去除所有与给定选择器匹配的元素
1)特定位置选择器
:first/:last/:eq(index)
例：
<table>
<tr><th>特定位置选择器</th><th>描述</th></tr>
<tr><td>:first</td><td>匹配找到的第一个元素</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素</td></tr>
</table>
2)指定范围选择器
:even/:odd/:gt(index)/:lt(index)
例：
<table>
<tr><th>指定范围选择器</th><th>描述</th></tr>
<tr><td>:first</td><td>匹配找到的第一个元素</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素</td></tr>
<tr><td>:even</td><td>匹配所有索引值为偶数的元素</td></tr>
<tr><td>:odd</td><td>匹配所有索引值为奇数的元素</td></tr>
<tr><td>:gt(index)</td><td>匹配所有索引大于给定索引值的元素</td></tr>
<tr><td>:lt(index)</td><td>匹配所有索引小于给定索引值的元素</td></tr>
</table>
3)排除选择器
:not 非
例：
<table>
<tr><th>排除选择器</th><th>描述</th></tr>
<tr><td>:not</td><td>排除符合特定匹配规则的元素</td></tr>
</table>
论语：
曾子曰：“吾日三省吾身：为人谋而不忠乎？与朋友交而不信乎？传不习乎？”；
【译】：曾子说：“我每天多次自我反省：替别人谋划事情是否尽心竭力呢？与朋友交往是否诚实相待呢？老师传授的学业是否认真复习了？”；
作业：
综合应用：
<body>
<h1>沁园春·雪</h1>
<h2>123</h2>
<div>
<span><div>北国风光，千里冰封，万里雪飘。
<div>望长城内外，惟余莽莽；大河上下，顿失滔滔。</div>
<p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
<p>须晴日，看红装素裹，分外妖娆。</p>
</div></span>
<p id="mp">江山如此多娇，引无数英雄竞折腰。</p>
</div>
<p class="c1">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
<p class="c1">一代天骄，成吉思汗，只识弯弓射大雕。</p>
<p>俱往矣，数风流人物，还看今朝。</p>
</body>
1. 让id为mp的元素文字大小变成30px
2. 让class名为.c1的元素背景为#CCFF99
3. 将所有的div和p，统一显示间距
4. 将所有的div增加 2像素 实线 红色
5. 将div下的所有子div中文字变蓝色blue
6. 将div中包含的div颜色变成#FF99FF
7. 将div的所有兄弟标签p的字体颜色变成蓝色
8. 将紧跟着div的p标签的边框设为2像素 实线 #009900
课后预习：
1.选择器优化
2.过滤器