首页 > 代码库 > js学习总结----核心解读

js学习总结----核心解读

2024-10-29 12:25:02   206人阅读

下面是对jquery源码的简单解读:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        //window.jQuery = window.$ = jQuery(jQuery就是那个闭包中的私有函数)
        //selector:[string]选择器的类型 [object]JS原生的对象(把原生的对象转换为jQuery对象) [function]回调函数(等价于$(document).ready...)
        //context:document(传递的是一个原生JS对象能够修改上下文，如果是jQuery对象，它默认会把其重构为选择器)
        var jQuery = function(selector,context){
            return new jQuery.fn.init(selector,context);//我们可以把这个理解为返回的是一个jQuery类的实例
        }
        jQuery.fn = jQuery.prototype = {
            constructor:jQuery
        }
        jQuery.extend = jQuery.fn.extend = function(){
            //jQuery.extend:把它当做一个普通的对象，在对象中增加了extend方法
            //jQuery.fn.extend:在它的原型上也增加了一个extend方法
        }
        //jQuery选择器:创建jQuery这个类的一个实例（jQuery对象）
        //在jQuery这个类的原型上定义了很多的属性和方法，而通过选择器获取的每一个实例都可以调用这些方法:属性、css、文档操作、筛选、动画、事件...
        $("*").css()

        //把jQuery当做一个普通的对象，在它自己的属性上增加了一些常用的方法：Ajax、工具...
        //extend:扩展，向jQuery这个类库中增加一些其他常用的方法
        //1）、向jQuery属性名上扩展（把他当做一个对象）->完善类库，给类库增加核心的方法
        jQuery.extend({
            aa:function(){
                console.log("aa");
            }
        })
        $.aa();
        //2）、向jQuery原型上扩展（把他当做一个类）->编写一些基于jQuery的插件
        jQuery.fn.extend({
            bb:function(){
                console.log("bb")
            }
        })
        $().bb();
    </script>
</body>
</html>

 

js学习总结----核心解读


联系
我们