The principle of jquery selector introduces the use of of $of

Every time that a jQuery object, returns the jQuery. The prototype. The init objects, a lot of people will not understand, init jQuery, i.e., fn method, in fact this is not a method, but the structure of the init function, because the prototype object of js can implementation inheritance, coupled with js object is only reference will not be a copy, the new jQuery, new jQuery. The fn and new jQuery, fn. Init child objects are the same, It's just that there's no difference to init.

So when we use the selector, $(selector,content), it's going to execute init(selectot,content), and we're going to see how that works in inti:

if ( typeof selector == "string" ) 
{
 //Regular match, whether it's HTML code or #id
    var match = quickExpr.exec( selector );
    //There is no DOM element set, document, or jQuery object to look up.
 //Selector is in the form of a #id
 if ( match && (match[1] || !context) ) 
 {
  // HANDLE: $(html) -> $(array)
  //HTML code, calling clean complete HTML code
  if ( match[1] ){
   selector = jQuery.clean( [ match[1] ], context );
  }
  //Is: $(" # id ")
  else {
   //Determines if the Dom of the id is loaded
   var elem = document.getElementById( match[3] );
   if ( elem ){
    if ( elem.id != match[3] )
    return jQuery().find( selector );
    return jQuery( elem );//Execute return
   }
   selector = [];
  }
  //In the context or full-text search
 } 
 else{
  return jQuery( context ).find( selector );
 }
}

This shows that the fastest time is when only the selector is written as $('#id'), which is equivalent to executing getElementById once and eliminating the need to execute the following program. Of course, the selector we need is not so simple, for example, we need the CSS under the id is className, there is such a way to write $('# id.classname ') and $('#id').find('.classname '); The result is the same for both, for example < Div id = "id" > < Span class = "className" > < / span> < / div> , the return is definitely both < Span class = "className" > < / span> But the efficiency of the execution is completely different.

Looking at the above code, if it's not a simple selector like $('#id') that executes the find function, let's take a look at what find actually does:

find: function( selector ) {
 //Look in the current object
 var elems = jQuery.map(this, function(elem){
  return jQuery.find( selector, elem );
 });
 //The following code can be ignored, just do some processing
 //The static method test of js regular object is applied here
 //IndexOf (".." You need to understand the syntax of xpath to determine how to write a selector that contains the parent node
 //The idea is to filter the duplicate elements of an array
 return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
  jQuery.unique( elems ) :
  elems );
}

If so write $(' # id. The className '), will be executed to extend the find (' # id. The className 'document), because this was a document of jQuery array, then we look at extending the find his implementation of code is more, it is not listed, anyhow is from the second parameter passed to the dom to find it the first child, met # than id, met. Compare the className, there are: < +- and so on. So if we want to optimize, do we have to find a way to minimize the scope of the second parameter, the context, so it's less traversal?

So if we say $('#id').find('.classname '), that's all the program does, the first time we do init, we do one step, getElementById, we return, and then we do find('.classname ',divDocument), and then divDocument is the first time we select a div tag, and if we have a lot of dom objects under the document, we just go through divDocument a lot less, And it's much faster to select an id the first time than it is to go through it.

Now you get the idea. That is, the first layer of selection is better to be ID, but simple selector, the purpose is to define the scope, speed up.