jQuery構造函數7種參數


 根據個人的基礎不同,所以在學習看書、編寫代碼需要關注的側重點不同。我寫博客目的:一是想把自己在這個行業中成長的點滴記錄下來;二是希望能夠為和我遇到相同問題的人提供一些參考。~~重點是第一條,莫忘初衷 ­­~~從學渣變成學霸,路漫漫其修遠兮唉!!!

...................................................以下是正文...............................................................

  

   因為偶開始研究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對象。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM