JQuery-第二章 选择器
萧成文
2.1 JQuery选择器是什么
转自：http://www.cnblogs.com/lwcompany/
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;
}
?1 例如要使所有class为demo的<p>元素里的字体加粗，可以直接在<style>里编写，而不需要去网页里寻找所有clss为DEMO的<p>元素逐个添加样式。代码如下：
?1
2
3
4
5
6
7
8 <style>
.demo{
color:red;
font-size:30px;
font-weight:bold; //字体加粗
}
</style>
<p class="demo"> css demo.</p>
?1 2.JQuery选择器
?1 jQuery中的选择器完全不继承了css的风格，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，选择器是学习JQuery的基础，jQery的行为规则都是在获取到元素后才能生效。
?1
2
3
4
5
6 <script type="text/javascript">
function demo(){
alert("javascript demo.");
}
</script>
<p οnclick="demo();">点击我.</p>
?1 像上面这样把javascript代码和html代码混杂在一下很不妥，因为它没有将网页和行为分离，建议使用下面的方法,
?1
2
3
4
5
6 <p class="demo">jquery demo</p>
<script type="text/javascript">
$(".demo").click(function(){
alert("jquery demo!");
})
</script>
?1 可以对css的写法和jquery的写法进行比较
?1 css获取至元素的代码如下
?1 .demo{
?1 … //给class为demo的元素添加样式
?1 }
?1 jQuery获取到元素的代码如下:
?1 $(“.demo”{ //给class为demo的元素添加行为
?1 …..
?1 }
?1 2.2 jQuery选择器的优势
?1 1.简洁的写法
?1 2.支持css1到css3选择器
?1 3.完善的处理机制
?1
?1 2.3 jQuery选择器
?1 先看几组用传统的javascript方法获取页面元素，然后给元素添加行事件的例子。
?1 例1 ：给网页中的所有<p>元素添加onclick事件
?1 html代码如下：
?1 <p>测试1</p>
?1 <p>测试2</p>
?1 要做的工作有以下几项。
?1 1.获取所有<p>元素。
?1 2.对<p>元素进行循环（因为获取的是数组对象)
?1 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>
?1
?1 例2：使一个特定的表格隔行变色。
?1 要作的工作有几项：
?1 1.根据表格id获取表格
?1 2.在表格内获取<tbody>元素
?1 3.在<tbody>元素下获取<tr>元素
?1 4.循环输出获取的<tr>元素
?1 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>
?1 上面是传统的javascript方法乾地操作，中间使用了getelemetnbyid()、getelementsbytagname()和getelementsbyname()等方法，然后动态地给元素添加行为或样式。还不断重复使用getelementbyid和
?1 getelementsbytagname()等冗长难记的名称，开发人员开始厌倦这种写未能。然而JQuery中，类似的这些操作则是非常简洁.
?1 下面学习如何使用jquery获取这些元素。
?1 jquery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。
?1 2.3.1 基本选择器
?1 基本选择器是JQuery中最常用的选择器，也是最简单的选择器，它通过元素id、class、标签名来查找DOM元素。
?1 在网页中，每个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>标签的一组元素
?1 选择器的示例：
<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>
?1 2.3.2 层次选择器
?1 如果想通DOM元素之间的层资来获取特定元素，例如后代元素、子元素，
?1 相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
选择器 描述 返回 示例
$(“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>兄弟元素
?1
?1 2.3.3 过滤选择器
?1 过滤器规则来筛选出所需的DOM元素，过滤规则与css中的伪类选择器语法相同，以：开头。过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤
?1 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>元素
?1
?1 2.内容过滤选择器
?1 规则主要体现在它所包含的子元素或文本内容上。
选择器 描述 返回 示例
:contains(text) 选取含有文本内容为”text“的元素 集合元素 $(“div:contains(“我”）“）选择含量有文本我的div元素
:empty 选取不包含子元素或者文本空元素 集合元素 $(“div:empty”)选取不包含子元素（包括文本元素)的div 空元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $(“div:has(p)”)选取含有p元素div元素
:Parent 选取含有子素或者文本的元素 集合元素 $(“div:has(p)”)选取拥有p元素(包括文本元素)的<div>元素
?1 3.可见性过滤器
选择器 描述 返回 示例
：hidden 选取所有不可见的元素 集合元素 $(“:hidden”)选取不可见的元素
:visible 选取所有可见的元素 $(“div：visible”）选取所有可见的div元素
?1 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>元素
?1
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>元素
?1
: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")
<PRE class="brush: php; auto-links: true; collapse: false; first-line: 1; gutter: true; html-script: false; light: false; ruler: false; smart-tabs: true; tab-size: 4; toolbar: true;"><!-- 引入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>
</PRE> .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 小结
选择器是行为与文档内容之间连接的纽带,选择器的最终目的是找到文档中的元素
类似资料：