基本选择器
基本选择器是jQuery中最常用的选择器，通过元素的id,className或tagName来查找页面中的元素
| 选择器 | 描述 | 返回 |
|---|
| #ID | 根据元素的ID属性进行匹配 | 单个jQuery对象 |
| .class | 根据元素的class属性进行匹配 | jQuery对象数组 |
| element | 根据元素的标签名进行匹配 | jQuery对象数组 |
| selector1，selector2，···，selectorN | 将每个选择器匹配的结果合并后一起返回 | jQuery对象数组 |
| * | 匹配页面的所有元素，包括html、head、body等 | jQuery对象数组 |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery基本选择器</title>
<script type="text/javascript" src="js/jquery-1.x.js"></script>
</head>
<body>
<div id="idDiv">DOM对象与jQuery对象的相互转化</div>
<div class="classDiv">jQuery对象不能直接使用DOM对象后方法，</div>
<div class="classDIv">但可以通过将jQuery对象转换成jQuery对象后再调用其它方法。</div>
<span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
<script type="text/javascript">
$(function(e){
$("#idDiv").css("color","blue");
$(".classDiv").css("background-color","#ddd");
$("span").css("background-color","gray").css("color","white");
$("*").css("font-size","20px");
$("#idDiv,.classSpan").css("font-family","italic");
});
</script>
</body>
</html>
层次选择器
jQuery层次选择器是通过DOM对象的层次关系来获取特定的元素，如同辈元素、后代元素、子元素和相邻元素等。层次选择器的用法和基本选择器类似，也是使用$()函数来实现，返回结果均为jQuery对象数组：
| 选择器 | 描述 | 返回 |
|---|
| $(“ancestor descendant”) | 选取ancestor元素中的所有子元素 | jQuery对象数组 |
| $(“parent > child”) | 选取parent元素中的直接子元素 | jQuery对象数组 |
| $(“prev+next”) | 选取紧邻prev元素之后的next元素 | jQuery对象数组 |
| $(“prev~sibilings”) | 选取prev元素之后的siblings兄弟元素 | jQuery对象数组 |
过滤选择器
- 简单过滤选择器
简单过滤选择器是过滤选择器中用的最多的一种，过滤规则主要体现在元素的位置上或一些特定的元素上，书写时均以冒号（:）开头：
| 选择器 | 描述 | 返回 |
|---|
| :first | 选取第一个元素 | 单个jQuery对象 |
| :last | 选取最后一个元素 | 单个jQuery对象 |
| :even | 选取所有索引值为偶数的元素，索引从0开始 | jQuery对象数组 |
| :odd | 选取所有索引值为奇数的元素，索引从0开始 | jQuery对象数组 |
| :header | 选取所有标题元素，如h1,h2,h3等 | jQuery对象数组 |
| :focus | 选取当前获取焦点的元素（1.6+版本） | jQuery对象数组 |
| :root | 选取文档的根元素（1.9+版本） | 单个jQuery对象 |
| :aninated | 选取所有正在执行动画效果的元素 | jQuery对象数组 |
| :eq(index) | 选取索引等于index的元素，索引从0开始 | 单个jQuery对象 |
| :gt(index) | 选取索引大于index的元素，索引从0开始 | jQuery对象数组 |
| :lt(index) | 选取索引小于index的元素，索引从0开始 | jQuery对象数组 |
| :not(selector) | 选择selector以外的元素 | jQuery对象数组 |
- 内容过滤选择器
内容过滤选择器是指根据元素的文字内容或所包含的子元素的特征进行多虑的选择器
| 选择器 | 描述 | 返回 |
|---|
| :contains(text) | 选取包含text内容的元素 | jQuery对象数组 |
| :has(selector) | 选取含有selector多匹配的元素 | jQuery对象数组 |
| :empty | 选取所有不包含文本或者子元素的空元素 | jQuery对象数组 |
| :parent | 选取含有子元素或文本的元素 | jQuery对象数组 |
- 可见性过滤选择器
可见性过滤选择器是值根据元素的可见性来筛选元素的选择器
| 选择器 | 描述 | 返回 |
|---|
| :hidden | 选取所有的不可见元素，或者type为hidden的元素 | jQuery对象数组 |
| :visible | 选取所有的可见元素 | jQuery对象数组 |
- 属性过滤选择器
属性过滤选择器是指根据元素的属性来筛选元素的选择器，在属性匹配时以“[”开始、以“]”结束
| 选择器 | 描述 | 返回 |
|---|
| [attribute] | 选取包含给定属性的元素 | jQuery对象数组 |
| [attribute = value] | 选取属性等于某个特定值的元素 | jQuery对象数组 |
| [attribute != value] | 选取属性不等于或不包含某个特定值的元素 | jQuery对象数组 |
| [attribute ^= value] | 选取属性以某个值开始的元素 | jQuery对象数组 |
| [attribute $= value] | 选取属性以某个值结尾的元素 | jQuery对象数组 |
| [attribute *= value] | 选取属性中包含某个值的元素 | jQuery对象数组 |
| [attribute1][attribute2][attribute3] | 复合属性选择器，需要同时满足多个条件时使用 | jQuery对象数组 |
- 子元素过滤选择器
在页面设计过程中需要突出某些行时，可以通过基本过滤选择器中的:eq()来实现单表中行的凸显，但不能同时让多个表具有相同的效果。在jQuery中，子元素过滤选择器可以轻松地选取所有父元素中的指定元素，并进行处理
| 选择器 | 描述 | 返回 |
|---|
| :first-child | 选取每个父元素中的第一个子元素 | jQuery对象数组 |
| :last-child | 选取每个父元素中的最后一个元素 | jQuery对象数组 |
| :only-child | 当父元素只有一个子元素时，进行匹配。否则不匹配 | jQuery对象数组 |
| :nth-child(N\odd\even) | 选取每个父元素中的第N个子元素或奇偶元素 | jQuery对象数组 |
| :first-of-type | 选取每个父元素中的第一个元素（1.9+版本） | jQuery对象数组 |
| :last-of-type | 选取每个父元素中的最后一个元素（1.9+版本） | jQuery对象数组 |
| :only-of-type | 当父元素只有一个子元素时匹配，否则不匹配（1.9+版本） | jQuery对象数组 |
其中，在:nth-child(N|odd|even)选择器中，元素的下标从1开始。当参数为N为整数时，表示选择集合中的第N个元素；当参数为odd时，表示选取集合中所有下标为奇数的元素；当参数为even时，表示选择集合中所有下标为偶数的元素；当参数为an+b形式时，表示从第b个开始，每隔a个选取一个，例如，3n+2表示从第2个开始每隔3个选取一个。
- 表单对象属性过滤选择器
表单对象属性过滤选择器是指通过表单对象的属性特征进行筛选的选择器
| 选择器 | 描述 | 返回 |
|---|
| :enabled | 选取表单中属性为可用的元素 | jQuery对象数组 |
| :disabled | 选取表单中属性为不可用的元素 | jQuery对象数组 |
| :checked | 选择表单中被选择中的元素（单选按钮、复选框） | jQuery对象数组 |
| :selected | 选取表单中被选中的选项元素（下拉列表） | jQuery对象数组 |
表单选择器
表单在web前端开发中占据重要的地位，在jQuery中引入的表单选择器能够让用户更加方便的处理表单数据。通过表单选择器可以快速定位到某类表单对象
| 选择器 | 描述 | 返回 |
|---|
| :input | 选取所有的< input>、< textarea> 、< select>、< button>元素 | jQuery对象数组 |
| :text | 选取所有的单行文本框 | jQuery对象数组 |
| :password | 选取所有的密码框 | jQuery对象数组 |
| :radio | 选取所有的单选框 | jQuery对象数组 |
| :checkbox | 选取所有的多选框 | jQuery对象数组 |
| :submit | 选取所有的提交按钮 | jQuery对象数组 |
| :image | 选取所有的图片按钮 | jQuery对象数组 |
| :button | 选取所有的按钮 | jQuery对象数组 |
| :file | 选取所有的文件域 | jQuery对象数组 |
| :hidden | 选取所有的不可见元素 | jQuery对象数组 |
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
