jquery選擇器原理介紹($()使用方法)
更新時間：2014年03月25日 14:53:15 作者：
這篇文章主要介紹了jquery選擇器原理介紹($()使用方法),需要的朋友可以參考下
每次申明一個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，而是簡單選擇器，目的就是定義范圍，提高速度。
相關文章
下面小編就為大家?guī)硪黄獪\析jquery unbind()方法移除元素綁定的事件。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
后代，就是當前元素的所有后代，都算，子元素，就是當前元素的子集，再往下走就不算了2014-04-04
這篇文章主要為大家詳細介紹了簡單實現jQuery進度條輪播實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
本篇文章主要是對jquery選擇器之內容過濾選擇器進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jQuery Flash/MP3/Video多媒體插件,主要是用來加載flash或mp3等網絡媒體文件。2010-01-01
JavaScript實現向select下拉框中添加和刪除元素的方法
這篇文章主要介紹了JavaScript實現向select下拉框中添加和刪除元素的方法,涉及jQuery中append()與remove()方法動態(tài)操作表單元素的相關技巧,需要的朋友可以參考下2017-03-03
下面小編就為大家?guī)硪黄猨query過濾特殊字符',防sql注入的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JQuery中判斷一個元素下面是否有內容或者有某個標簽的判斷代碼
網站開發(fā)時，我們時常需要把沒有內容的標簽隱藏或者去掉。在用JQ有兩種好的解決辦法2012-02-02
jQuery插件Zclip實現完美兼容個瀏覽器點擊復制內容到剪貼板
本文將結合實例講解如何使用一款基于jQuery的插件——Zclip來實現復制內容到剪貼板的功能。其實IE上有個方法可以實現點擊復制，但是由于只是IE獨有，所以我們不提倡。而Zclip是利用一個隱藏的flash文件來完成復制的功能，關鍵是它兼容當前各主流瀏覽器。2015-04-04
剛開始學jQuery，于是想試試學習效果，所以就做了個這個TextBox自動完成條，練習練習。請牛人們別笑話。2009-07-07