Introduction to jquery selector principles

This article mainly introduces the jquery selector principle ($ () usage). For more information, see

Every time you declare a jQuery object, jQuery is returned. prototype. the init object is obviously jQuery. fn method. Actually, this is not a method, but an init constructor. Because JavaScript prototype objects can be inherited, adding JavaScript objects only reference objects and not copying them. new jQuery, new jQuery. fn and new jQuery. fn. the init sub-objects are the same, except whether the init is executed differently. When we use the selector $ (selector, content), The init (selectot, content) will be executed. Let's see how the code is executed in inti: if (typeof selector = "string") {// regular match, check whether it is an HTML code or # id var match = quickExpr.exe c (selector ); // No DOM Element Set, document, or jQuery object to be searched. // Selector is # id form 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 {// judge whether the id Dom is loaded successfully var elem = document. getElementById (match [3]); if (elem) {if (elem. id! = Match [3]) return jQuery (). find (selector); return jQuery (elem); // return} selector = [];} // non-id format. in context or full-text search} else {return jQuery (context ). find (selector) ;}} it indicates that only the selector writes $ ('# id') as quickly as possible. It is equivalent to executing getElementById once, and subsequent programs do not need to be executed. Of course, the selector we usually need is not that simple. For example, we need to set the CSS under the id to className and write $ ('# id. classname') and $ ('# id '). find ('. classname'); the execution results of the two statements are the same, for example, <div id = "id"> <span class = "className"> </span> </div>, the returned results must all be <span class = "className"> </span>, but the execution efficiency is completely different. After analyzing the code above, if it is not a simple selector such as $ ('# id'), it will execute the find function. Then let's take a look at how find is used: the Code is as follows: find: function (selector) {// find var elems = jQuery in the current object. map (this, function (elem) {return jQuery. find (selector, elem) ;}); // the following code can be ignored, just do some processing // here the static method test // indexOf (".. ") You need to understand the xpath syntax, that is, to determine whether the selector contains the parent node in writing // the 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'), and the extended find ('# id. classname', document), because the current this is the jQuery array of the document, we are looking at the implementation of the extended find. If there are many codes, it will not be listed, in short, we start to find the first sub-node of the dom that is passed by the second parameter. for more information, see <+. If we want to optimize it, is it necessary to try to minimize the range of the second context parameter, so that traversal is very rare? If we write $ ('# id') like this '). find ('. classname'), the program is only executed in this way. When init is used for the first time, execute getElementById and return, and then execute find ('. classname', divDocument), divDocument is the div tag we selected for the first time. If there are many dom objects in the document, this time we only traverse divDocument many times, in addition, the id Selection Speed for the first time is much faster than the traversal speed. Now you should understand it. That is to say, the first layer should be an ID, but a simple selector. The purpose is to define the range and increase the speed.