jQuery 选择器全部详细笔记-阿里云开发者社区

jQuery 选择器

jQuery 选择器介绍

选择器是 jQuery 的核心, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖

于选择器

jQuery 选择器的优点

简洁的写法

完善的事件处理机

$("#id") 等价于 document.getElementById("id");

$("tagName") 等价于 document.getElementsByTagName("tagName");

代码演示

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>jQuery选择器使用特点</title>
6. <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
7. <script>
8. window.onload = function () {
9. //如果是dom对象, 获取value
10. var username = document.getElementById("username");
11. // alert(username.value);//这里会发生? => 有错误
12. 
13. //如果我们希望dom对象可以处理null
14. if(username) {
15. alert("username value=" + username.value)
16.             } else {
17. alert("没有获取到对应id的dom对象")
18.             }
19. 
20. //如果是jquery对象, 获取的value
21. //如果没有获取到，调用val() , 并不会报错, 对程序的健壮性.
22. var $username = $("#username");
23. alert($username.val())// 这里不会报错， 提示undefined
24. 
25.         }
26. </script>
27. </head>
28. <body>
29. 用户名 <input type="text" id="username~" name="username" value="大家好"/>
30. </body>
31. </html>

基本选择器

● 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class

和标签名来查找 DOM 元素

1、#id 用法: $("#myDiv"); 返回值单个元素的组成的集合

说明: 这个就是直接选择 html 中的 id=”myDiv”

2、Element 用法: $("div") 返回值集合元素

说明: element 的英文翻译过来是”元素”,所以 element 其实就是 html 已经定义的标签元素,例如 div, input, a 等等.

3、class 用法: $(".myClass") 返回值集合元素

说明: 这个标签是直接选择 html 代码中 class=”myClass”的元素或元素组(因为在同一html 页面中 class 是可以存在多个同样值的).

4、* 用法: $("*") 返回值集合元素

说明: 匹配所有元素,多用于结合上下文来搜索

5、selector1, selector2, selectorN 用法: $("div,span,p.myClass") 返回值集合元素

说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中 p.myClass 是表示匹配元素 p class=”myClass”

● 基本选择器应用实例

1. 改变 id 为 one 的元素的背景色为 #0000FF

2. 改变 class 为 mini 的所有元素的背景色为 #FF0033

3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF

4. 改变所有元素的背景色为 #00FF33

5. 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399

程序运行图

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>基本选择器应用实例</title>
6. <style type="text/css">
7. div, span {
8. width: 140px;
9. height: 140px;
10. margin: 20px;
11. background: #9999CC;
12. border: #000 1px solid;
13. float: left;
14. font-size: 17px;
15. font-family: Roman;
16.         }
17. 
18. div.mini {
19. width: 60px;
20. height: 30px;
21. background: #CC66FF;
22. border: #000 1px solid;
23. font-size: 12px;
24. font-family: Roman;
25.         }
26. </style>
27. <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
28. <script type="text/javascript">
29.         $(function () {
30. //1. 改变 id 为 one 的元素的背景色为 #0000FF
31.             $("#b1").click(
32. function () {
33.                     $("#one").css("background", "#0000FF");
34.                 }
35.             )
36. //2. 改变 class 为 mini 的所有元素的背景色为 #FF0033
37.             $("#b2").click(
38. function () {
39.                     $(".mini").css("background", "#FF0033");
40.                 }
41.             )
42. //3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
43.             $("#b3").click(
44. function () {
45.                     $("div").css("background", "#00FFFF");
46.                 }
47.             )
48. //4. 改变所有元素的背景色为 #00FF33
49.             $("#b4").click(
50. function (){
51.                     $("*").css("background", "#00FF33");
52.                 }
53.             )
54. //5. 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF
55.             $("#b5").click(
56. function (){
57.                     $("#two,.mini,span").css("background", " #3399FF");
58.                 }
59.             )
60. 
61.         })
62. </script>
63. </head>
64. <body>
65. <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
66. <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
67. <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
68. <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
69. <input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/>
70. <hr/>
71. <div id="one" class="mini">div id为one</div>
72. <div id="two">div id为two</div>
73. <div id="three" class="mini">div id为three</div>
74. <span id="s_one" class="mini">span  one</span>
75. <span id="s_two">span two</span>
76. </body>
77. </html>

层次选择器

● 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

1 、ancestor descendant

用法: $(”form input”) ; 返回值集合元素

说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.

2、parent > child

用法: $(”form > input”) ; 返回值集合元素

说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素

3、prev + next

用法: $(”label + input”) ; 返回值集合元素

说明: 匹配所有紧接在 prev 元素后的 next 元素

