jQuery原理——20——jQuery的基本结构和入口函数测试

一: jQuery基本结构

1:jQuery的本质是一个闭包
2:jQuery为什么要用闭包来实现: 为了避免多个框架的冲突
3:jQuery如何让外界访问内部定义的局部变量:window.xxx=xxx

(function test(){
     var num=1;
     window.num=num;
    })();
    console.log(num);

4:jQuery为什么要给自己传递一个 window参数?:为了方便后期压缩代码,为了提升找到的效率
5:jQuery为什么要给自己接收一个undefined参数? 为了方便后期压缩代码,IE9以下的浏览器undefined可以被修改,为了保证内部使用的undefined被修改,所以需要接受一个正确的undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    (function(window,undefined){
     var jQuery=function(){
         return new jQuery.prototype.init();
     }
     jQuery.prototype={
         constructor:jQuery
     }
     jQuery.prototype.init.prototype=jQuery.prototype;
     window.jQuery=window.$=jQuery;
    })(window);
   
    </script>
    
</head>
<body>
    
</body>
</html>

二:jQuery入口函数测试

jQ入口函数传入不同参数得到的实例
1:传入“ ” null undefined NaN 0 false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jQuery/jquery-3.4.1.min.js"></script>
    <script>
    $(function(){
        //会返回一个空的jQuery对象
        console.log($());
        console.log($(''));
        console.log($(null));
        console.log($(undefined));
        console.log($(NaN))
        console.log($(0))
        console.log($(false))
    })
    </script>
    
</head>
<body>
    
</body>
</html>

2:传入html片段

<script>
    $(function(){
        //会将创建好的DOM元素存储到jQuery
        console.log($('<p>1</p><p>2</p><p>3</p>'));
    })
    </script>

3:传入选择器

<script>
    $(function(){
        //会将找到的所有元素存储到jQuery对象中
        console.log($('li'));
    })
    </script>

4:传入数组

 <script>
 //会将数组中存储的元素一次存储到jQuery对象中返回
    $(function(){
        //会将找到的所有元素存储到jQuery对象中
        console.log($([1,2,3,4,5,6]));
    })
    </script>

5:传入伪数组

<script>
    $(function(){
        //会将数组中存储的元素一次存储到jQuery对象中返回
        var likeArr={0:'a',1:'b',length:2};
        console.log($(likeArr));
    })
    </script>

6:传入对象

 <script>
    $(function(){
        //会将传入的对象存储到jQuery对象中返回
        function Person(){}
        console.log($(new Person()));
    })
    </script>

7:传入DOM元素

 <script>
    $(function(){
        //会将传入的DOM元素存储到jQuery对象中返回
        function Person(){}
        console.log($(document.createElement('div')));
    })
    </script>

8:传入基本数据类型

 <script>
    $(function(){
        //会将传入的DOM元素存储到jQuery对象中返回
        function Person(){}
        console.log($(document.createElement('div')));
    })
    </script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章