jquery kernel details and practice reading Note 2: Cracking jquery Selector Interface 1

The first two shows how to build a jquery framework that begins with a detailed understanding of the interface of the jquery selector. The jquery selector is powerful but simple to use, and it simply provides an interface: jquery () or abbreviated to $ ().

1. A simple but complex black hole

jquery provides a unique interface (jquery () or $ ()) that allows the selector to communicate with the outside world.
The jquery framework is based on querying, which is querying document element objects, so you can think of a jquery object as a selector and build and run a query filter on that basis.
The data collection for jquery query results is part of the jquery object.
The $ () function can contain different types of parameters, such as selecting strings, HTML strings, Dom objects, and data sets. How does jquery distinguish these parameters?
To facilitate understanding of the mysteries, simplify the jquery framework by removing all methods, functions, and logical code, and then using the alert () method in the Init () constructor to get the type and information of the selector parameter, as follows:

1(function() {2   varwindow = This;3JQuery = Window.jquery = window.$ =function(Selector, context) {4     return NewJQuery.fn.init (selector, context);5   };6Jquery.fn = Jquery.prototype = {7Init:function(Selector, context) {8 alert (selector);9        }Ten   }; One })(); AWindow.onload =function() { -$ ("div.red");//get "div.red" -$ ("div. Red");//get "div. Red" the$ (document.getElementById ("wrap"));//get "[Object Htmldivelement]" -$ ("#wrap", Document.forms[0]);//get "wrap" -$ ("<div>hello, world</div>");//get "<div>hello, world</div>" -};

2. The intertwined logical relationship

4 ways to build jquery objects in jquery ():

JQuery (expression, [context])

JQuery (HTML, [ownerdocument])

JQuery (elements)

JQuery (callback)

The methods of the JQuery object are all actions against the DOM element object.

The jquery object is the object created by the JQuery.fn.init constructor, and by JQuery.fn.init.prototype = Jquery.fn approach, and then use jquery's prototype object to cover the Jquery.fn prototype object, so that the JQuery object prototype method is inherited, thus forming a complex but orderly relationship.

3. jquery Builder

The constructor for jquery is the JQuery.fn.init () function, which parses the passed arguments and then generates and returns a JQuery object. The first parameter of this function is required, and if it is empty, it defaults to document.
In essence, building a jquery object using the jquery selector (the JQuery.fn.init () constructor) is the addition of a collection of DOM elements on the This object, including the following two ways:
1. If it is a single DOM element, you can pass the DOM element directly to the this object as an array element, and you can query the element from the DOM document by ID
2. If multiple DOM elements are attached as a collection, such as jquery objects, arrays, and objects, you can now match all DOM elements through the CSS selector, then filter, and finally construct the data structure of the class array
Where the CSS selector is done through the jquery (). Find (selector) function. With jquery (). Find (selector), you can parse the selector string and find a collection of elements in the DOM document tree that conforms to the syntax.

Let's analyze the init () initialization constructor function to analyze how the jquery selector works.

1 /**2 * jquery Builder Source code analysis,3 * Note that the book is based on the 1.3 version of jquery, which has a certain discrepancy with the Init function of the source code on GitHub .4 * But the overall idea is similar, but the specific implementation of the way is different,5  */6 //jquery prototype function, constructs the entry of jquery object7 //all jquery object methods are inherited by jquery prototype objects8Jquery.fn = Jquery.prototype = {9     /*Ten * JQuery Object initialization constructor, equivalent to the type of jquery object, which is responsible for creating jquery objects One * Parameter Description: A * Selector: the symbol of the selector, which can be any data type. Consider the need for DOM element operations, which should be any data that contains DOM elements - * Context: Contextual, specifies which node in the document DOM begins the query, the default value is document -      */ theInit:function(Selector, context) { -Selector = Selector | | Document//ensure that the selector parameter is present and the default value is document -         /* - * In the first case, the handle selector is a DOM element, and the context is ignored, ignoring the second argument + * For example, $ (document.getElementById ("wrap")), JQuery (domelement) matches the DOM element.  - * First Use Selector.nodetype to determine when selector is an element node, set length to 1, + * and assigned to context, actually the context as the second parameter of Init, A * Also means that its context node is selector the node, returning its $ (domelement) object at          */ -         if(Selector.nodetype) {//There is a NodeType attribute that indicates that the selector is a DOM element -              This[0] = selector;//directly storing the DOM element of the current parameter in the class array -              This. length = 1;//sets the length of an array of classes to facilitate traversal of access -              This. context = selector;//Setting Context Properties -             return  This;//returns a JQuery object, which is a class array object in         } -          to         //If the selector argument is a string, it is processed +         //For example, $ ("<div>hello, world</div>"), JQuery (HTML, [ownerdocument]) matches the HTML string -         if(typeofSelector = = "string") { the             //Use the quickexpr regular expression to match the selector string to decide whether to process the HTML string or the ID string *quickexpr =/^[^<]* (< (. | \s) +>[^>]*$|^# ([\w-]+) $)/; $             varMatch =quickexpr.exec (selector);Panax Notoginseng             //to verify matching information -             if(Match && (match[1 | | |!)context)) { the                 /* + * Second case, processing HTML string, similar to $ (HTML), $ (array) A                  */ the                 if(match[1]) { +selector = Jquery.clean ([match[1]], context); -                 }  $                 /* $ * Third case, processing ID string, similar to $ ("#id") -                  */ -                 Else { the                     varElem = document.getElementById (match[3]);//gets the element that ensures that the element exists -                     //processing in IE and Opera browser under name, instead of returning elements based on IDWuyi                     if(Elem && elem.id! = match[3]) { the                         returnJQuery (). Find (selector);//default Call Document.find () method -                     } Wu                     //Otherwise, the jquery () function will be called directly by Elem as an element parameter, returning the jquery object -                     varret = jQuery (Elem | | []);  AboutRet.context = document;//Setting the context properties of a jquery object $Ret.selector = selector;//Set the Selector property on a jquery object -                     returnRet//return jquery Object -                 } -             }  A             /* + * Fourth case, handling of jquery (expression, [context]) the * For example, the expression string for $ ("Div. Red") -              */ $             Else { the                 returnjQuery (context). Find (selector); the             } the}Else if(Jquery.isfunction (selector)) { the             /* - * Fifth case, dealing with jquery (callback), that is, $ (document). The shorthand for Ready () in * For example, $ (function () {alert ("Hello, World");}), the * or $ (document). Ready (function () {alert ("Hello, World");}) the              */ About             returnjQuery (document). Ready (selector); the         } the         //make sure the old selector is able to pass the         if(Selector.selector &&selector.context) { +              This. selector =Selector.selector; -              This. Context =Selector.context; the         }Bayi         /* the * Sixth case, handling similar $ (elements) the          */ -         return  This. SetArray (Jquery.isarray (selector)?Selector:jQuery.makeArray (selector)); -     } the     //other code ...  the};

The relevant judgment logic has been explained in detail in the code and is not explained here.

Write it here today, and the next one will be about how jquery generates DOM elements and references DOM elements. Welcome reprint, Reproduced please indicate the source.

Personal public Number: Programmlife, if you are interested in the attention, the main content is a yard of the farmers to think of the sigh, or scan the QR code below the following:

jquery kernel details and practice reading Note 2: Cracking jquery Selector Interface 1