jQuery學習之旅 Item5 $與jQuery對象

jQuery學習之旅 Item5 $與jQuery對象
1、$符號的由來

$符號本質就是函數的名字。
jquery源碼分析

通過分析我們知道，在jquery裡邊不只可以使用$符號，還可以使用jQuery標誌

解決衝突問題<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4NCjxwPtPQtcTP7sS/ysfW0Lzkuf22yc/uxL8ocHJvdG90eXBlus1qcXVlcnm/8rzctrzT0Mq508MpPC9wPg0KcHJvdG90eXBlv/K83NKyyrnTwyS3+7rFIGpxdWVyecDvsd/Sssq508M8bm9icj63+7rFz9bU2r7Nt9ayu8fls/48L25vYnI+t/u6xbW9tdfKx3Byb3RvdHlwZb/yvNy1xCC7ucrHIGpxdWVyeb/yvNy1xA0KPHA+anF1ZXJ5sb7J7dPQt723qL/J0tTKx7XEJLf7usW1xMq508PIqLG7yMOz9sC0PC9wPg0KPHByZSBjbGFzcz0="brush:java;">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>

I am bread 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，又得到了許多屬性和方法