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>