jq的基本结构
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 7 <script type="text/javascript"> 8 /* 9 1.JQ的本质是一个闭包 10 2.JQ为什么要用闭包来实现？ 11 为了避免多个框架的冲突 12 3.JQ如何让外界访问内部定义的局部变量 13 window.xxx = xxx; 14 4.JQ为什么要给自己传递一个window参数 15 为了方便后期压缩代码 16 为了提升查找的效率 17 5.JQ为什么要给自己接收一个undefinde 18 为了方便后期压缩代码 19 -IE9以下的浏览器undefined可以被修改，所以需要接收一个正确的undefined 20 21 */ 22 23 //JQ方法 24 (function (window,undefined){ 25 var jQuery = function(){ 26 return new jQuery.prototype.init(); 27 } 28 29 jQuery.prototype = { 30 constructor : jQuery; 31 } 32 33 jQuery.prototype.init.prototype = jQuery.prototype; 34 //变成了全局变量 35 window.jQuery = window.$ =jQuery; 36 })(window); 37 38 //原生JS 39 (function f1(){ 40 var num = 10; 41 //将局部变量变成全局变量 42 window.num = num; 43 })();//引用该函数 44 45 (function f2(){ 46 var num = 20; 47 })(); 48 console.log(num);//10 49 </script> 50 </head> 51 <body> 52 53 </body> 54 </html>
自定义的JQ基本结构
1 (function (window,undefined){ 2 var ajQuery = function(){ 3 return new ajQuery.prototype.init(); 4 } 5 6 ajQuery.prototype = { 7 constructor : ajQuery; 8 } 9 10 ajQuery.prototype.init.prototype = ajQuery.prototype; 11 //变成了全局变量 12 window.ajQuery = window.$ = ajQuery; 13 })(window);
JQ入口函数测试
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script type="text/javascript" src="../js/jquery-1.12.4.js"></script> 6 <script type="text/javascript"> 7 /* 8 jq入口函数传入不同参数得到的实例 9 1.传入‘’ null undefined NaN 0 false 10 2.传入html片段 11 3.传入选择器 12 4.传入数组 13 5.传入伪数组 14 6.传入对象 15 7.传入DOM元素 16 8.传入基本数据类型 17 */ 18 19 //1.传入‘’ null undefined NaN 0 false 20 //会返回一个空的JQ对象，而且都是一样的 21 // console.log($()); 22 // console.log($('')); 23 // console.log($(null)); 24 // console.log($(undefined)); 25 // console.log($(NaN)); 26 // console.log($(0)); 27 // console.log($(false)); 28 29 //2.传入html片段 30 //先传入DOM元素，会将创建好的DOM元素存储到JQ对象中返回，控制台会看到两个p标签 31 console.log($('<p>11</p><p>22</p>')); 32 33 //3.传入选择器 34 //会将找到的所有元素存储到JQ对象中返回 35 console.log($('li')); 36 37 // 4.传入数组 38 //会将数组中的元素依次存储到JQ对象中返回 39 console.log($([1,2,3,4,5,6])); 40 41 // 5.传入伪数组 42 //会将数组中的元素依次存储到JQ对象中返回 43 var likeArr = {0:"coco",1:"jelly",length:2}; 44 console.log(likeArr); 45 46 // 6.传入对象 47 //会将传入的对象存储到JQ对象中返回 48 function Person(){} 49 console.log($(new Person())); 50 51 // 7.传入DOM元素 52 //会将传入的对象存储到JQ对象中返回 53 console.log($(document.createElement('div'))); 54 55 // 8.传入基本数据类型 56 //会将传入的数据类型存储到JQ对象中返回 57 console.log($(123)); 58 console.log($(true)); 59 60 /* 61 1.传入 '' null undefined NaN 0 false, 返回空的jQuery对象 62 2.字符串: 63 代码片段:会将创建好的DOM元素存储到jQuery对象中返回 64 选择器: 会将找到的所有元素存储到jQuery对象中返回 65 3.数组: 66 会将数组中存储的元素依次存储到jQuery对象中立返回 67 4.除上述类型以外的: 68 会将传入的数据存储到jQuery对象中返回 69 */ 70 71 </script> 72 </head> 73 <body> 74 <ul> 75 <li>ul中的li</li> 76 </ul> 77 </body> 78 </html>
apply和call的区别 https://www.jianshu.com/p/80ea0d1c04f8
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03-apply和call方法</title> 6 <script> 7 /* 8 apply和call方法的作用: 9 专门用于修改方法内部的this 10 11 格式: 12 call(对象, 参数1, 参数2, ...); 13 apply(对象, [数组]); 14 */ 15 function test() { 16 console.log(this); 17 } 18 // window.test(); 19 var obj = {"name": "lnj2"}; 20 /* 21 1.通过window.test找到test方法 22 2.通过apply(obj)将找到的test方法内部的this修改为自定义的对象 23 */ 24 // window.test.apply(obj); 25 // window.test.call(obj); 26 27 function sum(a, b) { 28 console.log(this); 29 console.log(a + b); 30 } 31 // window.sum.call(obj, 1, 2); 32 /* 33 1.通过window.sum找到sum方法 34 2.通过apply(obj)将找到的sum方法内部的this修改为自定义的对象 35 3.将传入数组中的元素依次取出, 传递给形参 36 */ 37 // window.sum.apply(obj, [3, 5]); 38 39 // var arr = []; 40 // arr.push(1); 41 // console.log(arr); 42 43 // 真数组转换伪数组的一个过程 44 // var arr = [1, 3, 5, 7, 9]; 45 // var obj = {}; 46 /* 47 1.通过[].push找到数组中的push方法 48 2.通过apply(obj)将找到的push方法内部的this修改为自定义的对象 49 3.将传入数组中的元素依次取出, 传递给形参 50 */ 51 // [].push.apply(obj, arr); 52 // console.log(obj); 53 window.onload = function (ev) { 54 // 系统自带的伪数组 55 var res = document.querySelectorAll("div"); 56 // 自定义的伪数组 57 var obj = {0:"lnj", 1:"33", length: 2}; 58 // var arr = []; // 真数组 59 // [].push.apply(arr, obj); 60 // console.log(arr); 61 62 // 如果想将伪数组转换为真数组那么可以使用如下方法 63 var arr = [].slice.call(obj); 64 console.log(arr); 65 // var arr2 = [1, 3, 5, 7, 9]; 66 // 如果slice方法什么参数都没有传递, 会将数组中的元素放到一个新的数组中原样返回 67 // var res2 = arr2.slice(); 68 // var res2 = arr2.slice(2); 69 // var res2 = arr2.slice(2, 4); 70 // console.log(res2); 71 } 72 </script> 73 </head> 74 <body> 75 <div>我是div</div> 76 <div>我是div</div> 77 <div>我是div</div> 78 </body> 79 </html>