jquery Learning one object access _jquery

each ()

each (callback)

Executes a function as a context for each matching element.

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 the function is executed, a function is passed a numeric value representing the location of the element in the matching set of elements as the execution environment (the zero-based shaping).

Returning ' false ' will stop the loop (like using ' break ' in an ordinary loop). Returns ' true ' to the next loop (like using ' Continue ' in an ordinary loop).

Execute a function within the context of every matched element.

This means so every time the Passed-in function was executed (which is once to every element matched) the ' this ' keyword Points to the specific DOM element.

Additionally, the function, when executed, are passed a single argument representing the position of the the element in the mat Ched set (integer, Zero-index).

Returning ' false ' from within the each function completely stops the loop through all of the elements A ' break ' with a normal loop). Returning ' true ' from within-the loop skips to the next iteration (this is as using a ' continue ' with a normal loop).

return value

Jquery

Parameters

Callback (function): functions to be executed for each matching element

Example

Iterate over two images and set their SRC attributes. Note: This here refers to a DOM object rather than a JQuery object.

HTML Code:

JQuery Code:

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

Results:

[ ]

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

JQuery Code:

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

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 = = = This  $ (domele). CSS (" BackgroundColor "," yellow ");  if ($ (this). are ("#stop")) {  $ ("span"). Text ("Stopped at Div Index #" + index);  return false;  } });});

--------------------------------------------------------------------------------------------------------------- -----------------

Size ()

The number of elements in the JQuery object.

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

The number of elements in the JQuery object.

This returns the same number as the ' length ' of the JQuery object.

return value

Number

Example

Calculate the number of all pictures in a document

HTML Code:

JQuery Code:

$ ("img"). Size ();

Results:

2

--------------------------------------------------------------------------------------------------------------- ----------

Length

The number of elements in the JQuery object.

The number of currently matched elements. size will return the same value.

The number of elements in the JQuery object.

The number of elements currently matched. The size function would return the same value.

return value

Number

Example

Calculate the number of all pictures in a document

HTML Code:

JQuery Code:

$ ("img"). length;

Results:

2

--------------------------------------------------------------------------------------------------------------- ------------------------

Get ()

Gets a collection of all the matching DOM elements.

This is a backward-compatible way to get all the matching elements (unlike jquery objects, which are actually array of elements).

This function is useful if you want to manipulate the DOM object directly instead of the JQuery object.

Access all matched DOM elements.

This serves as a backwards-compatible way of accessing all matched elements (other than the JQuery object itself, which is , in fact, an array of elements). It is useful if your need to operate on the DOM elements themselves instead of using built-in jQuery functions.

return value

Array<element>

Example

Select all the images in the document as an array of elements and reverse the array using the reverse method built into the array.

HTML Code:

JQuery Code:

$ ("img"). Get (). reverse ();

Results:

[ ]

--------------------------------------------------------------------------------------------------------------- ------------------------

Get (Index)

Gets one of the matching elements. Num represents the acquisition of the first few matching elements.

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].

Access a single matched DOM element at a specified index in the matched set.

This allows your to extract the actual DOM element and operate on it directly without using jQuery necessarily Y on it. This function called as $ (a). Get (0) are the equivalent of using square bracket notation on the JQuery object itself like $ (this) [0].

return value

Element

Parameters

Index (number): Get the element in index position

Example

HTML Code:

JQuery Code:

$ ("img"). Get (0);

Results:

[]

--------------------------------------------------------------------------------------------------------------- ------------------------

Index (subject)

Searches for an element that matches the object represented by the parameter and returns the index value of the corresponding element.

If a matching element is found, it is returned from 0, and if no matching element is found, return-1.

Searches every matched element for the "object" and returns the index of the element, if found, starting with zero.

Returns-1 if the object wasn ' t found.

return value

Number

Parameters

subject (Element): the object to search

Example

Returns the index value of an element with an ID value of Foobar.

HTML Code:

<div id= "Foobar" ><b></b><span id= "foo" ></span></div>

JQuery Code:

$ ("*"). Index ($ (' #foobar ') [0])

Results:

5