在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象.然而在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回。本章主要对常用的jQuery选择器进行一个介绍及归类。
jQuery选择器大体上可分为4类：基本选择器、层次选择器、过滤选择器、表单选择器。其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。具体示例图可见如下：
选择器
｜－基本选择器
｜－层次选择器
｜－表单选择器
｜－过滤选择器
｜—简单过滤选择器
｜－内容过滤选择器
｜－可见性过滤选择器
｜－属性过滤选择器
｜－子元素过滤选择器
｜－表单对象属性过滤选择器
下面就分别就每种选择器进行一个简要的介绍：
基本选择器
它是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。
|
选择器 |
功能 |
返回值 |
|
#id |
根据给定的ID匹配一个元素 |
单个元素 |
|
element |
根据给定的元素名匹配所有元素 |
元素集合 |
|
.class |
根据给定的类匹配元素 |
元素集合 |
|
* |
匹配所有元素 |
元素集合 |
|
Selector1, selector N |
将每一个选择器匹配到的元素合并后一起返回 |
元素集合 |
层次选择器
它是通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过某些关系可以方便快捷地定位元素。
|
选择器 |
功能 |
返回值 |
|
Ancestor descendant |
根据祖先元素匹配所有的后代元素 |
元素集合 |
|
Parent > child |
根据父元素匹配所有的子元素 |
元素集合 |
|
Prev + next |
匹配所有紧接在prev元素后的相邻元素 |
元素集合 |
|
Prev ~sibling |
匹配prev元素之后的所有兄弟元素 |
元素集合 |
注：ancestor descent与parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~siblings可以使用.nextAll()代替。
表单选择器
表单选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象，直接获取表单对象的方法。
|
选择器 |
功能 |
返回值 |
|
:input |
获取所有input、textarea、select |
元素集合 |
|
:text |
获取所有单行文本框 |
元素集合 |
|
:password |
获取所有密码框 |
元素集合 |
|
:radio |
获取所有单选按钮 |
元素集合 |
|
:checkbox |
获取所有复选框 |
元素集合 |
|
:submit |
获取所有提交按钮 |
元素集合 |
|
:image |
获取所有图像域 |
元素集合 |
|
:reset |
获取所有重置按钮 |
元素集合 |
|
:button |
获取所有按钮 |
元素集合 |
|
:file |
获取所有文件域 |
元素集合 |
简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是某中使用最广泛的一种。
|
选择器 |
功能 |
返回值 |
|
:first或first() |
获取第一个元素 |
单个集合 |
|
:last或last() |
获取最后一个元素 |
单个集合 |
|
:not(selector) |
获取除给定选择器外的所有元素 |
元素集合 |
|
:even |
获取所有索引值为偶数的元素，索引号从0开始 |
元素集合 |
|
:odd |
获取所有索引值为奇数的元素，索引号从0开始 |
元素集合 |
|
:eq(index) |
获取指定索引值的元素，索引号从0开始 |
单个集合 |
|
:gt(index) |
获取所有大于给定索引值的元素，索引从0开始 |
元素集合 |
|
:lt(index) |
获取所有小于给定索引值的元素，索引从0开始 |
元素集合 |
|
:header |
获取所有标题类型的元素，如h1、h2…… |
元素集合 |
|
:animated |
获取正在执行动画效果的元素 |
元素集合 |
内容过滤选择器
根据元素中的文字内容或所包含的子元素特征获取元素，其内容可以模糊或绝对进行定位。
|
选择器 |
功能 |
返回值 |
|
:contains(text) |
获取包含给定文本的元素 |
元素集合 |
|
:empty |
获取所有不包含子元素或文本的空元素 |
元素集合 |
|
:has(selector) |
获取含有选择器所匹配的元素的元素 |
元素集合 |
|
:parent |
获取含有子元素或文本的元素 |
元素集合 |
可见性过滤选择器
根据元素是否可见的特征获取元素。
|
选择器 |
功能 |
返回值 |
|
:hidden |
获取所有不可见的元素，或者type为hidden |
元素集合 |
|
:visible |
获取所有可见的元素 |
元素集合 |
属性过滤选择器
根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”开始，以“]”结束。
|
选择器 |
功能 |
返回值 |
|
[attribute] |
获取包含给定属性的元素 |
元素集合 |
|
[attribute=value] |
获取等于给定的属性是某个特定值的元素 |
元素集合 |
|
[attribute!=value] |
获取不等于给定的属性是某个特定值的元素 |
元素集合 |
|
[attribute^=value] |
获取给定的属性是以某些值开始的元素 |
元素集合 |
|
[attribute$=value] |
获取给定的属性是以某些值结尾的元素 |
元素集合 |
|
[attribute*=value] |
获取给定的属性是以包含某些值的元素 |
元素集合 |
|
[selector1] [selectorN] |
获取满足多个条件的复合属性的元素 |
元素集合 |
子元素过滤选择器
子元素过滤选择器能够满足指定到某行的需求，通过它可以轻松的获取所有父元素中指定的某个元素。
|
选择器 |
功能 |
返回值 |
|
:nth-child(eq|even|odd) |
获取每个父元素下的特定位置元素，索引从1开始 |
元素集合 |
|
:first-child |
获取每个父元素下的第一个子元素 |
元素集合 |
|
:last-child |
获取每个父元素下的最后一个子元素 |
元素集合 |
|
:only-child |
获取每个父元素下的仅有的一个元素 |
元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某些对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。
|
选择器 |
功能 |
返回值 |
|
:enabled |
获取表单中所有属性为可用的元素 |
元素集合 |
|
:disabled |
获取表单中所有属性为不可用的元素 |
元素集合 |
|
:checked |
获取表单中所有被选中的元素 |
元素集合 |
|
:selected |
获取表单中所有被选中option的元素 |
元素集合 |
上述只是简单的对jQuery中的选择器进行了归纳及汇总。下面将结合一个具体的实例（图书类目）来介绍选择器的使用。
1）、在页面中创建一个导航条，单击标题上的“展开”链接，可以将图书类目显示出来，并将其上的方案变为“隐藏”，同时在右下角显示简化字样。反之亦然。
2）、单击“简化”链接，隐藏指定的内容，并将“简化”字样变为“更多”。反之亦然。
功能实现：
<html>
<head>
<title>jquery选择器综合实例Demo</title>
<styletype="text/css">
body{
font-size:13px
}
#divFrame{
border:solid1px #666;
width:301px;
overflow:hidden
}
#divFrame.clsHead {
background-color:#eee;
padding:8px;
height:18px;
cursor:hand
}
#divFrame.clsHead h3 {
padding:0px;
margin:0px;
float:left
}
#divFrame.clsHead span {
float:right;
margin-top:3px
}
#divFrame.clsContent {
padding:8px
}
#divFrame.clsContent ul {
list-style-type:none;
margin:0px;
padding:0px
}
#divFrame.clsContent ul li {
float:left;
width:95px;
height:23px;
line-height:23px
}
#divFrame.clsBot{
float:right;
padding-top:5px;
padding-bottom:5px
}
.GetFocus{
background-color:#eee
}
</style>
/*
* 用于将jquery所需要的类库添加进来
*/
<scripttype="text/javascript" language="javascript"src="../js/jquery-1.5.min.js">
</script>
<scripttype="text/javascript" language="javascript">
/*
*实现标题栏中隐藏/展开功能，用于实现图书分类的显示
*/
$(function() {
$(".clsHeadspan > a").click(function() { //用于定位
//判断当前位置的字符是什么，用以判断下一步的操作
//如果原来显示的隐藏，则显示为展开，并将图书分类不显示，右下角不显示任何字样
if($(".clsHeadspan > a").text() == "隐藏") {
$(".clsHeadspan > a").text("展开");
$(".clsContent").css("display","none");
$(".clsBot").css("display","none");
}else {
//若原来是显示展开，则显示为隐藏，并将图书分类显示出来，并显示“简化”简化字样
$(".clsHeadspan > a").text("隐藏");
$(".clsContent").css("display","block");
$(".clsBot").css("display","block");
$(".clsBot> a").text("简化");
}
});
})
/*
*实现右下角的简化/更多功能，用于实现图书分类的全部及部分显示功能
*/
$(function(){
$(".clsBot> a").click( function() {
if($(".clsBot> a").text() == "简化") {
$(".clsBot> a").text("更多");
$("li:gt(4):not(:last)").hide();
}else {
$(".clsBot> a").text("简化");
$("li:gt(4):not(:last)").show().addClass("GetFocus");
}
});
})
</script>
</head>
<body>
<divid="divFrame">
<divclass="clsHead">
<h3>图书分类</h3>
<span><ahref="#">隐藏</a></span>
</div>
<divclass="clsContent">
<ul>
<li><ahref="#">小说</a><i>(1100)</i></li>
<li><ahref="#">文艺</a><i>(900)</i></li>
<li><ahref="#">青春</a><i>(600)</i></li>
<li><ahref="#">少儿</a><i>(3000)</i></li>
<li><ahref="#">生活</a><i>(400)</i></li>
<li><ahref="#">社科</a><i>(6000)</i></li>
<li><ahref="#">伦理</a><i>(5000)</i></li>
<li><ahref="#">计算机</a><i>(2000)</i></li>
<li><ahref="#">教育</a><i>(9000)</i></li>
<li><ahref="#">工具书</a><i>(666)</i></li>
<li><ahref="#">引进版</a><i>(3333)</i></li>
<li><ahref="#">其它书</a><i>(55555)</i></li>
</ul>
</div>
<divclass="clsBot">
<ahref="#">简化</a>
</div>
</div>
</body>
</html>
实现效果－初次打开效果如下：
点击“隐藏”链接时如下：
点击“展开”链接时如下：
点击“简化”链接时如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
