jquery Technology Insider Electronic version 4

Parameter selector is a complex HTML code

The DOM element is created using the browser's innerhtml mechanism

Line 157th: If the HTML code satisfies the caching criteria, the converted DOM element must be duplicated before it is used, or it can be used directly

Line 160th: Merge the newly created array of DOM elements into the current jquery object and return

The parameter selector is "#id" and the parameter context is not specified

Call document.getElementById () to find the DOM element that contains the specified ID attribute

Line 169th to 173th: If the attribute ID value of the found element is not equal to the value passed in, call sizzle to find and return a new jquery object that contains the selected element.

Parameter selector is a selector expression

Executes Rootjquery.find (selector) If no context is specified, or context.find (selector) If the context is specified and the context is a jquery object, if the context is specified. But the context is not a jquery object, the This.constructor (context) is executed. Find (selector)

Parameter selector is a function

Line 197th to 199th: If the parameter selector is a function, it is considered to be a bind ready event. From the 198th line of code you can see that $ (function) is $ (document). Shorthand for Ready (function)

Parameter selector is a jquery object

It is considered to be a jquery object and will replicate its properties selector and context.

Parameter selector is any other value

If selector is an array or a pseudo-array (such as a jquery object), it is added to the current jquery object, and if Selector is a JavaScript object, it is placed in the current jquery object as the first element, or in the case of other types of values. is placed in the current jquery object as the first element. Finally, the current jquery object is returned.

2.4 jquery.buildfragment (args, nodes, scripts)

2.4.1 Implementation principle

Method Jquery.buildfragment (args, nodes, scripts) first creates a document fragment DocumentFragment and then calls the method Jquery.clean (El-ems, context, fragment , scripts) converts the HTML code into DOM elements and stores it in the created document fragment.

In addition, if the HTML code conforms to the caching criteria, the method jquery.build-fragment () caches the converted Dom elements and reads them directly from the cache the next time (in fact, the third time) when the same HTML code is converted, without the need for duplicate conversions

2.4.2 Source Code Analysis

5 Steps:

1) If the HTML code conforms to the cache condition, it attempts to read the cached DOM element from the cache object jquery.fragments. 2) Create document fragment DocumentFragment. 3) Call the method Jquery.clean (Elems, context, fragment, scripts) to convert the HTML code into a DOM element and store it in the created document fragment. 4) If the HTML code conforms to the caching criteria, put the converted DOM element into the cached object jquery.fragments. 5) finally returns the document fragment and cache status {fragment:fragment,cacheable:cacheable}

Line No. 6085: Define Method Jquery.buildfragment (args, nodes,scripts), which accepts 3 parameters:

Parameter args: Array containing the HTML code to be converted to DOM elements

Parameter nodes: Array containing Document object, jquery object, or DOM element

Parameter scripts: An array that holds the script element in the HTML code

First try to read Nodes[0] 's property ownerdocument and assign a value to doc,ownerdocument that represents the document object where the DOM element resides. If Nodes[0].ownerdocument does not exist, it is assumed that nodes[0] is a document object and assigned to Doc, but Doc may not be a Document object, At this point you need to check if the doc.createdocumentfragment exists and if it does not, fix doc for the current document object

Attempt to read cached DOM elements from cache object jquery.fragments

All of the following conditions are met before the cache condition is considered eligible

• The length of the array args is 1, and the first element is a string, that is, the array args contains only a piece of HTML code

The length of the HTML code is less than (1/2KB), which may cause the cache to consume too much memory.

• Document Object doc is the current document object, which caches only the DOM elements created for the current document and does not cache other frames (IFRAME)

The HTML code begins with a left angle bracket, which caches only DOM elements and does not cache text nodes

The HTML code cannot contain the following tags:<script>, <object>, <embed>, <option>, <style>

• The current browser can correctly copy the radio buttons and check boxes of the selected state checked, or the radio buttons and check buttons in the HTML code are not selected

• The current browser can copy the HTML5 element correctly, or the HTML code does not contain a HTML5 tag

If the HTML code satisfies the cache condition, set the variable cacheable to True

Line No. 6115 to No. 6118: Try to read the cached DOM element from the cache object jquery.fragments. If the cache hit and the cached value is not 1, it means that the document fragment is read, assigned to the variable fragment, and the document fragment contains the cached DOM element

jquery Technology Insider Electronic version 4