jquery class Array Structure learning notes

We all know that we use the $ () to produce the JQuery object can use subscript to get the corresponding subscript element.

For a chestnut, a page has 5 div tags, we use $ ("div") to get to these elements, and then we can use $ ("div") [0] to get to the first element of this collection of elements.

But jquery is not an array object, so why should we use subscripts to get the elements? Looking at the Init method in jquery source, you can see the following code (this is my simplified version, omitting the code that is irrelevant to the article):

function Jquery () {     this[0] = "Here is the node selected by the ID selector";     This.length = 1}var A = new Jquery (); Console.log (a.length)  //print: 1console.log (a[0]);     Print: This is the node to which an ID selector is selected

As you can see, this implements the implementation of the class array structure, but he is still not a native array structure, cannot use native methods such as array push,pop,shift,unshift, but can get the corresponding node by subscript, and the length property.

jquery provides a Makearry method that transforms the structure of a class array into a true array structure

Makearray method Usage Rules:

• A class array object, which should have at least the length property, even if its value is 0, it can have no "element" (equivalent to an empty array).
• If object the parameter does not have a length property, it is not a class array object. jQuery.makeArray()It is directly treated as an element in the result array.
• A string object has a length property, but it is not generally treated as a class array object. The function still directly sees it as an element in the result array.
• If the maximum number attribute of an object is greater than or equal to the length property, the number property that is greater than or equal to its value is ignored, whichever is the length property.

Here is the source code for Makearray:

functionMakearray (arr, results) {varret = Results | | []; if(Arr! =NULL) {        //If arr is an array of classes, call merge to close the return value        if(Isarraylike (Object (arr))) {Jquery.merge (ret),typeofarr = = = "string"?[arr]: arr); }  Else {            //is not an array. Drop it at the end of the returned array            //equivalent to Ret.push (arr)Core_push.call (ret, arr); }    }}

The subscript gets the element, the EQ () gets the element, and the get () gets the difference between the elements:

1. Array TDs: A collection of some jquery objects

2. Td = Tds.eq (i): Of course, one of the jquery objects;

3. Tds[i]: This is the original DOM object;

4. Tds[i].classname: Call the property of the original Dom object className;

5. Tds.eq (i): The jquery object is returned, and of course there is no original DOM attribute classname

A classic summary of common methods of Jquery

1. References to page elements

The $ () reference element through jquery includes methods such as the ID, class, element name, and the hierarchy of elements and Dom or XPath conditions, and the returned object is a JQuery object (collection Object).

The method defined by the DOM cannot be called directly.

2. The conversion of JQuery objects to DOM objects

Ordinary DOM objects can generally be converted to jquery objects by $ ().

such as: $ (document.getElementById ("MSG")) is a jquery object, you can use the method of jquery.

$ ("#msg"). html ();

$ ("#msg") [0].innerhtml;

$ ("#msg"). EQ (0) [0].innerhtml;

$ ("#msg"). Get (0). InnerHTML;

3. Get an item from the jquery collection

Gets an item (specified by index) that can be obtained using the EQ or get (n) method or index number.

Note that the EQ returns the JQuery object, while the Get (n) and the index return the DOM element object.

$ ("div"). EQ (2). html (); Methods for invoking jquery objects

$ ("div"). Get (2). InnerHTML; Invoking the Dom's method properties

jquery class Array Structure learning notes