4、prev ~ siblings

用法: $(”form ~ input”) ; 返回值集合元素

说明: 匹配 prev 元素之后的所有 siblings 元素.

注意:是匹配之后的元素,不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配.

注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

● 层次选择器应用实例

1. 改变 <body> 内所有 <div> 的背景色为 #0000FF

2. 改变 <body> 内子 <div> 的背景色为 #FF0033

3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF

4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF

5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000F

代码演示

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>层次选择器应用实例</title>
6. <style type="text/css">
7. div, span {
8. width: 140px;
9. height: 140px;
10. margin: 20px;
11. background: #9999CC;
12. border: #000 1px solid;
13. float: left;
14. font-size: 17px;
15. font-family: Roman;
16.         }
17. 
18. div.mini {
19. width: 80px;
20. height: 30px;
21. background: #CC66FF;
22. border: #000 1px solid;
23. font-size: 12px;
24. font-family: Roman;
25.         }
26. </style>
27. <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
28. <script type="text/javascript">
29.         $(function () {
30. 
31. //1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
32.             $("#b1").click(function () {
33.                 $("div").css("background", "#0000FF");
34.             })
35. //2. 改变 <body> 内子 <div>[第一层div] 的背景色为 #FF0033
36.             $("#b2").click(
37. function () {
38.                     $("body > div").css("background", "#FF0033");
39.                 }
40.             )
41. //3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
42.             $("#b3").click(
43. function (){
44.                     $("#one + div").css("background", "#0000FF");
45.                 }
46.             )
47. //4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF
48.             $("#b4").click(
49. function () {
50.                     $("#two ~ div").css("background", "#0000FF");
51.                 }
52.             )
53. //5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
54.             $("#b5").click(
55. function (){
56.                     $("#two").siblings("div").css("background", "#0000FF");
57.                 }
58.             )
59.         })
60. </script>
61. </head>
62. <body>
63. <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
64. <input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
65. <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
66. <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
67. <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
68. <hr/>
69. <div id="one" class="mini">
70.     div id为one
71. </div>
72. <div id="two">
73.     div id为two
74. <div id="two01">
75.         id two01
76. </div>
77. <div id="two02">
78.         id two02
79. </div>
80. </div>
81. 
82. <div id="three" class="mini">
83.     div id为three
84. <div id="three01">
85.         id three01
86. </div>
87. </div>
88. 
89. 
90. </body>
91. </html>

表单选择器

● 表单选择器基本介绍

1、:input 用法: $(":input") ; 返回值集合元素

说明:匹配所有 input, textarea, select 和 button 元素

2、:text 用法: $(":text") ; 返回值集合元素

说明: 匹配所有的单行文本框.

3、:password 用法: $(":password") ; 返回值集合元素

说明: 匹配所有密码框.

4、:radio 用法: $(":radio") ; 返回值集合元素

说明: 匹配所有单选按钮.

5、:checkbox 用法: $(":checkbox") ; 返回值集合元素

说明: 匹配所有复选框

6、:submit 用法: $(":submit") ; 返回值集合元素

说明: 匹配所有提交按钮.

7、:image 用法: $(":image") 返回值集合元素

说明: 匹配所有图像域.

8、:reset 用法: $(":reset") ; 返回值集合元素

说明: 匹配所有重置按钮.

9、:button 用法: $(":button") ; 返回值集合元素

说明: 匹配所有按钮.这个包括直接写的元素 button.

10、:file 用法: $(":file") ; 返回值集合元素

说明: 匹配所有文件域.

11、:hidden 用法: $("input:hidden") ; 返回值集合元素

说明: 匹配所有不可见元素，或者 type 为 hidden 的元素.这个选择器就不仅限于表单

了,除了匹配 input 中的 hidden 外,那些 style 为 hidden 的也会被匹配.

注意: 要选取 input 中为 hidden 值的方法就是上面例子的用法,但是直接使用":hidden" 的话就是匹配页面中所有的不可见元素,包括宽度或高度为 0 的

