A brief analysis of the working principle of jquery Selector $ ()

Every time a jquery object is declared, Returned is the JQuery.prototype.init object, many people will not understand, Init is clearly Jquery.fn method Ah, actually here is not the method, but the Init constructor, because JS prototype object can be inherited, plus JS object is only reference will not be copied, n EW jquery,new Jquery.fn and new jQuery.fn.init are the same sub-objects, but there is no difference between executing to init. Siyang County Civil Aviation Authority

When we use the selector $ (selector,content), we execute init (selectot,content), and we look at how the Inti is executed:

View Source print?

01	if( typeof selector == "string")

02

{

03	//正则匹配，看是不是HTML代码或者是#id

04	varmatch = quickExpr.exec( selector );

05	//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。

06	//selector是#id的形式

07	if( match && (match[1] || !context) )

08

{

09	// HANDLE: $(html) -> $(array)

10	//HTML代码,调用clean补全HTML代码

11	if( match[1] ){

12	selector = jQuery.clean( [ match[1] ], context );

13

}

14	// 是: $("#id")

15

else{

16	//判断id的Dom是不是加载完成

17	varelem = document.getElementById( match[3] );

18	if( elem ){

19	if( elem.id != match[3] )

20	returnjQuery().find( selector );

21	returnjQuery( elem );//执行完毕return

22

}

23	selector = [];

24

}

25	//非id的形式.在context中或者是全文查找

26

}

27

else{

28	returnjQuery( context ).find( selector );

29

}

30

}

This means that only the selector written as $ (' #id ') is the fastest, equivalent to performing a getElementById, the back of the program will not have to execute. Of course, the selector we need is not so simple, for example, we need the ID of the CSS under ClassName, there is such a way of writing $ (' #id. ClassName ') and $ (' #id '). Find ('. ClassName '); The results of the two formulations are the same, such as <div id= "id" ><span class= "ClassName" ></SPAN></DIV> class= "ClassName" ></span>, but the efficiency of execution is completely different.

In the analysis of the above code, if not $ (' #id ') such as a simple selector, will execute the Find function, then we look at the end is used:

View Source print?

01	find: function( selector ) {

02	//在当前的对象中查找

03	varelems = jQuery.map(this, function(elem){

04	returnjQuery.find( selector, elem );

05

});

06	//下边的代码可以忽略，只是做一些处理

07	//这里应用了js的正则对象的静态方法test

08	//indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法

09	//本意就是过滤数组的重复元素

10	returnthis.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?

11	jQuery.unique( elems ) :

12

elems );

13

}

If you write $ (' #id. ClassName '), it will execute to the extended find (' #id. ClassName ', document), because the current this is the jquery array of document, then we look at the extension of find his implementation, The code is more, it is not listed, in short, the second parameter is passed from the first sub-node of the DOM to find, meet the # than the ID, met. classname, there are: <+-and other processing. Then we have to optimize, is it necessary to find a way to make the second parameter context the scope of the smallest, so that the traversal is not very small?

If we write $ (' #id '). Find ('. ClassName '), that program executes only this way, when the first Init executes a step getElementById, it goes back, then executes find ('. ClassName '), Divdocument), Divdocument is our first choice is the div tag, if the document has a lot of Dom objects, this time only traverse divdocument is not many times, and the first time to select the ID of the speed is much faster than traversal.

Now everyone should be aware of it. That is, the first layer of choice is the best ID, but a simple selector, the purpose is to define the scope, improve speed.

A brief analysis of the working principle of jquery Selector $ ()