jQuery object is an array object class, which stores the corresponding references to the DOM, we can directly use [] acquired DOM node in an index may be acquired in the DOM node with an index get method, can also be used toArray () method of the disposable jQuery object is converted into an array, for example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <p>1</p> <p>2</p> <P > . 3 </ P > < Script > var jobject = $ ( ' P ' ); the console.log (jobject [ 0 ] .innerHTML) // Output:. 1 the console.log (jobject [ . 1 ] .innerHTML) // Output : 2 the console.log (jObject.get ( 2 ) .innerHTML) // output:. 3 the console.log (jObject.toArray ()) // output: Array (3) [p, p, p]; each element It is a DOM node equal to the corresponding element p </ Script > </ body> </html>
Converting the DOM object to jQuery object more convenient, directly into the jQuery constructor to, the following:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <p>1</p> <p>2</p> <P > . 3 </ P > < Script > var P = document.getElementsByTagName ( ' P ' ), Result = []; for (the let I = 0 ; I < p.length; I ++ ) result.push (I) // getElementsByTagName obtained is HTMLCollection objects, but also an array of classes, we convert it to an array format console.log ($ (p) instanceof $) // output true; represents $ (p) is a jQuery object the console.log ($ (P) .size ()) // Output: 3; because there are three elements in the DOM P the console.log ($ (P [ 0 ]) the instanceof $) // output true; represents $ (P ) is a jQuery object the console.log ($ (P [ 0 ]) size ()). // output: 1; because we only pass a p [0], only a DOM node </ Script > </ body > </ HTML >
Output is as follows:
The reason, quite detailed comments in the code, and ah, it is so
Source code analysis
writer by: Desert QQ: 22969969
DOM objects are converted into jQuery jQuery inside the init () function is implemented within, as follows:
the init: function (selector, context, rootjQuery) { / * slightly * / // the Handle $ (DOMElement) IF (selector.nodeType) { // selector has attributes nodeType, the selector is considered DOM elements, such as: $ (document. getElementById ( 'D')) the this .context = the this [0] = Selector; // save the DOM node references the this .length =. 1; // set the length property. 1 return the this ; // return to this, in order to support the chain operator } / * skip * / return jQuery.makeArray (Selector,the this ); // this is the last logic, if the selector is an array or arrays pseudo },
makeArray is the function of the jQuery, for converting into a real data array type, as follows:
makeArray: function (Array, results) { // converts a real object array-array var RET results || = []; // if the correction results for the empty array does not exist, when the initialization jQuery performed here here result is equal jQuery object, i.e. above the incoming passed the this IF (array! = null ) { // filter array parameter is null, the undefined situation. // of The window, strings (and Functions) Also have have 'length' // Tweaked the handle to the Blackberry 4.7 Slightly Logic DELINQUENCY the RegExp # 6930 var type = jQuery.type (Array); IF (be array.length == null=== type || "String" || type === "function" || type === "regexp" || jQuery.isWindow (array)) { // if no attributes length array or the parameter is a string array , or function, or a regular or Window object push.call (ret, array); // that parameter array array is not, nor is it an array of class Object, array method is called push () to the parameter and return value ret is inserted end. } The else { jQuery.merge (ret, array); // or that the parameter array is an array or array object class, calling methods jQuery.merge () returns the combined values of the parameter to the ret } } return ret; },
Finally, return the array, because we passed this in the second argument, therefore makeArray finally returns this
For jQuery object into a DOM objects, since jQuery array itself is an object class, and therefore, we can directly use the [] obtain the index, and to get toArray methods, these operations defined on jQuery prototype, i.e. jQuery on .fn, as follows:
= = {jQuery.prototype the jQuery.fn // rewritable jQueyr.fn
/ * skip * /
toArray: function () { // Converts the current jQuery object for the real array, the array contains all the conversion elements.
return slice.call ( the this , 0 );
},
GET: function (NUM) { // Returns the specified element jQuery object or the current location of the array containing all the elements,
return NUM == null ? // the Return A 'Clean 'Array the this .toArray (): // the Return Just The Object
(NUM <0? the this [ the this .length + NUM]:
the this [NUM]); // directly back to this [num], that is, and we use [] is the same, just a little package
}
/ * slightly * /
}
We can see to get it, is taken directly from [] on this, but the array is called toArray a slice method to convert an array into a real class Array