JQuery--基础
推荐一本不错的数《锋利的jQuery》，还有官方jQuery的API
一.隐式迭代
与原生js相比，jQuery的隐式迭代方便很多：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="lib/jquery-1.12.2.js"></script> 7 <script> 8 // window.onload = function{ 9 // var btns = document.getElementsByName('button'); 10 // for (var i = 0; i < btns.length; i++) { 11 // btns[i].onclick = function () { 12 // alert('xxx'); 13 // } 14 // } 15 // } 16 17 18 $(function () { 19 // 隐式迭代 20 $('button').click(function () { 21 alert('xx'); 22 }); 23 }); 24 </script> 25 </head> 26 <body> 27 <button>按钮</button> 28 <button>按钮</button> 29 <button>按钮</button> 30 <button>按钮</button> 31 <button>按钮</button> 32 <button>按钮</button> 33 </body> 34 </html>
二.入口函数
原生JS如果重复了window.onload = function(){} 的话，后一个会由于 = 号赋值的原因，后一个的window.onload会覆盖前一个window.onload
1 /*写法1*/ 2 $(function () { 3 alert('JQ入口函数1'); 4 }); 5 /** 6 * JavaScript的入口函数（浏览器加载） 7 * 要等到页面的所有资源（包括文件，图片）加载完成才开始执行 8 * jQuery的入口函数() 9 * 只会等到文档树加载完成就开始指向，并不会等待图片，文件的加载 10 * */ 11 // 写法2：完整写法 12 $(document).ready(function () { 13 alert('JQ入口函数1'); 14 }); 15 /*写法3：下面写法可以执行，但是不推荐 16 $().ready(function () { 17 18 });*/ 19 20 // 不会发生后一个覆盖前一个的情况因为每一个函数里面有自己的作用域
三.jQuery对象与DOM对象
（1）区别
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload = function(){ 8 var btns = document.getElementsByTagName('button'); 9 console.log(btns); //__proto__ 是HTMLCollection 10 } 11 </script> 12 <script src="lib/jquery-1.12.2.js"></script> 13 <script> 14 15 /** 16 * jQ对象和DOM对象的方法属性不能通用 17 * 18 * JQ经过JQ包装过，jQ对象会比DOM对象功能更多， 19 * 20 * */ 21 $(function () { 22 // 在前端命名习惯里，为了区别原生DOM对象和JQ对象 23 // 一般JQ对象前我们会添加一个$符号作为标识区别 24 var $btns = $("button"); 25 console.log($btns); // 她的__proto__ 是JQ的Object 26 27 }); 28 </script> 29 </head> 30 <body> 31 <button>按钮</button> 32 <button>按钮</button> 33 <button>按钮</button> 34 <button>按钮</button> 35 <button>按钮</button> 36 </body> 37 </html>
(2)jQuery与DOM对象互相转换
1 虽然JQ和DOM对象方法属性不通用，但是我们可以转换对象 2 JQ对象转DOM对象 3 $(selector)[索引值] 4 $(selector).get(索引值) 5 DOM对象转JQ对象 6 $(DOM对象);
四.jQuery开关灯效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .video-box{ 8 width: 1000px; 9 height: 460px; 10 background-color: deepskyblue; 11 margin:50px auto; 12 } 13 body.night{ 14 background-color: #333; 15 color: #fff; 16 } 17 body.night .btn{ 18 background: greenyellow; 19 border:2px solid darkslategray; 20 color: #2e2e2e; 21 } 22 </style> 23 <script src="lib/jquery-1.12.2.js"></script> 24 <script> 25 /** 26 * 类操作： 可操作一个或者多个类 27 * 添加 28 * .addClass() 29 * 删除 30 * .removeClass() 31 * 切换 32 * .toggleClass() 33 * 34 * 实现页面效果的时候，能通过类操作，最好通过类实现页面效果 35 * */ 36 $(function () { 37 $('.btn').click(function () { 38 // 可以添加一个或者多个类 39 $('body').toggleClass('night'); 40 }); 41 }); 42 </script> 43 </head> 44 <body> 45 <button class="btn">开关灯</button> 46 <h1>还有一个页面文字</h1> 47 <div class="video-box"></div> 48 </body> 49 </html>
