jQuery选择器总结

来源：互联网发布：access2003数据库下载编辑：程序博客网时间：2024/05/01 21:25

在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>

body {

font-size:13px

}

#divFrame {

border:solid 1px #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 所需要的类库添加进来

</script>

* 实现标题栏中隐藏 / 展开功能，用于实现图书分类的显示

$(function() {

$(".clsHead span > a").click(function() { // 用于定位

// 判断当前位置的字符是什么，用以判断下一步的操作

// 如果原来显示的隐藏，则显示为展开，并将图书分类不显示，右下角不显示任何字样

if($(".clsHead span > a").text() == " 隐藏 ") {

$(".clsHead span > a").text(" 展开 ");

$(".clsContent").css("display", "none");

$(".clsBot").css("display", "none");

} else {

// 若原来是显示展开，则显示为隐藏，并将图书分类显示出来，并显示“简化”简化字样

$(".clsHead span > 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>

</div>

<ul>

</ul>

</div>

</div>

</body>

</html>

实现效果－初次打开效果如下：

点击“隐藏”链接时如下：

点击“展开”链接时如下：

点击“简化”链接时如下：

转自：http://blog.csdn.net/zhaozheng7758/archive/2011/02/13/6182341.aspx