JQuery kernel explanation and practice Reading Notes 2: cracking jQuery selector interface 1

JQuery kernel explanation and practice Reading Notes 2: cracking jQuery selector interface 1
The first two articles have introduced how to build a prototype of the jQuery framework. From this article, we will learn more about the interfaces of the jQuery selector. The jQuery selector is powerful but easy to use. It provides only one interface: jQuery (), which can also be abbreviated as $ (). 1. Simple but complex black hole jQuery provides a unique interface (jQuery () or $ () for the selector to communicate with the outside world. The foundation of the jQuery framework is to query, that is, to query the element objects of a document. Therefore, the jQuery object can be considered as a selector, and a query filter is constructed and run on this basis. The data set of jQuery query results is part of the jQuery object. The $ () function can contain parameters of different types, such as the selected string, HTML string, DOM object, and data set. How does jQuery distinguish these parameters? To simplify the jQuery framework, delete all methods, functions, and logic code first, and then use alert () in the init () constructor () method to obtain the type and information of the selector parameter. The Code is as follows: Copy code 1 (function () {2 var window = this; 3 jQuery = window. jQuery = window. $ = function (selector, context) {4 return new jQuery. fn. init (selector, context); 5}; 6 jQuery. fn = jQuery. prototype = {7 init: function (selector, context) {8 alert (selector); 9} 10}; 11}) (); 12 window. onload = function () {13 $ ("Div. red "); // get" div. red "14 $ (" div. red "); // get" div. red "15 $ (document. getElementById ("wrap"); // obtain "[object HTMLDivElement]" 16 $ ("# wrap", document. forms [0]); // get "wrap" 17 $ ("<div> hello, world </div>"); // get "<div> hello, world </div> "18}; copy Code 2. the logical relationship of the root node jQuery () four ways to build jQuery objects: jQuery (expression, [context]) jQuery (html, [ownerDocument]) jQuery (elements) jQuery (callback) jQuery object methods are all operations on DOM element objects. The jQuery object is jQuery. fn. the object created by the init constructor. fn. init. prototype = jQuery. fn path, and then use the jQuery prototype object to overwrite jQuery. the prototype object of fn makes the prototype method of jQuery objects inherited, forming a complicated but orderly relationship. 3. The jQuery constructor of the jQuery constructor is the jQuery. fn. init () function, which analyzes input parameters, generates and returns jQuery objects. The first parameter of this function is required. If it is null, the default value is document. Basically, the jQuery selector (jQuery. fn. the init () constructor) is used to create a jQuery object, that is, to append a DOM element set to the this object. The following two methods are available for appending: 1. for a single DOM element, you can directly pass the DOM element as an array element to this object, and query element 2 from the DOM document by ID. if there are multiple DOM elements, they are appended as a set, such as jQuery objects, arrays, and objects. In this case, you can use the CSS selector to match all DOM elements and then filter them, finally, construct the data structure of the class array, where the CSS selector uses jQuery (). find (selector) function. Using jQuery (). find (selector), you can analyze the selector string and find a set of syntactically compliant elements in the DOM document tree. Next we will analyze the init () initialization constructor function to analyze how the jQuery selector works. Copy code 1/** 2 * jQuery constructor source code analysis. 3 * Note that the book is analyzed in jQuery 1.3, there are some differences with the init function of the source code on Github. 4 * the overall idea is similar, but the specific implementation method is different, 5 */6 // jQuery prototype function, construct the entry to the jQuery object 7 // All jQuery object Methods inherit 8 jQuery through the jQuery prototype object. fn = jQuery. prototype = {9/* 10 * jQuery object initialization constructor, which is equivalent to the jQuery object type. This function is used to create the jQuery object 11 * parameter description: 12 * selector: the selector symbol, it can be any data type. Considering the need for DOM element operations, this function should be any data containing DOM elements 13 * context: context, specifying which node in the document DOM to start querying, the default value is document14 */15 init: function (selector, context) {16 selector = selector | document; // ensure that the selector parameter exists, the default value is document17/* 18 *. In the first case, when the processing selector is a DOM element, the context is ignored, that is, the second parameter 19 * is ignored. For example, $ (document. getElementById ("wrap"), jQuery (DOMElement) matches the DOM element. 20 * use selector first. nodeType determines that when selector is an element node, the length is set to 1, 21 * and assigned to context. In fact, context is used as the second parameter of init, 22 * also means that its context node is selector, which returns its $ (DOMElement) object 23 */24 if (selector. nodeType) {// The nodeType attribute exists, indicating that the selector is a DOM element 25 this [0] = selector; // directly store the DOM element of the current parameter to the class array 26 this. length = 1; // set the length of the class array to facilitate traversal and access 27 this. context = selector; // set the context attribute 28 return this; // return the jQuery object, that is, the class array object 29} 30 31 // If the separator parameter is a string, processing 32 // For example, $ ("<di V> hello, world </div> "), jQuery (html, [ownerDocument]) matches the HTML string 33 if (typeof selector =" string ") {34 // use the quickExpr regular expression to match the selected character string and decide whether to process the HTML string or the ID string 35 quickExpr =/^ [^ <(. | \ s) +> [^>] * $ | ^ # ([\ w-] +) $)/; 36 var match = quickExpr.exe c (selector ); 37 // verify the matching information 38 if (match & (match [1] |! Context) {39/* 40 * second case, processing HTML strings, similar to $ (html)-> $ (array) 41 */42 if (match [1]) {43 selector = jQuery. clean ([match [1], context); 44} 45/* 46 * The third case is to process the ID string, similar to $ ("# id ") 47 */48 else {49 var elem = document. getElementById (match [3]); // obtain this element to ensure that the element exists 50 // process according to name in IE and operabrowser, instead of returning element 51 if (elem & elem. id! = Match [3]) {52 return jQuery (). find (selector); // by default, document is called. find () method 53} 54 // otherwise, elem will be used as an element parameter to directly call the jQuery () function and return the jQuery object 55 var ret = jQuery (elem | []); 56 ret. context = document; // set the context attribute of the jQuery object 57 ret. selector = selector; // set the selector attribute 58 return ret on the jQuery object; // return the fourth case of jQuery object 59} 60} 61/* 62, processing jQuery (expression, [context]) 63 * For example, $ ("div. red ") expression string 64 */65 else {66 return jQuery (context ). find (s Elector); 67} 68} else if (jQuery. isFunction (selector) {69/* 70 * the fifth case, processing jQuery (callback), that is, $ (document ). for example, $ (function () {alert ("hello, world");}), 72 * or $ (document ). ready (function () {alert ("hello, world") ;}) 73 */74 return jQuery (document ). ready (selector); 75} 76 // ensure that the old selector can pass through 77 if (selector. selector & selector. context) {78 this. selector = selector. selector; 79 this. context = select Or. context; 80} 81/* 82 * sixth case, processing like $ (elements) 83 */84 return this. setArray (jQuery. isArray (selector )? Selector: jQuery. makeArray (selector); 85} 86 // other code... 87}; the relevant judgment logic has been described in detail in the copy code, and I will not explain it here. I will write it here today. The next article will be about how jQuery generates DOM elements and references DOM elements. You are welcome to reprint it. Please indicate the source for reprinting.