jQuery 是如何判斷HTML頁面加載完畢的？它的原理是什么?

jquery是一個輕量級的JS框架，這點相信大部分人都聽過，而jquery之所以有這樣一個稱呼，就是因為它悄悄披了一件外衣，將自己給隱藏了起來。

創(chuàng)新互聯專注為客戶提供全方位的互聯網綜合服務，包含不限于成都網站建設、成都網站制作、渾南網絡推廣、微信小程序定制開發(fā)、渾南網絡營銷、渾南企業(yè)策劃、渾南品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯為所有大學生創(chuàng)業(yè)者提供渾南建站搭建服務，24小時服務熱線：18982081108，官方網址：chinadenli.net

//以下截取自jquery源碼片段(function( window, undefined ) { ? /* ? ?源碼內容 ? ?*/})( window );

上面這一小段代碼來自于1.9.0當中jquery的源碼，它是一個無污染的JS插件的標準寫法，專業(yè)名詞叫閉包。可以把它簡單的看做是一個函數，與普通函數不同的是，這個函數沒有名字，而且會立即執(zhí)行，就像下面這樣，會直接彈出字符串。

(function( window, undefined ) {

alert("Hello World!");

})( window );

可以看出來這樣寫的直接效果，就相當于我們直接彈出一個字符串。但是不同的是，我們將里面的變量變成了局域變量，這不僅可以提高運行速度，更重要的是我們在引用jquery的JS文件時，不會因為jquery當中的變量太多，而與其它的JS框架的變量命名產生沖突。對于這一點，我們拿以下這一小段代碼來說明。

var temp = "Hello World!";

(function( window, undefined ) { ? ? ? var temp = "ByeBye World!";

})( window );

alert(temp);

這段代碼的運行結果是Hello而不是ByeBye，也就是說閉包中的變量聲明沒有污染到外面的全局變量，倘若我們去掉閉包，則最終的結果會是ByeBye，就像下面這樣。

var temp = "Hello World!";// ? ?(function( window, undefined ) {

var temp = "ByeBye World!";// ? ?})( window );

alert(temp);

由此就可以看出來，jquery的外衣就是這一層閉包，它是很重要的一個內容，是編寫JS框架必須知道的知識，它可以幫助我們隱藏我們的臨時變量，降低污染。

jquery拖動層的工作原理

主要分三個部分，注冊Handler的Click事件

Click事件引發(fā)是開始拖動，此時注冊Document的MouseMove事件，Move的時候修改對象的位置

松開或者ESC的時候取消移動，注銷Document的Move事件

基本上所有的DragDrop都是這么實現的

jquery原理是什么？如何自己寫一個jquery選擇器

jQuery選擇器的實現原理很簡單，就是調用getElementsByName然后遍歷getAttribute，當然還有getElementsByTagName、getElementsById、querySelectorAll等等，jQuery一共有9種選擇器。

自己做的話，實現主要的選擇器，大致代碼也就一百多行吧。百度搜“實現 jQuery 選擇器”有很多可以參考的代碼。

jQuery選擇器的工作原理和優(yōu)化分析

每次申明一個jQuery對象的時候，返回的是jQuery.prototype.init

對象，很多人就會不明白，init明明是jQuery.fn的方法啊，實際上這里不是方法，而是init的構造函數，因為js的prototype對象可

以實現繼承，加上js的對象只是引用不會是拷貝，new

jQuery,new

jQuery.fn和new

jQuery.fn.init的子對象是一樣的，只是有沒有執(zhí)行到init的不同，這里就不講原因了，等下一篇再講為什么會是這樣。

當我們使用選擇器的時候$(selector,content)，就會執(zhí)行

init(selectot,content)，我們看看inti中是怎樣執(zhí)行的：

復制代碼

代碼如下:

if

(

typeof

selector

==

"string"

)

{

//正則匹配，看是不是HTML代碼或者是#id

var

match

=

quickExpr.exec(

selector

);

//沒有作為待查找的

DOM

元素集、文檔或

jQuery

對象。

//selector是#id的形式

if

(

match

(match[1]

||

!context)

)

{

//

HANDLE:

$(html)

-

$(array)

//HTML代碼,調用clean補全HTML代碼

if

(

match[1]

){

selector

=

jQuery.clean(

[

match[1]

],

context

);

}

//

是:

$("#id")

else

{

//判斷id的Dom是不是加載完成

var

elem

=

document.getElementById(

match[3]

);

if

(

elem

){

if

(

elem.id

!=

match[3]

)

return

jQuery().find(

selector

);

return

jQuery(

elem

);//執(zhí)行完畢return

}

selector

=

[];

}

//非id的形式.在context中或者是全文查找

}

else{

return

jQuery(

context

).find(

selector

);

}

}

這里就說明只有選擇器寫成$(‘#id')的時候最快，相當于執(zhí)行了一次

getElementById，后邊的程序就不用再執(zhí)行了。當然往往我們需要的選擇器并不是這么簡單，比如我們需要id下的CSS為className，

有這樣的寫法$(‘#id.className')和$(‘#id').find(‘.className');這兩種寫法的執(zhí)行結果都是一樣的，比

如div

id=”id”span

class=”className”/span/div，返回的肯定都是span

class=”className”/span，但是執(zhí)行的效率是完全不一樣的。

在分析一下上邊的代碼，如果不是$(‘#id')這樣的簡單選擇器的話，都會執(zhí)行find函

數，那我們再看看find到底是做用的：

復制代碼

代碼如下:

find:

function(

selector

)

{

//在當前的對象中查找

var

elems

=

jQuery.map(this,

function(elem){

return

jQuery.find(

selector,

elem

);

});

//下邊的代碼可以忽略，只是做一些處理

//這里應用了js的正則對象的靜態(tài)方法test

//indexOf("..")需要了解一下xpath的語法,就是判斷selector中包含父節(jié)點的寫法

//本意就是過濾數組的重復元素

return

this.pushStack(

/[^+]

[^+]/.test(

selector

)

||

selector.indexOf("..")

-1

?

jQuery.unique(

elems

)

:

elems

);

}

如果這樣寫$(‘#id

.className')，就會執(zhí)行到擴展的find(‘#id

.className',document)，因為當前的this是document的jQuery數組，那我們在看看擴展的find他的實現，代碼比較

多，就不列出來，總之就是從第二個參數傳遞進行的dom第一個子節(jié)點開始找，遇見#比對id，遇見.比對ClassName，還有：+-等處理。

那我們要優(yōu)化，是不是就要想辦法讓第二個參數context的范圍最小，那樣遍歷是不是就很少了？

如果我們這樣寫$(‘#id').find(‘.className')，那程序只這樣執(zhí)行

的，第一次init的時候執(zhí)行一步getElementById，就return了，接著執(zhí)行

find(‘.className',divDocument)，divDocument就是我們第一次選擇的是div標簽，如果document下有很

多dom對象的時候，這次只遍歷divDocument是不是少了很多次，而且在第一次選擇id的速度也要比遍歷快的多。

現在大家應該是明白了吧。就是說第一層選擇最好是ID，而是簡單選擇器，目的就是定義范圍，

提高速度，這次就說這些，選擇寫法的優(yōu)化，其他的優(yōu)化，下次再說。

本文題目：jquery原理,jquery技術介紹
路徑分享：http://chinadenli.net/article29/dsgpich.html

成都網站建設公司_創(chuàng)新互聯，為您提供定制網站、電子商務、網站設計公司、外貿網站建設、做網站、Google

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