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在使用的时候可以使用两种对象
- $(“#one”) 是普通jQuery.fn.init创建出来的对象
- $.get(“url”) 不是jQuery.fn.init创建,而是jquery内部的jQuery对象
-
例如:$.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