Jquery学习
1 1.JQUERY简介
2
3 jQuery就是一个轻量级JavaScript函数库,是对JavaScript进行了封装,简化了开发。
4
5 (内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的)
6
7 2.两个遍历函数MAP和EACH
8
9 $.MAP(ARRAY,FN)//遍历、修改数组
10
11 • 对数组array中的每个元素调用方法fn进行处理
12
13 • 返回值为处理后的一个新数组,原数组不变。
14
15 1.4.1不能处理Dictionary风格数组,1.7.1可以
16
17 应用举例:
18
19 var arr = [1, 3, 5, 7, 9];
20
21 var newarr = $.map(arr, function (arri, i, arg) {
22
23 if (arri < arg) {
24
25 return arri * 2;
26
27 }
28
29 else {
30
31 return arri ;
32
33 }
34
35 }, 7);
36
37 //map:第一参数:数组。第二个参数:遍历集合中每个元素时候执行的一个回调函数,第三个参数:是给回调函数传递参数用的,可以省略
38
39 var newarr1 = $.map(arr, function (arri) {
40
41 if (arri < 7) {
42
43 return arri * 2;
44
45 }
46
47 else {
48
49 return arri;
50
51 }
52
53 });
54
55 原理模拟:
56
57 function myMap(arr, func, arg) {
58
59 var arrtemp=[];
60
61 for (var i = 0; i < arr.length; i++) {
62
63 if(func(arr[i])){
64
65 arrtemp[arrtemp.length] = func(arr[i],i,arg);
66
67 //或者
68
69 // arrtemp.push(func(arr[i]));
70
71 //压栈
72
73 }
74
75 }
76
77 return arrtemp;
78
79 }
80
81 $.EACH(ARRAY,FN)
82
83 • 对数组arry每个元素调用fn函数进行处理,没有返回值。
84
85 • fn函数有两个参数:key,value。对于普通数组key就是索引。可以直接在fn中使用this
86
87 • 一般都是对数据的遍历。【除非key、value中,value是引用类型否则不能修改数组,修改请用$.map()方法。】
88
89 • 普通数组推荐用无参,用dict风格的就用key、value。
90
91 与map函数相对应,主要处理键值对型的数组;
92
93 参数:第一个:要处理的数据源数组,第二个参数:处理数组中每个元素的回调函数【第一个参数是:key,第二个是元素的value】
94
95 如果在each 方法中 其中一个 回调函数返回了false,那么就不再继续往下执行了。所以可以用return false来退出循环。
96
97 应用举例:
98
99 $.each(arr, function (key, value) {
100
101 alert("key:" + key + " --- value:" + value);
102
103 if (key == "age") {
104
105 return false;
106
107 }
108
109 });
110
111 原理模拟:
112
113 function myEach(arry,callback) {
114
115 for (var i = 0; i < arry.length; i++) {
116
117 var result = callback(i, arry[i]);
118
119 if (result == false) {
120
121 break;
122
123 }
124
125 }
126
127 }
128
129 3.JQUERY和DOM对象的区别.
130
131 (1)对象的差异
132 Dom对象 var ele = document.getElementById("btn1");
133
134 jQuery对象 var jq = $(ele);
135
136 //把dom对象封装成jQuery对象的方法;
137
138 //当然,一般也不用这样麻烦的封装jq对象,因为我们有选择器;
139
140 //jQuery对象只能调用jQuery封装的方法,不能调用 dom对象原生的属性或者方法了。
141
142 (2)窗口加载的区别:
143 //window.onload事件执行是在:页面上所有的元素都加载完成后(指的:全部下载显示完毕),才出发此事件的执行。
144
145 //有可能页面中一些较大的图片或者是flash等阻塞了 js事件响应方法的执行,导致了页面的一些效果展示给用户的时候响应速度非常低
146
147 //用户体验不是很好。
148
149 onload = function () {
150
151 alert("我是onload,在页面完全加载后执行,是最后的那个");
152
153 };
154
155 //第一种方式:打酱油的
156
157 $(document).ready(function () {
158
159 alert("我是打酱油的,但我却是第一的!");
160
161 });
162
163 //方式二:
164
165 //jQuery注册的方法都是多播委托的形式
166
167 //给文档加载完成【绑定】事件
168
169 $(function () {
170
171 alert("我是楼上酱油帝的真相,我也是酱油帝的多播委托,我第二哦!");
172
173 });
174
175 $(function () {
176
177 alert("我是楼上的多播委托,我也比onload快!");
178
179 });
180
181 (3)JQUERY对象和DOM对象相互转换
182 1.DOM à Jquery :var dom = $v1.get(0); 或者 var dom = $v1[0];
183
184 2.Jquery à DOM :var jq = $( dom);
185
186
187
188 4.JQUERY的DOM操作
189
190 //一般情况下,不传参数就是取里面的值,传参数就代表设置数据到 dom元素上去。
191
192 //===================val()=======================//
193
194 alert($("#txt").val());
195
196 //val()是$里获得value的方法
197
198 $("#txt").val("我是设置的值");
199
200 //设置value的方法
201
202 //=====================text()===========================//
203
204 //$里.click是获得onclick效果的方法
205
206 alert($("#divText").text());//获取div里面的文本内容
207
208 $("#divText").text("我替换了div里的文本内容")//替换div里面的文本内容
209
210 //=====================html()===========================//
211
212 alert($("#divText").html());
213
214 $("#divText").html("<p>我是后来添加的p标签</p>");
215
216 //=====================css()===========================//
217
218 $("#divText").css("color","green");
219
220 //=====================attr()设置属性==================//
221
222 alert($("#divText").attr("aaa"));
223
224 $("#divText").attr("aaa","bbb")
225
226 //============================================================//
227
228 另外:使用removeAttr删除属性。删除的属性在源代码中看不到,清空属性。attr(‘name’,’’)的话,该属性在源代码中依然存在
229
230 追加元素的方法
231
232 子元素.appendTo(父元素);//主动巴结!到最后一个
233
234 子元素.prependTo(父元素);//主动巴结到第一个。
235
236 (*)A.insertBefore(B);将A插入到B的前面,等同于B.before(A);
237
238 (*)X.insertAfter(Y);将X插入到Y的后面,等同于Y.after(X);
239
240 删除元素的方法
241
242 emptys();
243
244 清空某元素下的所有子节点
245
246 内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}
247
248 元素.remove(expr)
249
250 删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下:
251
252 var lis = $("#ulSite li").remove();
253
254 $("#ulSite2").append(lis);
255
256 经典案例:动态创建表格
257
258 var data = [{ name: "百度", url: "http://www.baidu.com" },
259
260 { name: "新浪", url: "http://www.sina.com.cn" },
261
262 { name: "传智播客", url: "http://www.itcast.cn" }];
263
264 var strHtml = "";
265
266 for (var i = 0; i < data.length; i++) {
267
268 strHtml += "<tr>";
269
270 strHtml += "<td>" + data[i].name + "</td><td>" + data[i].url + "</td>";
271
272 strHtml += "</tr>";
273
274 }
275
276 //动态创建表格
277
278 $("table:first").html(strHtml);
279
280 经典案例:10秒之后跳转
281
282 <input type="button" id="btn" value="请仔细阅读协议(5s)" disabled="disabled"/>
283
284 $(function () {
285
286 var sec = 4;
287
288 var intervalId = setInterval(function() {
289
290 if (sec > 0) {
291
292 $("#btn").val("请仔细阅读协议("+sec+"s)");//将按钮的计数 数字-1
293
294 sec--; } else {
295
296 $("#btn").attr("disabled", false).val("同意");
297
298 clearInterval(intervalId);//计数完成后,移除 计数器 }
299
300 }, 1000); });
301
302 JQUERY链式编程:
303
304 由于每次操作的$对象,返回的都是当前的$对象,所以可以直接调用$对象的方法。例如:$("#myId").css().text();
305
306 例子:评分控件
307
308 1.获取兄弟元素的几个方法
309
310 next(); 当前元素之后的紧邻着的第一个兄弟元素(下一个)
311
312 nextAll();当前元素之后的所有兄弟元素
313
314 prev();当前元素之前的紧邻着的兄弟元素(上一个)
315
316 prevAll();当前元素之前的所有兄弟元素
317
318 siblings();当前元素的所有兄弟元素
319
320 $(function() {
321
322 $("td").mouseenter(function() {
323
324 //当鼠标移进来之后,把当前的五角星设置为 实体的,然后之前的设置为实体的,之后的设置为空心的
325
326 $(this).text("★").prevAll("td").text("★").end().nextAll("td").text("☆");
327
328 //end()方法是将当前的函数计算的结果返回到最近一次破坏传递的集合的地方去。 //回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。
329
330 }).css("cursor", "pointer"); });
331
332 Html中自己写一个talbe,td用☆表示就可以实现效果啦。
333
334 2.基本过滤选择器
335
336 :first 选取第一个元素。$("div:first")选取第一个<div>
337
338 :last 选取最后一个元素。$("div:last")选取最后一个<div>
339
340 :not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
341
342 :even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
343
344 :eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
345
346 $(":header")选取所有的h1……h6元素(*)
347
348 $("div:animated")选取正在执行动画的<div>元素。 (*)
349
350 例子:第一行是表头,所以显示大字体(fontSize=30),
351
352 最后一行是汇总,所以显示红色字体。正文的前三行是前三名,所以显示傻大的字体(22)表格的偶数行是红色色背景[非最后一行]。
353
354 $("table tr:first").css('fontSize', "30px");
355
356 //最后一行是汇总,所以显示红色字体
357
358 $("table tr:last").css('color', "red");
359
360 //正文的前三行是前三名,所以显示傻大的字体(22),注意这里的索引是从0开始的
361
362 //1,2,3 执行的时候,gt(0)之后就直接将第0个抛弃后,再进行后面的过滤
363
364 $("table tr:gt(0):lt(3)").css("fontSize", 22);
365
366 //表格的偶数行是红色色背景【非最后一行】
367
368 $("table tr:not(:last):even").css("backgroundColor", "red");
369
370 不仅可以使用选择器进行进行绝对定位,还可以进行相对定位,只要在$()指定第二个参数,第二个参数为相对的元素.
371
372 $( “ul”, $(this) ).css(“background”, “red”);
373
374 $(选择器,context);例如:$(‘td’,$(‘div table tr’));
375
376 context参数可以是用dom对象集合或jQuery对象
377
378 默认如果不传递context则,会在整个文档中搜索。
379
380 属性过滤器
381
382 $("div[id]")选取有id属性的<div>
383
384 $("div[title=test]")选取title属性为“test”的<div>,jQuery中没有对getElementsByName进行封装,用$("input[name=abc]")
385
386 $("div[title!=test]")选取title属性不为“test”的<div>
387
388 还可以选择开头[name^=值]、结束[ name$=值]、包含[ name*=值]等,条件还可以复合。[[属性1=a][属性2=b]…](*)
389
390 //搜索 当前页面中所有的div中带有 id属性的标签
391
392 $("div[id]").css("backgroundColor", "red");
393
394 //给带有 name属性 并且值=xiaoyang的 div标签设置 字体颜色为绿色
395
396 $("div[name='xiaoyang']").css("color", "green");
397
398 //给div中 带有name属性并且 以 x开头的标签选择出来,并设置字体 为 30px
399
400 $("div[name^='x']").css('fontSize', 30);
401
402 //属性复合 选择过滤: 是一个并且的过滤
403
404 $("div[name^='xia'][shit]").css("fontSize","50px");
405
406 5.表单选择器
407
408 $("#form1:enabled")选取id为form1的表单内所有启用的元素
409
410 $("#form1:disabled")选取id为form1的表单内所有禁用的元素
411
412 $("input:checked")选取所有选中的元素(Radio、CheckBox)
413
414 $("select:selected")选取所有选中的选项元素(下拉列表)
415
416 //从整个Select标签 去拿到 选择的属性值 是从val()拿的。 如果使用text会把select下面的所有的选项的text拿到。
417
418 经典案例:全选 全不选 反选
419
420 $(":button[value='全选']").click(function() {
421
422 $(":checkbox").attr("checked",true); });
423
424 $(":button[value='全不选']").click(function () {
425
426 $(":checkbox").attr("checked", false); });
427
428 //反选
429
430 $(":button[value='反选']").click(function () {
431
432 $(":checkbox").each(function (i, v) {
433
434 //在each函数内部的 调用的callback函数中 的this指向的是当前的遍历的元素
435
436 $(v).attr("checked", !$(v).attr("checked"));
437
438 /this===v 返回 true }); });
439
440 单选框的处理:
441
442 <input type="button" value="获取 性别的 选择的值" id="btnGetRadioValue"/>
443
444 <hr/>
445
446 <input type="radio" value="1" name="gender"/>男
447
448 <input type="radio" value="2" name="gender"/>女
449
450 <input type="radio" value="3" name="gender" />曾哥
451
452 <hr/>
453
454 <input type="radio" name="other" value="2"/>shit
455
456 $("#btnGetRadioValue").click(function() {
457
458 //获取单选组的值 alert($(":checked[name='gender']").val());
459
460 alert($("input[name='gender']:checked").val());
461
462 //给单选组 设置 值 $("input[name='gender']").val(["1"]);
463
464 });
465
466 6.样式操作
467
468 获取样式 attr("class"),设置样式attr("class","myclass"),追加样式addClass("myclass")(不影响其他样式),移除样式removeClass("myclass"),切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式:hasClass("myclass")
469
470 案例:网页开关灯的效果
471
472 <style type="text/css">
473
474 .dark
475
476 {
477
478 background-color:Black;
479
480 }</style>
481
482 <script type="text/javascript">
483
484 $(function() {
485
486 $("#btn").click(function() {
487
488 $("body").toggleClass("dark");
489
490 }); }); </script>