7/18/2015 - 7:27 PM

Very useful jQuery

Very useful jQuery

jQuery in Action ---- pg. 38

Because jQuery allows us to treat the wrapped set as a JavaScript array, we can use simple
array indexing to obtain any element in the wrapped list by position. For example,
to obtain the first element in the set of all <img> elements with an alt attribute on the
page, we could write
var imgElement = $('img[alt]')[0]

It can be also written as:
var imgElement = $('img[alt]').get(0)
is equivalent to the previous example that used array indexing.

The get() method will also accept a negative index value as a parameter. In this
case, it fetches the element relative to the end of the wrapped set. For example
.get(-1) will retrieve the last element in the wrapped set, .get(-2) the second to
last, and so on.

var allLabeledButtons = $('label+button').toArray();
This statement collects all the <button> elements on the page that are immediately
preceded by <label> elements into a jQuery wrapper, and then creates a JavaScript
array of those elements to assign to the allLabeledButtons variable.

Let’s say that for some reason we want to know the ordinal index of an image with the
id of findMe within the entire set of images in a page. We can obtain this value with
this statement:
var n = $('img').index($('img#findMe')[0]);
We can also shorten this:
var n = $('img').index('img#findMe');

The index() method can also be used to find the index of an element within its parent
(that is, among its siblings). For example,

var n = $('img').index();

This will set n to the ordinal index of the first <img> element within its parent.
In addition to

jQuery .slice()

The slice() method selects a subset of elements based on its index.

A subset is a set that is a part of a larger set.

This method is used to limit the selection of elements in a group, by a start and end point: the start parameter is a starting index (starts at 0) from which to create the subset, and the stop parameter is an optional ending point.

    $("p").slice(2).css("background-color", "yellow");
});  --- eg.

Book pg-50

let’s say that we want to find the <div> block
within which the button is defined. The closest() method makes it a breeze:


But this would only find the most immediate ancestor <div>; what if the <div> we seek
is higher in the ancestor tree? No problem. We can refine the selector we pass to
closest() to discriminate which elements are selected:


Now the ancestor <div> with the class myButtonContainer will be selected.

The is() method returns true if at least one element matches the selector,
and false if not. For example,

var hasImage = $('*').is('img');

This statement sets the value of the hasImage variable to true if the current DOM has
an image element.

As an example of using the each() method, we could use the following code to set the
id property of every element in the DOM to a name composed of the element’s tag
name and position within the DOM:
$('*').each(function(n){ = this.tagName + n;
In this example, we obtain element references as the function context (this) of the
callback function, and directly assign values to their id properties.