Read jQuery 5 (DOM element)

You can use the get method to obtain DOM elements after jQuery $ is called, as shown below: Copy codeThe Code is as follows: // method 1
$ ('Div '). get (1); // obtain the second div on the page

Of course, you can also use the array index method to obtainCopy codeThe Code is as follows: // method 2
$ ('Div ') [1]; // obtain the second div on the page

Both methods can obtain a specific DOM element, but the toArray method is used to obtain the DOM element set.Copy codeThe Code is as follows: $ ('div '). toArray (); // return all the divs on the page and put them in the array in sequence.

Let's look at the source code of the get method.Copy codeThe Code is as follows: get: function (num ){
Return num = null?
// Return a 'clean' array
This. toArray ():
// Return just the object
(Num <0? This [this. length + num]: this [num]);
},

Get is a ternary operator, that is, two branches.
Branch 1. If no parameter is set, all DOM elements are obtained (toArray is called)
Branch 2. When num is a number (INDEX), a specified DOM element is returned. (If the number is negative, a reverse query is obtained)

Branch 1 actually converts the jQuery object (pseudo array) into a real array, and branch 2 actually (using brackets []) to take the "pseudo array" element. The following uses $ ('div ') to describe the entire call process.
1. Get the page div element (document. getElementsByTagName ('div '))
2. Convert the collection HTMLCollection/NodeList to a real array.
3. Convert the array into a pseudo array/ArrayLike (jQuery object)

The first step is what the selector does;
Step 2: Convert HTMLCollection/NodeList into an array as discussed previously;
Step 3: Convert the array into a pseudo array/ArrayLike (jQuery object). You only need to call the push of the next array.
The following example may be easy to understand.

Copy codeThe Code is as follows: var jqObj = {0: 'one', 1: 'two', 2: 'Three ', length: 3}, // pseudo array (ArrayLike)
Ary = ['one', 'two', 'three ']; // Array
// Convert the pseudo array (ArrayLike) into an array
Function jqObjToArray (json ){
Var slice = Array. prototype. slice;
Return slice. call (json, 0 );
}
// Convert the array into a pseudo array (ArrayLike)
Function ArrayToJqObj (ary ){
Var obj ={}, push = Array. prototype. push;
Push. apply (obj, ary );
Return obj;
}
Console. log (jqObjToArray (jqObj ));
Console. log (ArrayToJqObj (ary ));

JQuery also provides the first/last/eq/slice method, which is different from the get/toArray method mentioned above. They return jQuery objects instead of HTMLElement. The following html snippetsCopy codeThe Code is as follows: <div id = "a"> A </div>
<Div id = "B"> B </div>
<Div id = "c"> C </div>
<Div id = "d"> D </div>

$ ('Div '). first () returns the first element of the jq object set, that is, Div [id = a], structure: {0: div, length: 1 ,...}; //... other attributes are omitted.
$ ('Div '). last () returns the final element of the jq object set, that is, Div [id = d], structure: {0: div, length: 1 ,...};
$ ('Div '). eq (2) returns the third element matched by the jq object, that is, Div [id = c], structure: {0: div, length: 1 ,...};

View the source code to learn:
1. The eq method is called directly in the first and last methods.
2. the slice method is called in the eq method.

Therefore, the slice method is fundamental. This method naturally reminds us of the Array slice method. In fact, jQuery uses the Array push and slice methods.
1. Convert the pseudo Array into an Array using the Array. prototype. slice Method.
2. Convert the Array to a pseudo Array Using the Array. prototype. push method.
Of course, the slice Method in jQuery calls pushStack. Slice is abbreviated here, as follows:Copy codeThe Code is as follows: slice: function (){
Var ret = $ (); // a key sentence to construct a new jq object,
Var ary = slice. apply (this, arguments); // here this is the jq object, which is converted to an array subset based on parameters
Push. apply (ret, ary); // convert to a jq object, that is, in the pseudo array format.
Return ret;
},

Related:

Convert HTMLCollection/NodeList/pseudo array to an array
ZChain-05.rar