根據個人的基礎不同,所以在學習看書、編寫代碼需要關注的側重點不同。我寫博客目的:一是想把自己在這個行業中成長的點滴記錄下來;二是希望能夠為和我遇到相同問題的人提供一些參考。~~重點是第一條,莫忘初衷 ~~從學渣變成學霸,路漫漫其修遠兮唉!!!
...................................................以下是正文...............................................................
因為偶開始研究jQuery源碼了,所以有些內容會刨根究底滴!啦啦啦...啦啦啦
jQuery對象是由jQuery()構造函數生成的。jQuery()構造函數里傳入不同的參數,在jQuery源碼里就會執行不同的邏輯程序。先不管源碼是怎樣工作的,這里只是介紹jQuery()函數根據傳入的參數分類。
jQuery()構造函數傳入字符串之后就生成一個jquery對象,即返回一個jQuery對象。
1.$(selectorStr [,context]),接受一個選擇器,返回一個jQuery對象
假設傳入的是選擇器表達式(為什么要假設呢,因為對於傳入的參數需要解析,然后你懂得),則需要遍歷文檔,查找與之對應的,並創建一個包含這些DOM元素引用的jQuery對象;如果沒有元素與之匹配,則返回一個空的jQuery對象,其不包含任何元素。
這里的context選擇器稱為“上下文”,其格式有以下幾種:
寫法例如:alert($('p','#p_wrap').text()); //在遍歷時縮小范圍id
alert($('p','div').text()); //DOM元素
alert($('p', $('div')).text()); //jQuery對象
$('domElement', this) //用於當前指定的DOM元素范圍內
2. $(html [, ownerDocument]),$(html, props)
如果傳入的是html代碼,jQuery就會用這些代碼創建新的DOM元素,並創建一個包含這個元素引用的jQuery對象。
如果html代碼是一個單獨的標簽,如$('<img/>')等,jQuery源碼的實現是使用瀏覽器原生方法document.creatElement()創建一個DOM元素;
如果是比較復雜的html片段,jQuery源碼實現使用瀏覽器的innerHtml機制創建DOM元素,這個過程由兩個方法完成的。
若html代碼是一個單獨標簽,第二個參數可以是props,props是一個包含了屬性、事件的普通對象。在調用document.createElement()創建DOM元素后,props會被傳給jQuery方法.attr(),然后由attr()負責把參數props中的屬性、事件設置到新創建的元素上。
$('body').append($("<div></div>",{
"class":"test",
text:"Click Me",
click:function(){
$(this).toggleClass('test');
}
})
);
3.$(element),$(elementArray)
如果傳入一個DOM元素或DOM元素數組,則把DOM元素封裝到jQuery對象中並返回。這個功能常見於事件監聽函數,即把關鍵字this引用的DOM元素封裝為jQuery對象,然后在該jQuery對象上使用jQuery方法。
$('div.foo').click(function(){
$(this).toggleClass();
});
4. jquery(object)
傳入一個普通的JavaScript對象,則把該對象封裝到jQuery對象中並返回。
5.jQuery(callback)
如果傳入一個函數,則在document上綁定一個ready事件監聽函數,當DOM結構加載完成時執行。ready事件觸發要早於load事件。ready事件並不是瀏覽器的原生事件。
6. jQuery (jQuery object)
如果傳入一個jQuery對象,則創建該jQuery對象的一個副本並返回,副本與傳入的jQuery對象引用完全相同的DOM元素。(這一點在上篇,幻燈片中有用到的哦)
7. jQuery ()
如果不傳入任何參數,則返回一個空jQuery對象。