jQuery选择器
title: jQuery选择器
date: 2019-09-24 21:35:07
tags: jQuery
categories: jQuery
选择器
返回的都是 jQuery 对象
类似数组，每个元素都是一个引用了 DOM 节点的对象
不会返回 undefined 或者 null
不必在下一行判断 if（div === undefined）
-
基本选择器
-
多项选择器
-
层级选择器
-
属性选择器
-
过滤器
-
表单相关
-
查找和过滤
基本选择器
-
#id：根据给定的 ID 匹配一个元素 -
element：根据给定的元素标签名匹配所有元素 -
.class：根据给定的 css 类名匹配元素 -
*：匹配所有元素
多项选择器
$("selector1, selector2, selectorN");
将每一个选择器匹配到的元素合并后一起返回
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
层级选择器
$('ancestor descendant')
在给定的祖先元素下匹配所有的后代元素
$('parent > child')
在给定的父元素下匹配所有的子元素
$('prev + next')
匹配所有紧接在 prev 元素后的 next 元素
$('prev ~ siblings')
匹配 prev 元素之后的所有 siblings 元素
属性选择器
-
[attribute] -
[attribute = value] -
[attribute != value] -
[attribute ^= value] -
[attribute $= value] -
[attribute *= value] -
[selector1][selector2][selectorN]
过滤器
child 系列
-
:first-child -
:last-child -
:nth-child(n | even | odd | formula) -
:nth-last-child(n | even | odd | formula) -
:only-child
type 系列
-
:first-type-child -
:last-type-child -
:nth-type-child(n | even | odd | formula) -
:nth-type-last-child(n | even | odd | formula) -
:only-type-child
表单相关
| 快速选择表单元素 | 作用 |
|---|---|
:input |
可以选择<input>，<select>，<textarea>和<button>
|
:text |
匹配所有的单行文本框，和 input[type="text"]一样 |
| 其他 input 的 type | :passowrd/:radio/:checkbox/:image/:reset/:button/:file |
表单状态
| 根据表单状态选择表单元素 | 作用 |
|---|---|
:enabled |
匹配所有可用元素 |
:disabled |
匹配所有不可用元素 |
:checked |
匹配所有选中的被选中元素（复选框，单选框等，select 中的 option） |
:selected |
匹配所有选中的 option 元素 |
查找与过滤
find(expr | object | element)
搜索所有与指定表达式匹配的元素
children([expr])
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
parent([expr])
取得一个包含着所有匹配元素的唯一父元素的集合
next([expr])、prev([expr])
取得一个包含匹配的元素结合中每一个元素紧邻的后面（前面）同辈元素的元素集合
eq(index | -index)
获取当前链式操作中第 N 个jQuery 对象
siblings([expr])
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
filter(expr | object | element | fn)
筛选出与指定表达式匹配的元素集合
参数
expr：字符串值，包含供匹配当前元素集合的选择器表达式
object：现有的 jQuery 对象，以匹配当前的元素
element：一个用于匹配元素的 DOM 元素
fn：一个函数用来作为测试元素的集合
