Jquery$選擇器--是如何將DOM封裝成jquery對象的2018-07-20

前言:

說到j(luò)query不得不說的就是強大的jquery的選擇器功能啦辙培。該功能很強大,還單獨分離出來sizzle模塊供只需用到選擇器功能的朋友使用崭庸。(該篇先不說jquery選擇器的強大功能怀浆,先說說jquery是如何將DOM元素封裝成jquery對象的)

一谊囚、Dom對象和jquery對象

測試

var oBox = document.getElementById('box');

var oBox2 = document.querySelector('#box');

varBox=Box =Box=('#box');

console.log(oBox);

console.log(oBox2);

console.log($Box);

運行結(jié)果:


從中我們就可以看出區(qū)別了,$()把DOM對象封裝成jquery對象执赡,而DOM對象也就保存在jquery[0]中镰踏,這也就是為什么我們說的把jquery對象轉(zhuǎn)化成DOM對象只需用jquery[0]或者jquery.get(0)了。

二沙合、模擬jquery--根據(jù)id奠伪,封裝jquery對象

這里先簡化一下,看看封裝jquery對象的一部分過程

測試

varBox=Box =Box=('#box');

console.log('這是jquery對象');

console.log(公式輸入有誤/;

match = rquickExpr.exec( selector );

//console.log(match);? //正則匹配找出id的值

if ( !selector ) {? //如果selector為'',null,undefind直接退出操作

return this;

}

elem = document.getElementById(match[2]);

this[0] = elem;

this.context=document;

this.length = 1;

this.selector = selector;

return this;

}

}

jQ.fn.init.prototype = jQ.fn;

window.公式輸入有誤('#box'));? //輸出封裝的對象

②輸出結(jié)果:(火狐瀏覽器上打開的)


這里需要注意的是首懈,chrome瀏覽器在顯示上有會些不同


jquery顯示的是類數(shù)組對象形態(tài)绊率。

③、解析

對于上面代碼有很多看不明白的朋友建議看一下我前面寫的文章【jquery源碼】開始學(xué)習(xí)源碼之前需要解決的一些問題究履。

正則匹配我是直接復(fù)制了源碼中的正則滤否,可以輸出該正則處理后的結(jié)果來看看。


三最仑、模擬jquery--根據(jù)標簽名顽聂,封裝jquery對象

直接上代碼

  • 測試1
  • 測試2
  • 測試3
  • 測試4
  • console.log('這是jquery對象');

    var aLi1 = $('li');

    console.log(aLi1);

    console.log('------分界線------');

    (function(window,undefined){

    var jQ = function(selector,context){

    return new jQ.fn.init(selector, context);

    };

    jQ.fn = jQ.prototype = {

    jquery:'2.0.0',? ? //jquery版本號信息

    constructor: jQ,? ? //添加構(gòu)造器屬性

    length:0,? ? ? ? ? //初始length屬性

    selector:'',? ? ? ? //初始selector屬性

    init: function(selector, context){

    var match, elem;

    if ( !selector ) {? //如果selector為'',null,undefind直接退出操作

    return this;

    }

    elem = document.getElementsByTagName(selector);

    for(var i =0,len=elem.length; i

    this[i] = elem[i];

    }

    this.context=document;

    this.length = elem.length;

    this.selector = selector;

    return this;

    }

    }

    jQ.fn.init.prototype = jQ.fn;

    window.公式輸入有誤('li'));? //輸出封裝的對象

    輸出結(jié)果:


    這里只是單純的模擬,jq處理起來遠遠沒有那么簡單盯仪,jquery還進行了大量的判斷(下面的文章會繼續(xù)說這個問題)。還可以在jquery對象中發(fā)現(xiàn)prevObject屬性蜜葱,該屬性保存的是上一級的查找對象全景。

    最后編輯于
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
    • 序言:七十年代末,一起剝皮案震驚了整個濱河市牵囤,隨后出現(xiàn)的幾起案子爸黄,更是在濱河造成了極大的恐慌,老刑警劉巖揭鳞,帶你破解...
      沈念sama閱讀 216,651評論 6 501
    • 序言:濱河連續(xù)發(fā)生了三起死亡事件炕贵,死亡現(xiàn)場離奇詭異,居然都是意外死亡野崇,警方通過查閱死者的電腦和手機称开,發(fā)現(xiàn)死者居然都...
      沈念sama閱讀 92,468評論 3 392
    • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來乓梨,“玉大人鳖轰,你說我怎么就攤上這事》龆疲” “怎么了蕴侣?”我有些...
      開封第一講書人閱讀 162,931評論 0 353
    • 文/不壞的土叔 我叫張陵,是天一觀的道長臭觉。 經(jīng)常有香客問我昆雀,道長辱志,這世上最難降的妖魔是什么? 我笑而不...
      開封第一講書人閱讀 58,218評論 1 292
    • 正文 為了忘掉前任狞膘,我火速辦了婚禮揩懒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘客冈。我一直安慰自己旭从,他們只是感情好,可當(dāng)我...
      茶點故事閱讀 67,234評論 6 388
    • 文/花漫 我一把揭開白布场仲。 她就那樣靜靜地躺著和悦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪渠缕。 梳的紋絲不亂的頭發(fā)上鸽素,一...
      開封第一講書人閱讀 51,198評論 1 299
    • 那天亦鳞,我揣著相機與錄音,去河邊找鬼遭笋。 笑死徒探,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的央串。 我是一名探鬼主播碗啄,決...
      沈念sama閱讀 40,084評論 3 418
    • 文/蒼蘭香墨 我猛地睜開眼饲宿,長吁一口氣:“原來是場噩夢啊……” “哼胆描!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起殿托,我...
      開封第一講書人閱讀 38,926評論 0 274
    • 序言:老撾萬榮一對情侶失蹤支竹,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后饶碘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
      沈念sama閱讀 45,341評論 1 311
    • 正文 獨居荒郊野嶺守林人離奇死亡扎运,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
      茶點故事閱讀 37,563評論 2 333
    • 正文 我和宋清朗相戀三年豪治,在試婚紗的時候發(fā)現(xiàn)自己被綠了扯罐。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
      茶點故事閱讀 39,731評論 1 348
    • 序言:一個原本活蹦亂跳的男人離奇死亡掩浙,死狀恐怖秸歧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情遣蚀,我是刑警寧澤纱耻,帶...
      沈念sama閱讀 35,430評論 5 343
    • 正文 年R本政府宣布弄喘,位于F島的核電站蘑志,受9級特大地震影響贬派,放射性物質(zhì)發(fā)生泄漏搞乏。R本人自食惡果不足惜,卻給世界環(huán)境...
      茶點故事閱讀 41,036評論 3 326
    • 文/蒙蒙 一镐躲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧撒穷,春花似錦、人聲如沸裆熙。這莊子的主人今日做“春日...
      開封第一講書人閱讀 31,676評論 0 22
    • 文/蒼蘭香墨 我抬頭看了看天上的太陽蛤奥。三九已至纷跛,卻和暖如春喻括,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背唬血。 一陣腳步聲響...
      開封第一講書人閱讀 32,829評論 1 269
    • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留唤崭,地道東北人拷恨。 一個月前我還...
      沈念sama閱讀 47,743評論 2 368
    • 正文 我出身青樓,卻偏偏與公主長得像谢肾,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子芦疏,可洞房花燭夜當(dāng)晚...
      茶點故事閱讀 44,629評論 2 354