ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
### 1、$符号的由来 **$符号本质就是函数的名字。** jquery源码分析 ![这里写图片描述](https://box.kancloud.cn/2016-04-28_57218a0a33f03.jpg "") 通过分析我们知道,在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代码** ![这里写图片描述](https://box.kancloud.cn/2016-04-28_57218a0a45976.jpg "") 结论:`$(“#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 ![这里写图片描述](https://box.kancloud.cn/2016-04-28_57218a0a5fb6e.jpg "") 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创建出来的对象 1. $.get(“url”) 不是jQuery.fn.init创建,而是jquery内部的jQuery对象 1. 例如: `$.noConflict()``$`符号就是内部jQuery对象 ![这里写图片描述](https://box.kancloud.cn/2016-04-28_57218a0a754a2.jpg "") 该对象$,代码行数22—915行 `$`符号对象本身也有冒充继承,我们直接调用$符号的相关方法,首先去22-915行找,如果没有,就去extend继承方法里边找 ![这里写图片描述](https://box.kancloud.cn/2016-04-28_57218a0a90067.jpg "") 系统里边有两套extend冒充继承:**普通jquery对象的、$符号的** ### 4、总结: - 1、 $符号由来 - 2、 jquery对象与dom对象互相转化 - 3、 jquery对象分析 - a) jquery生成好的对象继承 jQuery.fn - b) jQuery.fn 通过冒充继承 extend,又得到了许多属性和方法