jQuery选择器完全继承了CSS语法规则和使用习惯。
使用jQuery选择器可以选择文档对象模型(DOM)中的特定元素,即获取特定元素的引用,
然后就可以为其附加各种行为,或者更改选择元素的样式等。
jQuery选择器包括:简单选择器 包含选择器 筛选选择器 内容和属性过滤选择器以及表单专用选择器。
理解jQuery选择器的不同类型用法,目的就是要实现高效选择文档元素。
一、基本选择器
主要包括5种类型,这与CSS基本选择器类型相一致
选择器 说明 返回值
#id 根据指定的ID值选择一个元素 单个元素
element 根据指定的元素类型名称选择该类型所有元素 同类型集合元素
.class 根据指定的类名选择所有同类元素 集合元素
* 选择限定范围选择所有元素 所有元素的集合
selector1,slector2,selector3 分别选择选择器组中每个选择器匹配的元素,然后合并返回所有元素 集合元素
二、层级选择器
层级选择器就是根据HTML文档结构中结点之间的包含或并列关系,决定匹配元素的一种方法。
关系选择器
子元素选择器
1、关系选择器
选择器 说明
A B 选中A中所有子元素B
A>B 选中A中第一个子元素B
A+B 选中紧跟随A的B 元素。
A~B 选中A之后的所有B元素。 (父元素相同)
2、子元素选择器
选择器 说明
:nth-child(N) 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 如果某个元素是父元素中的唯一的子元素,那么将会被匹配
三、过滤选择器
1、定位过滤器
定位过滤器主要是根据编号和排位筛选特定位置上的元素,或者过滤掉特定元素。
选择器 说明
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:not 去除所有与给定选择器匹配的元素 比如 $("input:not(checked)")
:even 匹配所有索引值为偶数的元素,从为开始计数
:odd 奇数
:eq(n) 给定一个索引值,找到这个索引位置的元素
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 小于
:header 匹配如h1、h2、之类的标题元素
:animated 匹配所有正在执行动画效果的元素
2、内容过滤器
内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤。
选择器 说明
:contains(text) 匹配包含给定文本的元素。
:empty 匹配所有不包含子元素或者文本的元素
:has(element) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素。
3、可见过滤器
根据元素的可见或者隐藏来进行匹配
选择器 说明
:hidden 匹配所有不可见元素,或者type为hidden的元素。
:visible 匹配所有的可见元素。
四、属性选择器
主要是根据元素的属性及其值作为过滤的条件,来匹配对应的DOM元素。
七类属性选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute1=value1] [attribute2=value2] [attribute3=value3]
五、表单选择器
1、基本表单选择器
选择器 说明
:input 匹配所有input、textarea、select和button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选按钮
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素。
2、高级表单选择器
选择器 说明
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中的元素(复选框,单选框,不包括slect中的option)
:selected 匹配所有被选中的option元素
六、使用过滤器(过滤函数)
前面5个都是伪选择器(放在$("中")),jQuery在此基础上还优化并扩展了很多筛选函数,这些函数作为jQuery对象的方法直接调用,这样就能够在选择器的基础上更加精确地控件对象。
注:选择器是构建jQuery对象的基础,而筛选函数则是jQuery对象的成员,用法截然不同。
jQuery过滤函数
jQuery筛选函数 说明
eq(index) 获取指定索引位置上的元素,索引值从0开始算起
hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true
filter(expr) 筛选出与指定表达式匹配的元素集合,这个方法用于缩小匹配的范围。
用逗号隔开多个表达式
is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素
符合这个给定的表达式就返回true
map(callback) 将一组元素转换成其他数组(不论是否是元素数组)
not(expr) 删除与指定表达式匹配的元素
slice(start,[end]) 选取一个匹配的子集,与原来的slice方法类似
add(expr) 把与表达式匹配的元素添加到jQuery对象中。
children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
contents() 查找匹配元素内部所有的子结点。
find(expr) 搜索所有与指定表达式匹配的元素。
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素
集合
nexlAll([expr]) 查找当前元素之后的所有元素
parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合
prev([expr]) 取得一个包含匹配的元素集合
prevAll([expr]) 查找当前元素之前所有的同辈元素,可以用表达式过滤
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素
集合
andSelf() 加入先前所选的当前元素,对筛选或者查找后的元素,加入先前所选元
素将会很有用
end() 回到最近的一个“破坏性”操作之前,即将匹配的元素列表变为前
一次的状态
使用jQuery选择器可以选择文档对象模型(DOM)中的特定元素,即获取特定元素的引用,
然后就可以为其附加各种行为,或者更改选择元素的样式等。
jQuery选择器包括:简单选择器 包含选择器 筛选选择器 内容和属性过滤选择器以及表单专用选择器。
理解jQuery选择器的不同类型用法,目的就是要实现高效选择文档元素。
一、基本选择器
主要包括5种类型,这与CSS基本选择器类型相一致
选择器 说明 返回值
#id 根据指定的ID值选择一个元素 单个元素
element 根据指定的元素类型名称选择该类型所有元素 同类型集合元素
.class 根据指定的类名选择所有同类元素 集合元素
* 选择限定范围选择所有元素 所有元素的集合
selector1,slector2,selector3 分别选择选择器组中每个选择器匹配的元素,然后合并返回所有元素 集合元素
二、层级选择器
层级选择器就是根据HTML文档结构中结点之间的包含或并列关系,决定匹配元素的一种方法。
关系选择器
子元素选择器
1、关系选择器
选择器 说明
A B 选中A中所有子元素B
A>B 选中A中第一个子元素B
A+B 选中紧跟随A的B 元素。
A~B 选中A之后的所有B元素。 (父元素相同)
2、子元素选择器
选择器 说明
:nth-child(N) 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素
:last-child 匹配最后一个子元素
:only-child 如果某个元素是父元素中的唯一的子元素,那么将会被匹配
三、过滤选择器
1、定位过滤器
定位过滤器主要是根据编号和排位筛选特定位置上的元素,或者过滤掉特定元素。
选择器 说明
:first 匹配找到的第一个元素
:last 匹配找到的最后一个元素
:not 去除所有与给定选择器匹配的元素 比如 $("input:not(checked)")
:even 匹配所有索引值为偶数的元素,从为开始计数
:odd 奇数
:eq(n) 给定一个索引值,找到这个索引位置的元素
:gt(n) 匹配所有大于给定索引值的元素
:lt(n) 小于
:header 匹配如h1、h2、之类的标题元素
:animated 匹配所有正在执行动画效果的元素
2、内容过滤器
内容过滤器主要根据匹配元素所包含的子元素或者文本内容进行过滤。
选择器 说明
:contains(text) 匹配包含给定文本的元素。
:empty 匹配所有不包含子元素或者文本的元素
:has(element) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素。
3、可见过滤器
根据元素的可见或者隐藏来进行匹配
选择器 说明
:hidden 匹配所有不可见元素,或者type为hidden的元素。
:visible 匹配所有的可见元素。
四、属性选择器
主要是根据元素的属性及其值作为过滤的条件,来匹配对应的DOM元素。
七类属性选择器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attribute1=value1] [attribute2=value2] [attribute3=value3]
五、表单选择器
1、基本表单选择器
选择器 说明
:input 匹配所有input、textarea、select和button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选按钮
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素。
2、高级表单选择器
选择器 说明
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中的元素(复选框,单选框,不包括slect中的option)
:selected 匹配所有被选中的option元素
六、使用过滤器(过滤函数)
前面5个都是伪选择器(放在$("中")),jQuery在此基础上还优化并扩展了很多筛选函数,这些函数作为jQuery对象的方法直接调用,这样就能够在选择器的基础上更加精确地控件对象。
注:选择器是构建jQuery对象的基础,而筛选函数则是jQuery对象的成员,用法截然不同。
jQuery过滤函数
jQuery筛选函数 说明
eq(index) 获取指定索引位置上的元素,索引值从0开始算起
hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true
filter(expr) 筛选出与指定表达式匹配的元素集合,这个方法用于缩小匹配的范围。
用逗号隔开多个表达式
is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素
符合这个给定的表达式就返回true
map(callback) 将一组元素转换成其他数组(不论是否是元素数组)
not(expr) 删除与指定表达式匹配的元素
slice(start,[end]) 选取一个匹配的子集,与原来的slice方法类似
add(expr) 把与表达式匹配的元素添加到jQuery对象中。
children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
contents() 查找匹配元素内部所有的子结点。
find(expr) 搜索所有与指定表达式匹配的元素。
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素
集合
nexlAll([expr]) 查找当前元素之后的所有元素
parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合
prev([expr]) 取得一个包含匹配的元素集合
prevAll([expr]) 查找当前元素之前所有的同辈元素,可以用表达式过滤
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素
集合
andSelf() 加入先前所选的当前元素,对筛选或者查找后的元素,加入先前所选元
素将会很有用
end() 回到最近的一个“破坏性”操作之前,即将匹配的元素列表变为前
一次的状态