jquery Object access function (Get,index,size,each)

1.get () element collection

gets the collection of all matching DOM elements. This is a backward-compatible way of getting all matching elements (unlike jquery objects, which are actually array of elements). This function is useful if you want to manipulate DOM objects directly instead of JQuery objects. Example Description: Select all the images in the document as an array of elements and reverse the array using the reverse method built in the array. HTML code: jQuery Code: $ ("img" ]

2.get (Index) returns the DOM element

gets one of the matching elements. Num represents the element that gets the first few matches. This allows you to select an actual DOM element and manipulate it directly, rather than through the JQuery function. $(this). Get (0) is equivalent to$ (this) [0]. The parameter IndexNumber gets an example of the element at index position: HTML code: jQuery Code: $ ("img"). Get (0]

3.index () find elements in sibling locations

Searches for matching elements and returns the index value of the corresponding element, counting from 0.

If you do not pass a parameter to the. Index () method, the return value is the position of the first element in the collection of jquery objects relative to its sibling element .

If the argument is a set of DOM elements or jquery objects, the return value is the position of the passed element relative to the original collection.

If the parameter is a selector, the return value is the position of the original element in relation to the selector match element. If no matching element is found, 1 is returned.

Please refer to the example for details.

Parameters subject (optional) Selector,element

Objects to search for

Example Description:

Find the index value of an element

HTML Code:

<ul>  <li id= "foo" >foo</li>  <li id= "Bar" >bar</li>  <li id= "Baz" >baz </li></ul>

JQuery Code:

// 1, passing a DOM object that returns the index position of the object in the original collection // 1, passing a jquery object // 1, passing a set of jquery objects, returning the index position of the first element in this object in the original collection // 1, pass a selector to return the #bar position in all Li // 1, does not pass parameters, returns the index position of this element in the peer. 

4.each method of traversing an object: looping through an object

Executes a function with each matching element as the context.

means that each time the function passed in is executed, the This keyword in the function points to a different DOM element (each time a different matching element). Also, each time a function is executed, a function is passed a numeric value that represents the position of the element in the matched element collection as an argument (the zero-based integer type) for the execution environment. returning ' false ' will stop the loop (just like using ' break ' in a normal loop). Return ' true ' to jump to the next loop (just like using ' continue ' in a normal loop).

Parameters CallbackFunction

Functions to be executed for each matching element

Example Description:

Iterate over two images and set their SRC properties. Note: Here this refers to a DOM object rather than a JQuery object.

HTML Code:

JQuery Code:

$ ("img"). each (function(i) {   this. src = "Test" + i + ". jpg";}); 

Results:

[ ]

Describe:

If you want a jquery object, you can use the $ (this) function.

HTML Code:

<button>change colors</button><span></span> <div></div> <div></div ><div></div> <div></div><div id= "Stop" >stop here</div> <div></div ><div></div><div></div>

JQuery Code:

$ ("img"). each (function() {  $ (this). Toggleclass ("example");}); 

Describe:

You can use ' return ' to jump out of each () loop ahead of time.

HTML Code:

<button>change colors</button><span></span> <div></div> <div></div ><div></div> <div></div><div id= "Stop" >stop here</div> <div></div ><div></div><div></div>

JQuery Code:

$ ("button"). Click (function  () {$ ("div"). each (function  (index, Domele) {    //   $ (domele). CSS ("BackgroundColor", "yellow");     if ($ (this). Was ("#stop")) {   $ ("span"). Text ("Stopped at Div Index #" + index);    return false ;   } });});

5.length properties: same as size ()

The number of elements in the JQuery object.

The number of elements currently matched. The size returns the same value.

Example Description:

Calculate the number of all pictures in a document

HTML Code:

JQuery Code:

$ ("img"). length;

Results: 2

6. selector　　返回选择器

JQuery 1.3 is new. Returns the original selector passed to jquery ().

In other words, it returns what selector you use to find this element. Can be used with the context for precise detection of selector queries. These two properties are useful for plug-in developers.

Example Description:

Determining the selector for a query

JQuery Code:

$ ("ul").  Append ("<li>" + $ ("ul"). Selector + "</li>")  . Append ("<li>" + $ ( "ul Li"). Selector + "</li>").  Append ("<li>" + $ ("Div#foo ul:not ([class])"). Selector + "</ Li> ");

Results:

Ulul Lidiv#foo Ul:not ([class])

7.size () the same as the length property

The number of elements in the JQuery object.

The return value of this function is consistent with the ' length ' property of the JQuery object.

Example Description:

Calculate the number of all pictures in a document

HTML Code:

JQuery Code:

$ ("img"). Size ();

Results:

2

jquery Object access function (Get,index,size,each)