代码演示

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>表单选择器-应用实例</title>
6. <script type="text/javascript" src="./script/jquery-3.6.0.min.js"></script>
7. <script type="text/javascript">
8.         $(function () {
9. //选择所有的button
10. //这里我们就不绑定事件，直接演示
11. //$(":button") 会选择<input type="button" value="按钮1"/><br/>
12. //还会选择  <button>按钮2</button>还会选择  <button>按钮3</button>
13. var $button = $(":button");
14. alert("$button 大小=" + $button.length)//3
15. 
16. //得到type="button" 的元素
17. //$("input[type='button']") 只会得到 <input type="button" value="按钮1"/>
18. var $button2 = $("input[type='button']");
19. alert("$button2 大小=" + $button2.length)//1
20. 
21. //得到<button />按照元素标签取值
22. //$("button") 只会按照元素标签获取 <button>按钮2</button>
23. var $button3 = $("button");
24. alert("$button3 大小=" + $button3.length)//2
25.         });
26. </script>
27. </head>
28. <body>
29. <form>
30. <input type="text"/><br/>
31. <input type="checkbox"/><br/>
32. <input type="radio"/><br/>
33. <input type="image" src="../image/2.png" height="100"/><br/>
34. <input type="file"/><br/>
35. <input type="submit"/><br/>
36. <input type="reset"/><br/>
37. <input type="password"/><br/>
38. <input type="button" value="按钮1"/><br/>
39. <select>
40. <option/>
41. </select><br/>
42. <textarea></textarea><br/>
43. <button>按钮2</button>
44. <button>按钮3</button>
45. <br/>
46. </form>
47. </body>
48. </html>

综合代码示例

网页中所有的元素添加 onclick 事件

1. 需求: 网页中所有的元素添加 onclick

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>网页中所有的 <p> 元素添加 onclick 事件</title>
6. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
7. <script type="text/javascript">
8.         $(function (){
9. //方式1
10. //1. 选择器选择p元素-基础选择器
11. //2. 绑定事件-函数-获取p元素的文本
12. //3. 统一绑定.
13.             $("p").click(function (){
14. //3. 当我们点击p元素时, 会隐式的传入this(dom), 表示你当前点击的p
15. //   元素,对应的dom对象
16. //alert("p的内容是= " + this.innerText)
17. alert("p的内容是(jquer方式)=" + $(this).text())
18.             })
19. 
20. //方式2
21. //对所有的p元素进行遍历
22. //遍历执行内部function 依然会隐式的传入this(表示当前的p的dom对象)
23. //这是遍历出一个p对象, 就绑定一个click事件
24.             $("p").each(function (){
25.                 $(this).click(function (){
26. alert("p的内容~=" + $(this).text())
27.                 })
28.             })
29. 
30.         })
31. </script>
32. </head>
33. <body>
34. <h1>网页中所有的 &lt;p&gt; 元素添加 onclick 事件</h1>
35. <p>段落1</p>
36. <p>段落2</p>
37. <p>段落3</p>
38. </body>
39. </html>

使一个特定的表格隔行变色

需求：使一个特定的表格隔行变色 ,如图

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>使一个特定的表格隔行变色</title>
6. <style type="text/css">
7. table {
8. border: 1px solid;
9. border-collapse: collapse;
10.         }
11. </style>
12. <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
13. <script type="text/javascript">
14.         $(function () {
15. //1. 先选择到table
16. //2. 得到 tr
17. //3. 得到even/odd的tr元素
18. //4. 得到指定的table:eq(index) 可以得到指定index的table
19. //   index是从0开始编号
20.             $("table:eq(0) tr:even").css("background", "red");
21.             $("table:eq(0) tr:odd").css("background", "blue");
22. 
23.             $("table:eq(1) tr:even").css("background", "green");
24.             $("table:eq(1) tr:odd").css("background", "yellow");
25.         });
26. </script>
27. </head>
28. <body>
29. <h1>第一个表格</h1>
30. <table border="1" width="400px">
31. <tr>
32. <td>1</td>
33. <td>1</td>
34. </tr>
35. <tr>
36. <td>2</td>
37. <td>2</td>
38. </tr>
39. <tr>
40. <td>3</td>
41. <td>3</td>
42. </tr>
43. <tr>
44. <td>4</td>
45. <td>4</td>
46. </tr>
47. <tr>
48. <td>5</td>
49. <td>5</td>
50. </tr>
51. <tr>
52. <td>6</td>
53. <td>6</td>
54. </tr>
55. 
56. </table>
57. <h1>第二个表格</h1>
58. <table border="1" width="400px">
59. <tr>
60. <td>1</td>
61. <td>1</td>
62. </tr>
63. <tr>
64. <td>2</td>
65. <td>2</td>
66. </tr>
67. <tr>
68. <td>3</td>
69. <td>3</td>
70. </tr>
71. <tr>
72. <td>4</td>
73. <td>4</td>
74. </tr>
75. <tr>
76. <td>5</td>
77. <td>5</td>
78. </tr>
79. <tr>
80. <td>6</td>
81. <td>6</td>
82. </tr>
83. 
84. </table>
85. </body>
86. </html>

jQuery 选择器全部详细笔记