Introduction to the principle of jquery selector (how to use $())_jquery

Every time a jQuery object is declared, the jQuery.prototype.init object is returned. Many people do not understand that init is obviously a method of jQuery.fn. In fact, this is not a method, but the structure of init. Function, because the prototype object of js can realize inheritance, and the object of js is only a reference and not a copy. The sub-objects of new jQuery, new jQuery.fn and new jQuery.fn.init are the same, but they are not executed until init different.

When we use the selector $(selector,content), init(selectot,content) will be executed. Let’s see how it is executed in inti:

Copy code The code is as follows:

if ( typeof selector == "string" )
{
//Regular match, see if it is HTML code or #id
var match = quickExpr.exec(selector);
//There is no DOM element set, document or jQuery object to be found .
//selector is in the form of #id
if ( match && (match[1] || !context) )
{
// HANDLE: $(html) -> $(array )
//HTML code, call clean to complete the HTML code
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context );
}
// Yes: $("#id")
else {
//Determine whether the Dom of id is loaded
var elem = document.getElementById( match[3] );
if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector );
return jQuery( elem );//Execution completed return
}
selector = [];
}
//Non-id form. Search in context or full text
}
else{
return jQuery( context ).find( selector );
}
}

This means that only the selector written as $('#id') is the fastest, which is equivalent to executing getElementById once, and the subsequent program is No more execution required. Of course, often the selector we need is not so simple. For example, we need the CSS under id to be className. There are such writing methods as $('#id.className') and $('#id').find('.className' );The execution results of both writing methods are the same. For example,

will definitely return It is , but the execution efficiency is completely different.

After analyzing the above code, if it is not a simple selector like $('#id'), the find function will be executed. Then let’s see what find does:

Copy code The code is as follows:

find: function( selector ) {
// Find
in the current object var elems = jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
});
//The code below It can be ignored, just do some processing
//The static method test of js regular object is applied here
//indexOf("..") needs to understand the syntax of xpath, which is to determine whether the selector contains the parent node Writing
//The original intention is to filter the repeated elements of the array
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf("..") > ; -1 ?
jQuery.unique( elems ) :
elems );
}

If you write $('#id .className') like this, it will execute Extended find('#id .className',document), because the current this is the jQuery array of document, then we will take a look at the implementation of the extended find. There are many codes, so we will not list them. In short, we will start from the second Start searching for the first child node of the DOM after passing the parameters, meet # and compare the id, meet. and compare the ClassName, and: < - and other processing. Then if we want to optimize, should we find a way to minimize the scope of the second parameter context, so that there will be very few traversals?

If we write $('#id').find('.className') like this, then the program will only be executed like this. When it is first init, it will execute getElementById, then it will return, and then execute find('. className', divDocument), divDocument is the div tag that we select for the first time. If there are many DOM objects under the document, will it be a lot less times to only traverse the divDocument this time, and the speed of selecting the id for the first time is also Much faster than traversing.

Everyone should understand now. That is to say, the first-level selection is preferably an ID, but a simple selector. The purpose is to define the range and improve the speed.