jQuery学习之旅 5 $与jQuery对象

原创

第零人 2022-12-14 15:13:19 博主文章分类：JQuery ©著作权

文章标签 jquery jQuery jquery对象 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者第零人的原创作品，请联系作者获取转载授权，否则将追究法律责任

1、$符号的由来

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

jQuery学习之旅 5 $与jQuery对象_jquery

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

解决冲突问题

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

prototype框架也使用$符号
jquery里边也使用符号现在就分不清楚符号符号到底是prototype框架的还是 jquery框架的

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

jQuery.extend({
            noConflict: function( deep ) {
                //使用一个空变量_$，</span>把<span >$符号给覆盖
                window.$ </span>= <span class="hljs-number">_</span><span class="hljs-variable">$;

                if ( deep ) {
                    //使用一个空变量_jQuery把jQuery使用权收回
                    window.jQuery = _jQuery;
                }

                return jQuery;
            },

<script>
    //通过jquery指定方法让出$符号的使用权
    //被让出使用权的$符号，就不能出现在jquery的应用里边
    //var jq = $.noConflict();  //收回$符号使用权
    var jq = $.noConflict(<span class="hljs-literal">true</span>);  <span class="hljs-comment">//"$符号"和"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代码

jQuery学习之旅 5 $与jQuery对象_jquery对象_02

结论：$(“#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在使用的时候可以使用两种对象

$(“#one”) 是普通jQuery.fn.init创建出来的对象
$.get(“url”) 不是jQuery.fn.init创建，而是jquery内部的jQuery对象
例如: $.noConflict()</code> <code>$ 符号就是内部jQuery对象

jQuery学习之旅 5 $与jQuery对象_jQuery_03

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

jQuery学习之旅 5 $与jQuery对象_jQuery_04

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

4、总结：

1、 $符号由来
2、 jquery对象与dom对象互相转化
3、 jquery对象分析

a) jquery生成好的对象继承 jQuery.fn
b) jQuery.fn 通过冒充继承 extend，又得到了许多属性和方法