• jQuery学习之旅 Item5 $与jQuery对象


    1、$符号的由来

    $符号本质就是函数的名字。
    jquery源码分析

    这里写图片描述

    通过分析我们知道,在jquery里边不只可以使用$符号,还可以使用jQuery标志

    解决冲突问题

    有的项目是中间过渡项目(prototype和jquery框架都有使用)

    • prototype框架也使用$符号
    • jquery里边也使用符号到底是prototype框架的 还是 jquery框架的

    jquery本身有方法可以是的$符号的使用权被让出来

    jQuery.extend({
                noConflict: function( deep ) {
                    //使用一个空变量_$,$符号给覆盖
                    window.$ = _$;
    
                    if ( deep ) {
                        //使用一个空变量_jQuery把jQuery使用权收回
                        window.jQuery = _jQuery;
                    }
    
                    return jQuery;
                },
    <script>
        //通过jquery指定方法让出$符号的使用权
        //被让出使用权的$符号,就不能出现在jquery的应用里边
        //var jq = $.noConflict();  //收回$符号使用权
        var jq = $.noConflict(true);  //"$符号"和"jQuery"两个使用权都被收回
    
        function f1(){
            //alert($("div").html());
            //alert(jQuery("div").html());
            console.log(jq("div").html());
            console.log(jQuery("div").html()); //不允许使用jQuery
        }
    </script>
    <body>
        <div>I am bread</div>
        <input type="button" value="触发" onclick="f1()" />
    </body>

    2、jQuery对象与dom对象的区别和联系

    • jquery对象——$(“li”)
    • dom对象——document.getElementById(‘one’);

    1. jquery对象创建过程中如何封装dom代码

    这里写图片描述

    结论:$(“#one”)[0] = document.getElementById(‘one’);

    2. jquery对象转化为dom对象

    a) jquery对象[下标] 例如 $(“#one”)[0]

    //jquery对象调用dom对象的方法
    $("#one")[0].setAttribute("class","pear");//说明jquery对象转化为了dom对象

    在jquery对象里边获得指定的dom对象
    $(“li”)多个节点

    //jQuery 对象转换为Domd对象
    $("li")[3].style.color ="red";

    3. dom对象转换为jquery对象

    a) var dv = document.getElementById(‘id’);
    b) $(dv) 转化完毕

    //$("#one").css('color','red');
    //$("#one")就是对dom代码的封装(document.getElementById)
    
    //利用dom对象调用jquery的方法(失败)
    var dv = document.getElementById("one");
    
    //jquery封装dom代码(dom对象)
    //$(dv) dv是div元素节点 nodeType=1(dom对象转化为jquery对象)
    $(dv).css("color","green"); 

    3、jquery对象分析

    jquery对象创建:jQuery.fn.init(); (从105行——219行)
    但是 css() html() attr() addClass()等方法在 100多行的init()里边没有具体的操作方法

    下面来分析代码结构:

    • jQuery.fn 代码:104—338行
    • jQuery.fn.init 代码:105—219行
    • jQuery.fn.init.prototype = jQuery.fn;
    • jQuery.fn.init通过原型链继承jQuery.fn

      这里写图片描述

    jQuery.fn.init创建——>jQuery.fn.init 继承 ——> jQuery.fn (例如 length、jquery、size属性调用 ——> jQuery.fn 继承extend 冒充继承 (例如 addClass attr removeAttr)

    jQuery.fn.init.prototype = jQuery.fn;
    jQuery.extend = jQuery.fn.extend = function() {}
    • jquery对象创建完毕需要向上继承两层关系
    • jquery之所以会调用许多相关方法,也是继承得来的方法

    jquery在使用的时候可以使用两种对象

    1. $(“#one”) 是普通jQuery.fn.init创建出来的对象
    2. $.get(“url”) 不是jQuery.fn.init创建,而是jquery内部的jQuery对象

    3. 例如: $.noConflict() $符号就是内部jQuery对象

    这里写图片描述

    该对象$,代码行数22—915行
    $符号对象本身也有冒充继承,我们直接调用$符号的相关方法,首先去22-915行找,如果没有,就去extend继承方法里边找

    这里写图片描述

    系统里边有两套extend冒充继承:普通jquery对象的、$符号的

    4、总结:

    • 1、 $符号由来
    • 2、 jquery对象与dom对象互相转化
    • 3、 jquery对象分析
      • a) jquery生成好的对象继承 jQuery.fn
      • b) jQuery.fn 通过冒充继承 extend,又得到了许多属性和方法

    版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226

  • 相关阅读:
    国内乡村安防全面建设仍需推进,EasyNVR/EasyGBS/EasyCVR平台助力治安防控
    TSINGSEE青犀视频播放视频流的编码格式和封装格式有什么关系?
    全景摄像头怎么接入网页进行视频直播?
    EasyNTS编译报错could not read Username for XXXXX
    【LOJ#3005】Limited Memory
    【BZOJ2407】探险
    【洛谷P4480】餐巾计划问题
    【CF163E】e-Government
    【洛谷P4332】三叉神经树
    【洛谷P7518】宝石
  • 原文地址:https://www.cnblogs.com/dingxiaoyue/p/4948191.html
Copyright © 2020-2023  润新知