JQuery constructor init parameter analysis (3), jqueryinit

JQuery constructor init parameter analysis (3), jqueryinit

After analyzing the strings, there will be no more left.

5. the selector parameter is a function.

This is easy to think of. First, let's talk about dom loading. We usually need to wait for the document to be loaded for processing when writing a script in the head. js is written like this.

1 window.onload=function(){2    your code...3 }

However, this process takes effect only after all resources are loaded. If there are many images on the page, loading will be slow. DOMContentLoad is easy to use. This event is triggered after the html document structure is loaded. For example, this page has 10 img elements. As long as these elements are obtained, the page does not care whether the image is loaded. This improves the js loading speed. The usage is as follows:

1  addEventListener("DOMContentLoad", function () { 2      your code3  }, false);　

Unfortunately, the earlier version of ie does not support this method. First, the earlier version of ie does not have the addEventListener method to bind events. However, there is a similar method named addEvent, which is often not used due to many problems, in addition, there is no DOMContentLoad event in earlier ie versions. For earlier ie versions (ie9), doScroll is usually used in combination with the onreadystatechange method for detection. See http://www.iefans.net/ie-mofang-domcontentloaded/ for details

Back to jQuery, we don't have to worry about browser compatibility when using jQuery:

1 $ (function () {2 yourcode... 3}) 4 5 // or 6 7 $ (document ). ready (function () {8 yourcode... 9 })

The first is the case where selector is a function. In fact, jQuery calls the ready method. The source code is as follows:

1 // HANDLE: $(function)2         // Shortcut for document ready3         } else if ( jQuery.isFunction( selector ) ) {4             return rootjQuery.ready( selector );5         }

RootjQuery has already said $ (document) before, and the ready method is executed in the end. This is why both write Methods loaded by dom can be used, the readdy method also uses the previously analyzed DOMContentLoad, doScroll, onreadystatechange, and so on, but it will be more complicated to write and then learn how to analyze the dom loading module.

6. selector is a jQuery object or special object.

In this case, not many people like to write $ (document) like this, but it is also supported if someone wants to write jQuery like this.

1 if ( selector.selector !== undefined ) {2     this.selector = selector.selector;3     this.context = selector.context;4 }

If selector has the selector attribute, it means it may be a jquery object. Why is it possible? Let's see the following example to understand it.

1  console.log($({selector:1}));

When I write this statement, is the selector attribute of the selector (this is the object {selector: 1}) exists? The result is also generated.

[Object, selector: 1, context: undefined, constructor: function, init: function, jquery: "1.7.1"…]0: Objectcontext: undefinedlength: 1selector: 1__proto__: jQuery[0]

This is an amendment to the author of the original book. It is not handled here only by jQuery objects.

 

If all the situations mentioned above do not match, jQuery has the last trick.

return jQuery.makeArray( selector, this );

The makeArray method converts a class array object to an array object. But there is still a more difficult task in the code, that is, to convert some arrays, arrays of classes, common objects, and other non-jQuery forms into jQuery forms. This method will be analyzed in detail later. At this point, the parameters of the jQuery constructor init have been analyzed. There are 7 subdivisions and 12 categories. Use a picture in the original book to summarize it.

1 init: function (selector, context, rootjQuery) {2 var match, elem, ret, doc; 3 4 // Handle $ (""), $ (null ), or $ (undefined) 5 if (! Selector) {6 return this; 7} 8 9 // Handle $ (DOMElement) 10 if (selector. nodeType) {11 this. context = this [0] = selector; 12 this. length = 1; 13 return this; 14} 15 16 // The body element only exists once, optimize finding it 17 if (selector = "body "&&! Context & document. body) {18 this. context = document; 19 this [0] = document. body; 20 this. selector = selector; 21 this. length = 1; 22 return this; 23} 24 25 // Handle HTML strings 26 if (typeof selector = "string ") {27 // Are we dealing with HTML string or an ID? 28 if (selector. charAt (0) = "<" & selector. charAt (selector. length-1) ==="> "& selector. length >=3) {29 // Assume that strings that start and end with <> are HTML and skip the regex check 30 match = [null, selector, null]; 31 32} else {33 match = quickExpr.exe c (selector); 34} 35 36 // Verify a match, and that no context was specified for # id 37 if (match & (match [1] |! Context) {38 39 // HANDLE: $ (html)-> $ (array) 40 if (match [1]) {41 context = context instanceof jQuery? Context [0]: context; 42 doc = (context? Context. ownerDocument | context: document ); 43 44 // If a single string is passed in and it's a single tag 45 // just do a createElement and skip the rest 46 ret = rsingleTag.exe c (selector ); 47 48 if (ret) {49 if (jQuery. isPlainObject (context) {50 selector = [document. createElement (ret [1])]; 51 jQuery. fn. attr. call (selector, context, true); 52 53} else {54 selector = [doc. CRES AteElement (ret [1])]; 55} 56 57} else {58 ret = jQuery. buildFragment ([match [1], [doc]); 59 selector = (ret. cacheable? JQuery. clone (ret. fragment): ret. fragment ). childNodes; 60} 61 62 return jQuery. merge (this, selector); 63 64 // HANDLE: $ ("# id") 65} else {66 elem = document. getElementById (match [2]); 67 68 // Check parentNode to catch when Blackberry 4.6 returns 69 // nodes that are no longer in the document #6963 70 if (elem & elem. parentNode) {71 // Handle the case where IE and Opera return items 72 // By name instead of ID 73 if (elem. id! = Match [2]) {74 return rootjQuery. find (selector); 75} 76 77 // Otherwise, we inject the element directly into the jQuery object 78 this. length = 1; 79 this [0] = elem; 80} 81 82 this. context = document; 83 this. selector = selector; 84 return this; 85} 86 87 // HANDLE: $ (expr, $ (...)) 88} else if (! Context | context. jquery) {89 return (context | rootjQuery ). find (selector); 90 91 // HANDLE: $ (expr, context) 92 // (which is just equivalent to: $ (context ). find (expr) 93} else {94 return this. constructor (context ). find (selector); 95} 96 97 // HANDLE: $ (function) 98 // procedure cut for document ready 99} else if (jQuery. isFunction (selector) {100 return rootjQuery. ready (selector); 1 01} 102 103 if (selector. selector! = Undefined) {104 this. selector = selector. selector; 105 this. context = selector. context; 106} 107 return jQuery. makeArray (selector, this); 108 },