jQuery查找dom的方法有哪些

這篇文章給大家分享的是有關(guān)jQuery查找dom的方法有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

首先我們要用到的是console.time()和console.timeEnd()這兩個(gè)成對出現(xiàn)的console對象的方法，該方法的用法是將他們兩者之間的代碼段執(zhí)行并輸出所消耗的執(zhí)行時(shí)間，并且兩者內(nèi)傳入的字符串命名須統(tǒng)一才能生效，例如：

console.time('Scott');
console.log('seven');
console.timeEnd('Scott');
seven
Scott: 0.256ms

代碼段中三處一致才是正確的用法。

正文

接下來我們來討論我們常用的jQuery查找dom方式：

1.$(‘.parent .child');
2.$(‘.parent').find(‘.child');
3.$(‘.child','.parent');

其中方式1和方式3都是基于jQuery的selector和context的查找方式，既我們最常用的jQuery()或者$() ，
詳細(xì)即為：

jQuery = function( selector, context ) {
 // The jQuery object is actually just the init constructor 'enhanced'
 // Need init if jQuery is called (just allow error to be thrown if not included)
 return new jQuery.fn.init( selector, context );
}

基于jQuery(1.11.3)70行處，為該方法的入口，他做的所有事情就是創(chuàng)建了一個(gè)jquery.fn上的init方法的對象，我們再來細(xì)看這個(gè)對象是什么：

init = jQuery.fn.init = function( selector, context ) {
 var match, elem;

 // HANDLE: $(""), $(null), $(undefined), $(false)
 if ( !selector ) {
 return this;
 }

 // Handle HTML strings
 if ( typeof selector === "string" ) {
 if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
 // Assume that strings that start and end with <> are HTML and skip the regex check
 match = [ null, selector, null ];

 } else {
 match = rquickExpr.exec( selector );
 }

 // Match html or make sure no context is specified for #id
 if ( match && (match[1] || !context) ) {

 // HANDLE: $(html) -> $(array)
 if ( match[1] ) {
 context = context instanceof jQuery ? context[0] : context;

 // scripts is true for back-compat
 // Intentionally let the error be thrown if parseHTML is not present
 jQuery.merge( this, jQuery.parseHTML(
 match[1],
 context && context.nodeType ? context.ownerDocument || context : document,
 true
 ) );

 // HANDLE: $(html, props)
 if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
 for ( match in context ) {
 // Properties of context are called as methods if possible
 if ( jQuery.isFunction( this[ match ] ) ) {
 this[ match ]( context[ match ] );

 // ...and otherwise set as attributes
 } else {
 this.attr( match, context[ match ] );
 }
 }
 }

 return this;

 // HANDLE: $(#id)
 } else {
 elem = document.getElementById( match[2] );

 // Check parentNode to catch when Blackberry 4.6 returns
 // nodes that are no longer in the document #6963
 if ( elem && elem.parentNode ) {
 // Handle the case where IE and Opera return items
 // by name instead of ID
 if ( elem.id !== match[2] ) {
 return rootjQuery.find( selector );
 }

 // Otherwise, we inject the element directly into the jQuery object
 this.length = 1;
 this[0] = elem;
 }

 this.context = document;
 this.selector = selector;
 return this;
 }

 // HANDLE: $(expr, $(...))
 } else if ( !context || context.jquery ) {
 return ( context || rootjQuery ).find( selector );

 // HANDLE: $(expr, context)
 // (which is just equivalent to: $(context).find(expr)
 } else {
 return this.constructor( context ).find( selector );
 }

 // HANDLE: $(DOMElement)
 } else if ( selector.nodeType ) {
 this.context = this[0] = selector;
 this.length = 1;
 return this;

 // HANDLE: $(function)
 // Shortcut for document ready
 } else if ( jQuery.isFunction( selector ) ) {
 return typeof rootjQuery.ready !== "undefined" ?
 rootjQuery.ready( selector ) :
 // Execute immediately if ready is not present
 selector( jQuery );
 }

 if ( selector.selector !== undefined ) {
 this.selector = selector.selector;
 this.context = selector.context;
 }

 return jQuery.makeArray( selector, this );
 }

