2.1 JQuery选择器是什么
1.css选择器
| 选择器 | 语法 | 描述 | 示例 |
| 标签选择器 | E{ css规则 } | 以文档元素作为选择符 | td{ font-size:14px; width:120px; } a{ text-decoration:none; } |
| ID选择器 | #ID{ CSS规则 } | 以文档元素的惟一标识符ID作为选择符 | #note{ font-size:14px; width:129px; } |
| 类选择器 | E.classname{ css规则 } | 以文档元素的class作为选择符 | div.note{ font-size:14px; } .dream{ font-size:14px; } |
| 群组选择器 | E1,E2,E3{ css规则 } | 多个选择符应用同样的样式 | td,p,div.a{ font-size:14px; } |
| 后代选择器 | E F{ CSS规则 } | 元素E的任意后代元素F | #inks a{ color:red; } |
| 通配选择符 | *｛ css规则 ｝ | 以文档的所有元素作为选择符 | *( font-size:14px; } |
例如要使所有class为demo的<p>元素里的字体加粗，可以直接在<style>里编写，而不需要去网页里寻找所有clss为DEMO的<p>元素逐个添加样式。代码如下：
<style>
.demo{
color:red;
font-size:30px;
font-weight:bold; //字体加粗
}
</style>
<p class="demo"> css demo.</p>
2.JQuery选择器
jQuery中的选择器完全不继承了css的风格，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，选择器是学习JQuery的基础，jQery的行为规则都是在获取到元素后才能生效。
<script type="text/javascript">
function demo(){
alert("javascript demo.");
}
</script>
<p onclick="demo();">点击我.</p>
像上面这样把javascript代码和html代码混杂在一下很不妥，因为它没有将网页和行为分离，建议使用下面的方法,
<p class="demo">jquery demo</p>
<script type="text/javascript">
$(".demo").click(function(){
alert("jquery demo!");
})
</script>
可以对css的写法和jquery的写法进行比较
css获取至元素的代码如下
.demo{
… //给class为demo的元素添加样式
}
jQuery获取到元素的代码如下:
$(“.demo”{ //给class为demo的元素添加行为
…..
}
2.2 jQuery选择器的优势
1.简洁的写法
2.支持css1到css3选择器
3.完善的处理机制
2.3 jQuery选择器
先看几组用传统的javascript方法获取页面元素，然后给元素添加行事件的例子。
例1 ：给网页中的所有<p>元素添加onclick事件
html代码如下：
<p>测试1</p>
<p>测试2</p>
要做的工作有以下几项。
1.获取所有<p>元素。
2.对<p>元素进行循环（因为获取的是数组对象)
3.给每个<p>元素添加行为事件
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
var items = document.getElementsByTagName("p");//获取页面中的所有p元素
for(var i=0;i < items.length;i++){ //循环
items[i].onclick = function(){ //给每一个p添加onclick事件
//doing something...
alert("suc!");
}
}
}
</script>
</head>
<body>
<p>测试1</p>
<p>测试2</p>
</body>
</html>
例2：使一个特定的表格隔行变色。
要作的工作有几项：
1.根据表格id获取表格
2.在表格内获取<tbody>元素
3.在<tbody>元素下获取<tr>元素
4.循环输出获取的<tr>元素
5.对<tr>元素的索引值除以2并取模，然后根据奇偶设置不同的背景色。
<script type="text/javascript">
window.onload = function(){ //页面所有元素加载完毕
var item = document.getElementById("tb"); //获取id为tb的元素(table)
var tbody = item.getElementsByTagName("tbody")[0]; //获取表格的第一个tbody元素
var trs = tbody.getElementsByTagName("tr"); //获取tbody元素下的所有tr元素
for(var i=0;i < trs.length;i++){//循环tr元素
if(i%2==0){ //取模. (取余数.比如 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
trs[i].style.backgroundColor = "#888"; // 改变 符合条件的tr元素 的背景色.
}
}
}
</script>
</head>
<body>
<table id="tb">
<tbody>
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行</td><td>第四行</td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</tbody>
</table>
</body>
</html>
上面是传统的javascript方法乾地操作，中间使用了getelemetnbyid()、getelementsbytagname()和getelementsbyname()等方法，然后动态地给元素添加行为或样式。还不断重复使用getelementbyid和
getelementsbytagname()等冗长难记的名称，开发人员开始厌倦这种写未能。然而JQuery中，类似的这些操作则是非常简洁.
下面学习如何使用jquery获取这些元素。
jquery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
2.3.1 基本选择器
基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class、标签名来查找DOM元素。
在网页中，每个id名称只能使用一次，class允许重复使用。
| 选择器 | 描 述 | 返 回 | 示 例 |
| #id | 根据给定的ID匹配一个元素 | 单个元素 | $(“#test”)选择id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(“.test”)选取所有class为test的元素 |
| element | 要据给定的元素名匹配元素 | 集合元素 | $（”p”）选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)选取所有元素 |
| selector1, selector2,
…,selectorN |
将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $(“idv,span,p,myclass“）选取所有<div>,<span>和拥有class为myclass的<p>标签的一组元素 |
选择器的示例：
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../scripts/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
//选择 id为 one 的元素
$('#btn1').click(function(){
$('#one').css("background","#bfa");
});
//选择 class 为 mini 的所有元素
$('#btn2').click(function(){
$('.mini').css("background","#bfa");
});
//选择 元素名是 div 的所有元素
$('#btn3').click(function(){
$('div').css("background","#bfa");
});
//选择 所有的元素
$('#btn4').click(function(){
$('*').css("background","#bfa");
});
//选择 所有的span元素和id为two的div元素
$('#btn5').click(function(){
$('span,#two').css("background","#bfa");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1"/>
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
<input type="button" value="选择 所有的元素." id="btn4"/>
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
2.3.2 层次选择器
如果想通DOM元素之间的层资来获取特定元素，例如后代元素、子元素，
相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
| 选择器 | 描述 | 返回 | 示例 |
| $(“ancestor descendant”) | 选取ancestor 元素里的所有descendant(后代)元素 | 集合元素 | $(“div span”)选取<div>里的所有的<span>元素 |
| $(“parent>child) | 选择parent元素下child，与$(“anestor descendant”)有区别，$(“anestor descendant”)选择的是后代元素 | 集合元素 | $(“div>span”)选取<div>元素下元素名是<span>的子元素 |
| $(“prev+next”) | 选取紧接在prev元素后next元素 | 集合元素 | $(‘.one+div’)选取class为one的下一个<div>元素 |
| $(“prev~siblings”) | 选取prev元素后的所有siblings元素 | 集合元素 | $(“#two~div”)
选取ID为two的元素后面的所有<div>兄弟元素 |
2.3.3 过滤选择器
过滤器规则来筛选出所需的DOM元素，过滤规则与css中的伪类选择器语法相同，以：开头。过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤
1.基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
| :first | 选取第一个元素 | 集合元素 | $(“div:first”)选择所有div元素中第1个div元素 |
| :last | 选取最后一个元素 | 集合元素 | $(“div:last”)选取所有div元素中最后一个div元素 |
| ：not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not(.myclass)选择class 不是mylcass的input元素 |
| ：even | 选取索引是偶数的所有元素，索引，索引从0开始 | 集合元素 | $(“inputeven“）选择索引是偶数的input元素 |
| :ODD | 选取索引是奇数的所有元素，索引，索引从0开始 | 集合元素 | $(“inputOdd“）选择索引是奇数的input元素 |
| :eq(index) | 选取索引等于index的元素(index从0开始） | 集合元素 | $(“input:eq(1)“）选择索引是奇数的input元素 |
| :gt(index) | 选取索引大于index的元素(index从0开始） | 集合元素 | $(“input:eq(1)“）选择索引是大于1的input元素 |
| :it(index) | 选取索引小于index的元素(index从0开始） | 集合元素 | $(“input:it(1)“）选择索引是小于1的input元素 |
| ：header | 选取所有的要标题元素，例如h1,h2,h3等等 | 集合元素 | $(“:header”)选取网页中所有<h1><h2><h3>… |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $(“DIV:ANIMATED”)选取正在执行动画的<div>元素 |
2.内容过滤选择器
规则主要体现在它所包含的子元素或文本内容上。
| 选择器 | 描述 | 返回 | 示例 |
| :contains(text) | 选取含有文本内容为”text“的元素 | 集合元素 | $(“div:contains(“我”）“）选择含量有文本我的div元素 |
| :empty | 选取不包含子元素或者文本空元素 | 集合元素 | $(“div:empty”)选取不包含子元素（包括文本元素)的div 空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(“div:has(p)”)选取含有p元素div元素 |
| :Parent | 选取含有子素或者文本的元素 | 集合元素 | $(“div:has(p)”)选取拥有p元素(包括文本元素)的<div>元素 |
3.可见性过滤器
| 选择器 | 描述 | 返回 | 示例 |
| ：hidden | 选取所有不可见的元素 | 集合元素 | $(“:hidden”)选取不可见的元素 |
| :visible | 选取所有可见的元素 | $(“div：visible”）选取所有可见的div元素 |
4.属性过滤器
| 选择器 | 描述 | 返回 | 示例 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”）选取拥有属性id的元素 |
| attribute=value] | 选取属性的值等于value的元素 | 集合元素 | $(“div[title=test]””)选取属性title为”test”的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title=test]”]”)选取属性title为”test”的<div>元素 |
| [attribute^=value] | 选取拥有此属性的元素 | 集合元素 | $(“div[title^=test]选取属性tile以”test”开始的<div>元素 |
| [attribute$=value] | 选取拥有此属性的元素 | 集合元素 | $(“div[title$=test]选取属性tile以”test”开始的<div>元素 |
| [attribute*=value] | 选取拥有此属性的元素 | 集合元素 | $(“div[title*=test]选取属性tile含有”test”<div>元素 |
| [selector1][selector2][seelctorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一交范围 | 集合元素 | $(“div[id][title$=’test’]选取拥有属性id,并且属性title以”test”结否的<div>元素 |
5.子元素过滤器
只要将父元素和子元素区分清楚，那么使用起来也非常简单,另外还要注意与普通的过滤选择器的区别。
|
:nth-child(index/even/odd /equation |
选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起 |
集合元素 |
:eq(index)只匹配一个元素，而nth-child将为每一个父元素匹配子元素， |
|
:first-child |
选取每个父元素的第`1个元素 |
集合元素 |
:first返回单个元素， 而first-child选择符将为每个父元素匹配第一个子元素 |
|
:last-child |
选取每个父元素的最后一个元素 |
集合元素 |
同样，：last只返回单个元素，而last-child选择符将为每个父 |
|
:only-child |
如果某个元素是它父素中惟一的子元素，那么将会匹配。如果父元素中含有其他元素，则不会匹配 |
集合元素 |
$(“ul li:onlyu-child)在<ul>中选取是唯一子元素的<li>元素 |
:nth-child()选择器是很常用的子元素过滤器，祥细功能如下
1.：nth-child(even):选偶元素
2. :nth-child(odd)：选奇元素
3. :nth-child(2)：选每个父元素下的索引值班等于2的元素
4. :nth-child(3n): 选每个父元素下的索引值班等于3的倍数的元素
5. :nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)元素。（n从0开始）
6.表单对象属性过滤选择器
主要是对所选择的表单元素进行过滤，例如选择被选中的下拉杠，多选择框。
| 选择器 | 描述 | 返回 | 示 例 |
| ：enabled | 选取所有可用元素 | 集合元素 | $(“#form1 :enabled”);选取id为
"form1”的表单内的所有可用远素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $(“#form2 :disabled”);选取id为
"form2”的表单内的所有可用远 |
| :checked | 选取所有被选中的元素（单选框、复选项) | 集合元素 | $(“input:checked“）;选择所有被选择中的<input>元素 |
| ：selected | 选取所有被选中的选项元素（下拉例表） | 集合元素 | $(“select：selected”);选取所有被告选中的选项元素 |
2.3.4 表单选择器
利用这个选择器，能极其方便的获取到表单的某个或某类型的元素
| 选择器 | 描述 | 返回 | 示例 |
| ：input | 选取所有的<input><textarea><select><button> | 集合元素 | $(“.input”)选取所有<input><textarea>、<select><button> |
| :text | 选定取所有的单行文本框 | 集合元素 | $(“：text”)选取所有的单行文本框 |
| ：password | 选取所有密码框 | 集合元素 | 同上 |
| :radio | 选取所有的单选框 | 集合元素 | 同上 |
| :checkbox | 选取所有的多选框 | 集合元素 | 同上 |
| :submit | 选取所有提交按扭 | 集合元素 | 同上 |
| :image | 选取所有的图像按钮 | 集合元素 | 同上 |
| :reset | 选取所有的重置按钮 | 集合元素 | 同上 |
| ：button | 选取所有的按钮 | 集合元素 | 同上 |
| :file | 选取所有的上传域 | 集合元素 | 同上 |
| :hidden | 选择所有不可见元素 | 集合元素 | 同上 |
2.4 应用JQuery改写示例
用传统的Javascript方法编写了案3个简单的例子
例1：给网页中所有<p>元素添加onclik 事件
2：使用一个特定表格隔行变色
3：对多选框进行操作，输出选中的多选框的个数
用jQuery选择器重写例子。代码如下。
$(“p”).click(function){
//doing something
}
重写例子2
$(‘#tb tbody tr:even’).css(“backgroudcolor”,”#888”);
//获取id为tb的元素，然后寻找它下的面tbody标签，再寻找tbody下索引
//值是偶数的tr元素
//改变它的背景色
//css(“property”,”value”);用来设置jquery对象的样式
重写例子3
$(“#btn”).click(function(){
var length=$(“input[name=’check’]"：checked”).length;
//使用属性选择器，然后用表单对象属性过滤，最后获取jquery对象的长度
alert(“选中的个数为:”+length);
}
2.5 选择器中一些注意事项
1.含有特殊符号的注意事项
2.属性选择器引号问题
3.选择器中含量有空格的注意事项
2.6 案例研究---某网站品牌列表的效果
第一步：设计结构和样式，初始化
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
第二步-隐藏品牌
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ //等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)');
$category.hide(); // 隐藏上面获取到的jQuery对象。
})
/*
1，$('ul li:gt(5):not(:last)') :
选取ul元素下的li元素的索引值大于5的集合元素后，去掉集合元素中的最后一个。
索引值从0开始。
*/
</script>
第三步-用户点击“显示全部品牌”按钮
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
$category.show(); // 显示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
return false; //超链接不跳转
})
})
</script>
第四步- 全部和精简的切换
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
$category.show(); // 显示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
$category.show(); // 显示$category
$('.showmore a span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
return false; //超链接不跳转
})
})
</script>
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
return false; //超链接不跳转
})
})
</script>
2.7 其他选择器
1. jQuery提供的选择器的扩展
1.MoreSelectors for jQuery
用于增加更多的选择器，例如.color可以匹配颜射,:colindex可以
匹配表格中的列，：focus可以匹配获取焦点的元素
地址http://plugins.jquery.com/project/moreselectors
2.basic xpath
让用户使用基本的xpath。
地址http://plugins.jquery.com/project/project/xpath.
2.其他使用css选择器的方法
1.document.getelementsbyselector()
通过选择器来获取文档元素。
2.cssQuery()
3.querySelectorAll()
2.8 小结
选择器是行为与文档内容之间连接的纽带,选择器的最终目的是找到文档中的元素
