本文最后更新于：2024年3月18日 凌晨
jQuery 选择器
基本元素
基础选择器
- 与css选择器基本相同，可简化原生js繁琐的dom操作。
1
| $("#id") = document.getElementById("id")
|
筛选
siblings([expr])
- 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合，可以用可选的表达式进行筛选。
[expr]用于筛选同辈元素的表达式。
示例
1
2
3
4
5
6
7
8
| <p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
<script>
$("div").siblings()
</script>
|
1
| [ <p>Hello</p>, <p>And Again</p> ]
|
- 找到每个div的所有同辈元素中带有类名为selected的元素。
1
2
3
4
5
6
7
8
| <div>
<span>Hello</span>
</div>
<p class="selected">Hello Again</p>
<p>And Again</p>
<script>
$("div").siblings(".selected")
</script>
|
1
| [ <p class="selected">Hello Again</p> ]
|
parent([expr])
- 取得一个包含着所有匹配元素的唯一父元素的元素集合。
- 你可以使用可选的表达式来筛选。
[expr]用来筛选的表达式。
实例
- 查找段落的父元素中每个类名为selected的父元素。
1
2
3
4
5
6
7
8
9
| <div>
<p>Hello</p>
</div>
<div class="selected">
<p>Hello Again</p>
</div>
<script>
$("p").parent(".selected")
</script>
|
1
| [ <div class="selected"><p>Hello Again</p></div> ]
|
children([expr])
- 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
- 可以通过可选的表达式来过滤所匹配的子元素，注意：parents(）将查找所有祖辈元素，而children(）只考虑子元素而不考虑所有后代元素。
[expr]用以过滤子元素的表达式。
实例
1
2
3
4
5
6
7
8
| <div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<p>And Again</p>
</div>
<script>
$("div").children(".selected")
</script>
|
1
| [ <p class="selected">Hello Again</p> ]
|
表单
表单选择器
- 虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多变的需求，所以jQuery为表单提供了专用的选择器。
| 方法名 |
描述 |
返回 |
| :input |
选取所有input,textarea,select和button元素 |
集合元素 |
| :text |
选择所有单行文本框，即type=text |
集合元素 |
| :password |
选择所有密码框，即type=password |
集合元素 |
| :radio |
选择所有单选框，即type=radio |
集合元素 |
| :checkbox |
选择所有复选框，即type=checkbox |
集合元素 |
| :submit |
选取所有提交按钮，即type=submit |
集合元素 |
| :reset |
选取所有重置按钮，即type=reset |
集合元素 |
| :image |
选取所有图像按钮，即type=image |
集合元素 |
| :button |
选择所有普通按钮，即button元素 |
集合元素 |
| :file |
选择所有文件按钮，即type=file |
集合元素 |
| :hidden |
选择所有不可见字段，即type=hidden |
集合元素 |
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form>
<input type="text" name="user" value="123" />
<input type="password" name="pass" value="456" />
<input type="radio" name="sex" value="男" checked="checked" />男。
<input type="radio" name="sex" value="女" />女。
<textarea></textarea>
<select name="city" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button></button>
</form>
<script>
alert($(":input").size());
alert($(":text").size());
</script>
</body>
</html>
|
注意：这些选择器都是返回元素集合，如果想获取某一个指定的元素，最好结合一下属性选择器，比如：
1
2
3
4
| alert($(":input[name=city]").size());
alert($(":password[name=pass]").size());
alert($(":radio[name=sex]").last().val());
alert($("form :hidden").size());
|
表单过滤器
- jQuery提供了四种表单过滤器，分别在是否可以用，是否选定来进行表单字段的筛选过滤。
| 方法名 |
描述 |
返回 |
| :enabled |
选取所有可用元素 |
集合元素 |
| :disabled |
选取所有不可用元素 |
集合元素 |
| :checked |
选取所有被选中的元素，单选和复选字段 |
集合元素 |
| :selected |
选取所有被选中的元素，下拉列表 |
集合元素 |
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form>
<input type="text" name="user" value="123" />
<input type="password" name="pass" value="456" />
<input type="radio" name="sex" value="男" checked="checked" />男。
<input type="radio" name="sex" value="女" />女。
<textarea></textarea>
<select name="city" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button></button>
</form>
<script>
alert($("form :enabled").size());
alert($("form :disabled").size());
alert($("form :checked").size());
alert($("form :selected").size());
alert($("form :selected").get(0));
</script>
</body>
</html>
|