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>