Filtering Elements

Filtering Elements

Filtering Elements reduces the set of matched elements to those that match the selector. The Following are the basic filters used in Jquery library.

1. Basic Filters
2. Child Filters
3. Content Filters
4. Visibility

First: $(":first")

The first selector selects the first filtered element in a group. The first child element of a parent is been selected by this method.

Last: $(":last")

The last selector selects the last filtered element in a group. This method can be used with the other selector inorder to select the last element in a group.

Animate: (selector).animate({styles},speed,easing,callback))

The .animate() method is used to trigger custom CSS animations on the selected element.

Equals: $(":eq(index)")

The equal selector selects the filtered element at index 'n' in a matched set. As java script array uses zero based indexing, the first number is supposed to be '0'.

Not: $(":not(selector)")

The :not selector selects all the elements that does not match with the specified element. All the elements exceptional to the specified elements are filtered using this method.

Even: $(":even")

The even selector filters all the elements having an even index value.(say: 0,2,4). As java script array is using zero based indexing, the first number is supposed to have index number '0'.

Odd: $(":odd")

The odd selector filters all the elements having an odd index value.(say: 1,3,5). As java script array is using zero based indexing, the first number is supposed to have index number '0'.

Greaterthan: $(":gt(index)")

The :gt selector is used to select the element having the index value greater than the specified index value. As java script array is using zero based indexing, the first number is supposed to have index number '0'.

Lessthan: $(":lt(index)")

The :lt selector is used to select the element having the index value lesser than the specified index value. As java script array is using zero based indexing, the first number is supposed to have index number '0'

Header: $(":header")

The :header() method is used to select all the header elements from H1 to H6.

First Child: :first-child filter

The :first-child filter is used to select the first child from their parent element.

Last Child: :last-child

The :last-child filter is used to select the last child from their parent element.

nthchildfilter.html :nth-child Filter

The nth-child filter is used to select all elements which are matched with the nth child of parent element.

Only Child: :only-child

The :only-child filter can be used to select all single child from their parent element.

Contains: contains(text)

The .contains() method is used to check the document if it contains the required content.

Empty: .empty()

The empty() method is used to remove the contents from the selected elements. This method removes the child nodes as well as the text that are within the selected elements but doesnot remove the atributes or element by itself.

Has: :has()

The :has() selector is used to identify the specified content in the form.

Parent: :parent()

The :parent() selector is used to select the specific form elements in the form.

Visible: :visible

The :visible filter is used when ever we need to select all the visible element.

Hidden: :hidden

The :hidden filter is used when ever we need to select all the hidden element.