复制代码
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
33
34
35jQuery 是⼀套兼容多浏览器的 javascript 脚本库。 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js入门</title> <!--引入jquery--> <!--<script src="js/jquery-3.6.0.min.js"></script>--> <script src="js/js.js"></script> </head> <body> <div id="box">div</div> <!-- 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery --> <script> /*获取DOM对象*/ var box1 = document.getElementById("box"); /*jquery对象*/ /*var jq_obj = $("#box"); console.log(box1); console.log(jq_obj);*/ var box = $("box"); </script> </body> </html>
通过css实现背景色隔行换色
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .datalist{ border:1px solid #007108; font-family:Arial; border-collapse:collapse; /*background-color:#d9ffdc;*/ font-size:14px; } .datalist th{ border:1px solid #007108; /*background-color:#00a40c;*/ color:#FFFFFF; font-weight:bold; padding-top:4px; padding-bottom:4px; padding-left:12px; padding-right:12px; text-align:center; } .datalist td{ border:1px solid #007108; text-align:left; padding-top:4px; padding-bottom:4px; padding-left:10px; padding-right:10px; } /*1）通过css实现背景色隔行换色*/ /* tr:nth-child(odd){!*odd基数*! background:palegoldenrod; font-size: 30px; } tr:nth-child(even){!*even奇数*! background:darkturquoise; font-size: 30px; }*/ </style> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> <script> /* /!*1) 通过js的DOM操作实现隔行换色*!/ window.οnlοad=function (){ /!*获取到所有的tr*!/ var trs = document.getElementsByTagName("tr"); for(var i=0;i<=trs.length-1;i++){ if(i%2==0){ trs[i].style.background="red"; }else { trs[i].style.background="green"; } } }*/ //2) 通过jquery 实现隔行换色 $(function (){ /*获取所有的奇数行设置背景色*/ $("tr:odd").css("background","palegoldenrod") /*获取所有的奇数行设置背景色*/ $("tr:even").css("background","darkturquoise") }); </script> </head> <body> <table class="datalist"> <tr> <th scope="col">Name</th> <th scope="col">Class</th> <th scope="col">Birthday</th> <th scope="col">Constellation</th> <th scope="col">Mobile</th> </tr> <tr> <!-- 奇数行 --> <td>isaac</td> <td>W13</td> <td>Jun 24th</td> <td>Cancer</td> <td>1118159</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>fresheggs</td> <td>W610</td> <td>Nov 5th</td> <td>Scorpio</td> <td>1038818</td> </tr> <tr> <!-- 奇数行 --> <td>girlwing</td> <td>W210</td> <td>Sep 16th</td> <td>Virgo</td> <td>1307994</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>tastestory</td> <td>W15</td> <td>Nov 29th</td> <td>Sagittarius</td> <td>1095245</td> </tr> <tr> <!-- 奇数行 --> <td>lovehate</td> <td>W47</td> <td>Sep 5th</td> <td>Virgo</td> <td>6098017</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>slepox</td> <td>W19</td> <td>Nov 18th</td> <td>Scorpio</td> <td>0658635</td> </tr> <tr> <!-- 奇数行 --> <td>smartlau</td> <td>W19</td> <td>Dec 30th</td> <td>Capricorn</td> <td>0006621</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>shenhuanyan</td> <td>W25</td> <td>Jan 31th</td> <td>Aquarius</td> <td>0621827</td> </tr> <tr> <!-- 奇数行 --> <td>tuonene</td> <td>W210</td> <td>Nov 26th</td> <td>Sagittarius</td> <td>0091704</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>ArthurRivers</td> <td>W91</td> <td>Feb 26th</td> <td>Pisces</td> <td>0468357</td> </tr> <tr> <!-- 奇数行 --> <td>reconzansp</td> <td>W09</td> <td>Oct 13th</td> <td>Libra</td> <td>3643041</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>linear</td> <td>W86</td> <td>Aug 18th</td> <td>Leo</td> <td>6398341</td> </tr> <tr> <!-- 奇数行 --> <td>laopiao</td> <td>W41</td> <td>May 17th</td> <td>Taurus</td> <td>1254004</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>dovecho</td> <td>W19</td> <td>Dec 9th</td> <td>Sagittarius</td> <td>1892013</td> </tr> <tr> <!-- 奇数行 --> <td>shanghen</td> <td>W42</td> <td>May 24th</td> <td>Gemini</td> <td>1544254</td> </tr> <tr class="altrow"> <!-- 偶数行 --> <td>venessawj</td> <td>W45</td> <td>Apr 1st</td> <td>Aries</td> <td>1523753</td> </tr> <tr> <!-- 奇数行 --> <td>lightyear</td> <td>W311</td> <td>Mar 23th</td> <td>Aries</td> <td>1002908</td> </tr> </table> </body> </html>
获取jquery包装集对象 获取jsDOM对象 jsDOM对象转为jquery对象 jquery对象转为jsDOM对象
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <!-- 获取jquery包装集对象 $("选择器") 如果元素不存在,不会返回null,会返回空的query对象,根据length==0来判断是否获取成功 获取jsDOM对象 document.getElement.... 如果元素不存在,返回null,根据==null判断是否获取到DOM对象 jsDOM对象转为jquery对象 $(js对象) jquery对象转为jsDOM对象 jq对象[索引] jq对象.get() 注意: 1.jsDOM对象与jq对象不能互相调用其方法 2.jq的函数只能jq对象能够调用 --> <div id="box">box</div> <script> //DOM var js_obj = document.getElementById("box"); console.log(js_obj); //jq var jq_obj =$("#box"); console.log(jq_obj.length); //js-jq console.log($(js_obj)); //jq-js console.log(jq_obj[0]); console.log(jq_obj.get(0)); </script> </body> </html>
jquery选择器: 基础选择器 层次选择器
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <div id="box"> <div class="item1"> 我是div1 <p class="red">div1的p1</p> <p>div1的p2</p> </div> <div> 我是div2 <p class="red">div2的p1</p> <p>div1的p2</p> </div> <div> 我是div3 <p class="red">div3的p1</p> <p>div3的p2</p> </div> </div> <!-- jquery选择器: 选中某个|组元素 分类: 基础选择器 id选择器 #id $("#testDiv")选择id为testDiv的元素 元素名称选择器 element $("div")选择所有div元素 类选择器 .class $(".blue")选择所有class=blue的元素 选择所有元素 * $("*")选择⻚⾯所有元素 组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 层次选择器 后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素 ⼦代选择器 parent > child $("#parent>div")选择id为parent的直接div⼦元素 相邻选择器 prev + next $(".blue + img")选择css类为blue的下⼀个img元素 同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素 --> <script> /*基础选择器*/ /*id选择器*/ console.log($("#box")); //元素名称选择器 console.log($("div")); /*类选择器*/ console.log($(".red")); /*通配符选择器*/ console.log($("*")); //组合选择器 console.log($("#box,.red")); //层次选择器 //后代选择器 : 所有满足条件的子元素 console.log($("body div")); //⼦代选择器 : 满足条件的直接子元素 console.log($("body>div")); //相邻选择器 console.log($(".item1+div")); //同辈选择器 console.log($(".item1~div")); </script> </body> </html>
jquery选择器: 表单选择器: 属性选择器: 过滤选择器:
复制代码
头像:
头像:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> <style> /*html中主要存在abc属性的元素就被选中*/ /*[abc]{ background: red; }*/ /*input标签中主要存在abc属性的元素就被选中*/ input[abc]{ background: red; } </style> </head> <body> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled" /> 姓名:<input type="text" id="uname" name="uname" abc="123"/><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来⾃:<select id="ufrom" name="ufrom" abc="123"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select ><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/> <button type="submit" οnclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <!-- 表单选择器 表单选择器 :input 查找所有的input元素：$(":input")； 注意：会匹配所有的input、textarea、select和button元素。 ⽂本框选择器 :text 查找所有⽂本框：$(":text") 密码框选择器 :password 查找所有密码框：$(":password") 单选按钮选择器 :radio 查找所有单选按钮：$(":radio") 复选框选择器 :checkbox 查找所有复选框：$(":checkbox") 提交按钮选择器 :submit 查找所有提交按钮：$(":submit") 图像域选择器 :image 查找所有图像域：$(":image") 重置按钮选择器 :reset 查找所有重置按钮：$(":reset") 按钮选择器 :button 查找所有按钮：$(":button") ⽂件域选择器 :file 查找所有⽂件域：$(":file") 属性选择器: [属性名]包含这个属性的被选中 [属性名="属性值"] 包含指定属性=指定值的元素被选中 过滤选择器: --> <script> /*表单选择器*/ console.log($(":input")); //单选框 console.log($(":radio")); //属性选择器 console.log($("[abc]")); console.log($("input[abc]")); console.log($("input[abc=123]")); </script> </body> </html>
复制代码
头像:
头像:
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> <style> /*html中主要存在abc属性的元素就被选中*/ /*[abc]{ background: red; }*/ /*input标签中主要存在abc属性的元素就被选中*/ input[abc]{ background: red; } </style> </head> <body> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled" /> 姓名:<input type="text" id="uname" name="uname" abc="123"/><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>⼩屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来⾃:<select id="ufrom" name="ufrom" abc="123"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select ><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/> <button type="submit" οnclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <!-- 表单选择器 表单选择器 :input 查找所有的input元素：$(":input")； 注意：会匹配所有的input、textarea、select和button元素。 ⽂本框选择器 :text 查找所有⽂本框：$(":text") 密码框选择器 :password 查找所有密码框：$(":password") 单选按钮选择器 :radio 查找所有单选按钮：$(":radio") 复选框选择器 :checkbox 查找所有复选框：$(":checkbox") 提交按钮选择器 :submit 查找所有提交按钮：$(":submit") 图像域选择器 :image 查找所有图像域：$(":image") 重置按钮选择器 :reset 查找所有重置按钮：$(":reset") 按钮选择器 :button 查找所有按钮：$(":button") ⽂件域选择器 :file 查找所有⽂件域：$(":file") 属性选择器: [属性名]包含这个属性的被选中 [属性名="属性值"] 包含指定属性=指定值的元素被选中 过滤选择器: --> <script> /*表单选择器*/ console.log($(":input")); //单选框 console.log($(":radio")); //属性选择器 console.log($("[abc]")); console.log($("input[abc]")); console.log($("input[abc=123]")); </script> </body> </html>
操作属性: 分类: 区别: attr 与 prop 获取属性值 设置属性值 移出属性
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <form action="" id="myform"> <input type="checkbox" name="ch" value="aaaa" haha="hahahahha"/> aa <input type="checkbox" name="ch" value="bbbb" haha="hehehehhe" checked="checked"/> bb </form> <!-- 操作属性: 分类: 固有属性 : 标签提供的属性 固有属性 : src,href... 共有属性 : id,class,name... 自定义属性 : abc haha boolean属性 : checked selected disabled 区别: attr 与 prop 1.attr可以操作固有属性,自定义属性 prop只能操作固有属性 2.attr 操作布尔属性(checked),得到的属性值为属性设置的值 checked = 'checked' prop 操作布尔属性(checked),得到的结果为true|false 获取属性值 attr(属性名称) 获取指定的属性值，操作 checkbox 时，选中返回 checked，没有选中返回 undefined。attr('checked')attr('name') prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked') 设置属性值 attr(属性名称，属性值)设置指定的属性值， 操作 checkbox 时， 选中返回 checked， 没有选中返回 undefined。 attr('checked',’checked’) attr('name',’zs’) prop(属性名称，属性值) 设置具有true和false的属性值 prop('checked',’true 移出属性 removeAttr(属性名) 移除指定的属性 removeAttr('checked') --> <script> //获取属性值 //操作布尔属性 console.log($("input[type='checkbox']:even").attr("checked")); //checked console.log($("input[type='checkbox']:odd").attr("checked")); //undefined console.log($("input[type='checkbox']:even").prop("checked")); //true console.log($("input[type='checkbox']:odd").prop("checked")); //false //固有属性 console.log($("input[type='checkbox']:even").attr("value")); //aaaa console.log($("input[type='checkbox']:odd").attr("value")); //bbbb console.log($("input[type='checkbox']:even").prop("value")); //aaaa console.log($("input[type='checkbox']:odd").prop("value")); //bbbb //自定义属性 console.log($("input[type='checkbox']:even").attr("haha")); //hahahaha console.log($("input[type='checkbox']:odd").attr("haha")); //hahahaha console.log($("input[type='checkbox']:even").prop("haha")); //undefined console.log($("input[type='checkbox']:odd").prop("haha")); //undefined //设置属性 //设置默认选中 //$("input[type='checkbox']:even").attr("checked","checked"); //$("input[type='checkbox']:odd").prop("checked",true); //取消被选中状态 //$("input[type='checkbox']:odd").prop("checked",false); //$("input[type='checkbox']:odd").prop("checked",null); $("input[type='checkbox']:odd").removeAttr("checked"); $("input[type='checkbox']:odd").removeAttr("haha"); $("input[type='checkbox']:odd").removeAttr("name"); </script> </body> </html>
操作元素样式
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作元素样式</title> <!--引入jq--> <script src="js/jquery-3.6.0.min.js"></script> <style type="text/css"> div{ padding: 8px; width: 180px; } .blue{ background: skyblue; } .larger{ font-size: 30px; } .green { background : green; } .weight{ font-weight: bolder; } </style> </head> <body> <h3>css()⽅法设置元素样式</h3> <div id="conBlue" class="blue larger">天蓝⾊</div> <div id="conRed">⼤红⾊</div> <div id="remove" class="blue larger">天蓝⾊</div> <!-- attr("class") 获取class属性的值，即样式名称 attr("class","样式名") 修改class属性的值，修改样式 addClass("样式名") 添加样式名称 css() 添加具体的样式 removeClass(class) 移除样式名称 --> <script> console.log($("#conBlue").attr("class")); //addClass $("#conBlue").addClass("weight"); //添加指定属性,如果原标签中已经存在,覆盖原有的值列表 //$("#conBlue").attr("class","weight"); $("#conBlue").removeClass("larger"); $("#conBlue").css("font-style","italic"); </script> </body> </html>
获取元素的html内容 获取元素的⽂本内容，不包含html
复制代码
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
33
34
35
36
37
38
39
40
41
42
43<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <h3 id="title"><span>html()和text()⽅法设置元素内容</span></h3> <div id="html"></div> <div id="text"></div> <input type="text" name="uname" value="oop" /> <!-- html() 获取元素的html内容 text() 获取元素的⽂本内容，不包含html html("html, 内容") 设定元素的html内容 text("text 内容") 设置元素的⽂本内容，不包含html val() 获取元素value值 val("值") 设定元素的value值 html 与 text之间的区别: html可以识别纯文本,以及html标签结构 text只能识别存储本 --> <script> //操作纯文本 $("#html").html("你好html"); $("#text").text("你好text"); //带有html标签结构 $("#html").html("<h3 style='background: salmon'>你好html</h3>"); $("#text").text("<h3 style='background: salmon'>你好text</h3>"); console.log( $("#title").html()); console.log( $("#title").text()); $("[type='text']").val("哈哈哈"); console.log( $("[type='text']").val()); </script> </body> </html>
创建于添加 删除元素 遍历元素
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.min.js"></script> <style> #box{ border : 3px saddlebrown dashed; } </style> </head> <body> <div id="box"> <div class="item1">内容1</div> <div class="item2">内容2</div> </div> <!-- 创建于添加 创建元素 $('创建内容') 添加元素 prepend(content) 在被选元素内部的开头插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(content).prependTo(selector) 把 content 元素或内容加⼊ selector 元素开头 append(content) 在被选元素内部的结尾插⼊元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。 $(content).appendTo(selector) 把 content元素或内容插⼊selector 元素内，默认是在尾部 before() 在元素前插⼊指定的元素或内容:$(selector).before(content) after() 在元素后插⼊指定的元素或内容:$(selector).after(content) 删除元素 remove() 删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。 empty() 清空所选元素的内容 遍历元素 $(selector).each(function(index,element)) :遍历元素 参数 function 为遍历时的回调函数， index 为遍历元素的序列号，从 0 开始。 element是当前的元素，此时是dom元素。 --> <script> //创建元素 var ele = $('<p id="p1"><span>你好span</span>你好p1</p>'); //添加元素 //$("#box").prepend(ele); $("#box").prepend("<p>p2</p>"); ele.prependTo($("#box")); $("#box").before("<div>box前面</div>"); //删除元素 //$("#box").empty(); //$("#box").remove(); //遍历所有div $("div").each(function (index,element) { console.log(index+'---->'+element); console.log($(element)); }); </script> </body> </html>
链式绑定 1.ready 加载事件-> window.onload 2.bind 绑定事件
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.min.js"></script> <script> /*js*/ window.onload = function(){ document.getElementById("btn").style.background = "red"; } /*jq*/ //1) $(function(){ $("#btn").css("background","green"); //bind /*$("#btn").bind("click",function(){ alert("hahaha"); })*/ //链式绑定 $("#btn").bind("click",function(){ alert("hahaha"); }).bind("mouseover",function(){ console.log("移入"); }); $("#btn").bind({ "click":function(){ console.log("点击事件"); }, "mousemove":function(){ console.log("移动了"); } }) }) </script> </head> <body> <!-- 1.ready 加载事件-> window.onload $(function(){}) $(document).ready(function(){}) window.onload : 待DOM结构,与资源全部加载完成之后触发 ready : 待DOM结构载完成之后触发 2.bind 绑定事件 bind("事件名称",function(){ 触发函数 }) --> <button id="btn" type="button">按钮</button> <img src="images/pexels-photo-5957341.jpeg" alt=""> </body> </html>
ajax 异步请求
复制代码
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <!-- ajax 异步请求 ***** $.ajax({ -> 配置请求的参数设置 type : 请求方式 "GET|POST", url : "请求服务器的位置", data : 请求数据, dataType : 预期的服务器响应数据的类型 json,text,html, success : function(data){ 请求成功后的回调函数 参数data: 服务器响应的数据 }, error : function(){ 请求失败后的回调函数 } }); --> <button id="btn" type="button">按钮</button> <form action=""> <input type="text" name="uname" value="zhangsan"> 用户名 <input type="password" name="upwd" value="1234"> 用户密码 </form> <script> $("#btn").bind("click",function(){ console.log($("form").serialize()); $.ajax({ type : "GET", url : "js/data.json", /*data : { "name" : "zhangsan", age : 18 },*/ data :$("form").serialize() , /*表单提交*/ dataType : "JSON", success : function (data) { console.log(data); console.log(data.code); console.log(data.message); console.log(data.result); }, error : function () { console.log("请求失败!!!!"); } }); /* //GET : 请求json⽂件,传递参数,拿到返回值 $.get('js/data.json',{name:"tom",age:100},function(data){ console.log(data); }); //POST : 请求json⽂件,传递参数,拿到返回值 $.post('js/data.json',{name:"tom",age:100},function(data){ console.log(data); });*/ //响应结果固定为json /*$.getJSON('js/data.json',{name:"tom",age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 })*/ }); </script> </body> </html>
最后
以上就是感性溪流最近收集整理的关于jQuery入门基础的全部内容，更多相关jQuery入门基础内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复