基于jQuery(1.11.3) 2776行處，該方法比較長，我就來大概說一下我對這個(gè)方法的了解：這里主要就是做了先對selector的判斷，在判斷完后，查找context如果存在就繼續(xù)做對有context存在情況的處理，沒有則進(jìn)行沒有context情況的處理，而方式1和方式3：

1.$(‘.parent .child');
3.$(‘.child','.parent');

他們都要進(jìn)入相同的判斷步驟，即上面簡要說明的判斷流程，等到1和3判斷完后所花費(fèi)的時(shí)間基本差不多，但是1內(nèi)部的選擇器還需要花費(fèi)時(shí)間去進(jìn)行sizzle相關(guān)查找，得出：

• 方式1. $(‘.parent .child'); 走完流程花費(fèi)的時(shí)間：a;

• 方式3. $(‘.child','.parent'); 走完流程花費(fèi)的時(shí)間：a; 幾乎已經(jīng)找到dom節(jié)點(diǎn)

• 方式1. $(‘.parent .child'); sizzle相關(guān)查找選擇器.parent .child花費(fèi)的時(shí)間：b;

• 所以得出初步結(jié)論：

• 方式3. $(‘.child','.parent');花費(fèi)的時(shí)間：a;

• 方式1. $(‘.parent .child');花費(fèi)的時(shí)間：a + b;

• 方式3優(yōu)于方式1

接下來我們來看實(shí)際的運(yùn)行結(jié)果：

以百度頁面為例，我們隨便找出一組滿足的范圍來查找，博主進(jìn)行多次測試，方式3的查找效率均快于方式1，且方式3的查找速度基本為方式1的3倍左右，即：

接下來我們我們加入jQuery的find方法進(jìn)行比較，即為：

• 方式1. $(‘.parent .child');

• 方式2. $(‘.parent').find(‘.child');

• 方式3. $(‘.child','.parent');

由于我們已有了之前的判斷，基于他們?nèi)叨家M(jìn)行jQuery()的查找，所以三者都在此花費(fèi)a的查找時(shí)間，此時(shí)方式3已經(jīng)基本找到了：

• 方式3. $(‘.child','.parent'); 花費(fèi)時(shí)間:a;

接下來方式1進(jìn)行 ‘ .parent .child '選擇器的查找，方式2進(jìn)行jQuery的find方法查找，在此列出find的具體內(nèi)容：

find: function( selector ) {
 var i,
 ret = [],
 self = this,
 len = self.length;

 if ( typeof selector !== "string" ) {
 return this.pushStack( jQuery( selector ).filter(function() {
 for ( i = 0; i < len; i++ ) {
  if ( jQuery.contains( self[ i ], this ) ) {
  return true;
  }
 }
 }) );
 }

 for ( i = 0; i < len; i++ ) {
 jQuery.find( selector, self[ i ], ret );
 }

 // Needed because $( selector, context ) becomes $( context ).find( selector )
 ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
 ret.selector = this.selector ? this.selector + " " + selector : selector;
 return ret;
 }

基于jQuery(1.11.3) 2716行處，在此我們可以看出find的過程比較簡單，相較于方式1查找復(fù)雜的選擇器(在查找選擇器的過程中需要排除很多的情況，更多的時(shí)間花費(fèi)在處理字符串上，即處理出我們想要表達(dá)的選擇器)更高效一點(diǎn)，我們得出方式2優(yōu)于方式1，下面我們拿三者來進(jìn)行比較：

我們可以看出，方式1最慢，方式2和方式3不相上下，方式3略勝一籌，基本吻合我們的初衷，即為：

在基于jQuery查找dom的過程中能使用jquery的查找方式就使用，盡量不寫復(fù)雜的選擇器來表達(dá)我們想要查找的dom，效率極低。相反使用jquery的查找方式我們就能盡量排除復(fù)雜選擇器的情況，極大提高查找效率。

由于方式2的使用可能會(huì)受限，所以在此我推薦大家使用方式3，即為：

感謝各位的閱讀！關(guān)于“jQuery查找dom的方法有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！