DOM Access in Jquery: Access the DOM in Jquery

DOM Access in Jquery: Access the DOM in Jquery is easier to understand when the core ideas are paired with practical examples. The sections below explain the topic clearly, highlight useful steps, and point out details that can prevent common errors.

 The JQuery Example 

 list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 

It will produce the following result:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5
• list item 6

Above, each list has its own index, and can be located using the eq (index) method as in the example below.

Each child element starts its index from 0, so list item 2 will be accessed using $ ("li"). Eq (1) and so on.

As an example,

Simple example after adding color to the third item list .

 The JQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "li" ). eq ( 2 ). addClass ( "selected" ); }); 

 list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 

It will produce the following result:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5
• list item 6

Filter elements in jQuery

The filter (selector) method can help filter out all elements from the matched set of elements that do not match the given Selector, and the selector can be written using any syntax. Which Selector.

As an example,

The following simple example applies colors to lists that are linked to the middle class:

 The JQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "li" ). filter ( ".middle" ). addClass ( "selected" ); }); 

  class = "top" > list item 1  class = "top" > list item 2  class = "middle" > list item 3  class = "middle" > list item 4  class = "bottom" > list item 5  class = "bottom" > list item 6 

It will produce the following result:

• list item 1
• list item 2
• list item 3
• list item 4
• list item 5
• list item 6

Locate child elements in jQuery

The find (selector) method can help locate all child elements of a particular element type. The selector can be written using any selector syntax.

As an example,

The following simple example selects all available elements inside the elements

different.

 The JQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "p" ). find ( "span" ). addClass ( "selected" ); }); 

 This is 1st paragraph and THIS IS RED 

This paragraph is 2nd andTHIS IS ALSO RED

It will produce the following result:

 This is 1st paragraph and THIS IS RED 
 This paragraph is 2nd and THIS IS ALSO RED 

The DOM Filter methods in jQuery

The table below lists useful methods that you can use to filter out various elements from a list of DOM elements:

Method Description eq (index)

Shorten the set of matching elements into a single element.

filter (selector)

Remove all elements from the matching set of elements that do not match the given selector.

filter (fn)

Remove all elements from the matched set of elements that do not match the given specific function.

is (selector)

Check the current selection with an Expression and return true, if at least one element of that selection matches the given selector.

map (callback)

Translates a set of jQuery object elements into another set of values in a jQuery array (if possible or contains no elements).

not (selector)

Remove all elements that match the selector given from the set of matching elements.

slice (start, [end])

Select a subset of matching elements.

DOM methods Traversing in jQuery

The table below lists all the useful methods you can use to locate diverse elements in a DOM:

Format & Description1 add (selector)

Add multiple elements, matched by the given selector, to the set of matching elements.

2 andSelf ()

Add pre-selection to current selection

3 children ([selector])

Get a set of elements that contain all of the only direct child elements of each of the matched elements.

4 closest (selector)

Get a set of elements that contain the closest parent element that matches the given selector, including the starting element

5 contents ()

Find all child nodes within matching elements (including text nodes), or document content, if the element is an Iframe.

6 end ()

Transform the most recent destructive operation, changing the set of elements to the previous state.

7 find (selector)

Search for child elements that match the given selector.

8 next ([selector])

Get a unique set of next brother (em) elements of each element in the given element set.

9 nextAll ([selector])

Find all siblings after the current element

10 offsetParent ()

Returns a jQuery set with the specified parent element of the first matched element

11 paren ([selector])

Get direct father of an element. If called on a set of elements, the parent method returns a unique set of direct parent elements

12 parents ([selector])

Get a set of ancestor elements of the set of matching elements (except for root elements)

13 prev ([selector])

Get a set of elements containing the only preceding element brother of each element in the set of matching elements.