jQuery - Filters

jQuery selectors and filters retrieve content from the web page so that it can be manipulated using other functions.

  • jQuery selectors return an array of objects that match the selection criteria.
  • jQuery filters operate on a selector to further refine the results array that the selector returns.

jQuery filters has 6 categories:

Basic Filters

:first

It selects only the first instance of set of elements returned by selector.

$("p:first")

This selector selects only first paragraph.

:last

It selects only the last instance of set of elements returned by selector.

$("p:last")

This selector selects only last paragraph.

:even

It selects only even-numbered elements from set of elements returned by selector.

$("p:even")

This selector selects only even-numbered paragraphs.

:odd

It selects only odd-numbered elements from set of elements returned by selector.

$("p:odd")

This selector selects only odd-numbered paragraphs.

:eq(n)

It selects elements that are positioned at the given index from set of elements returned by selector. Index starts from 0.

$("p:eq(1)")

This selector selects only first paragraph.

:gt(n)

It selects elements that are after the given index from set of elements returned by selector. Index starts from 0.

$("p:gt(2)")

This selector selects all paragraphs except first and second paragraphs.

:lt(n)

It selects elements that are before the given index from set of elements returned by selector. Index starts from 0.

$("p:lt(2)")

This selector selects only first and second paragraphs.

:header

It selects all header elements (H1, H2, H3, etc).

:animated

It selects all elements that are currently being animated in some way.

$("div:animated")

This selector selects all divs that are in the progress of an animation at the time the selector is run.

:not (selector)

It selects elements that do not match the given selector.

$("input:not(.myClass)")

This selector selects all the input elements that do not have "myclass" as class attribute.


Attribute Filters

Attribute filters are used for filter out elements from the results of selector statement based on attribute content.

Has Attribute Filter [attribute]

It includes elements in the result set if they have the specified attribute.

$("p[class]")

This selector selects all paragraph elements with a class attribute.

Attribute Equals Filter [attribute=value]

It includes elements in the result set if they have the specified attribute and it has given value.

$("p[class=test]")

This selector selects all paragraph elements with a class attribute value equal to "test".

Attribute Not Equal Filter [attribute!=value]

It includes elements in the result set if they have the specified attribute and it doesn't have the given value.

$("p[class=!test]")

This selector selects all paragraph elements with a class attribute value not equal to "test".

Attribute Starts With Filter [attribute^=value]

It includes elements in the result set if they have the specified attribute and it starts with the specified value.

$("p[class^=test]")

This selector selects all paragraph elements with a class attribute value starting with "test".

Attribute Ends With Filter [attribute$=test]

It includes elements in the result set if they have the specified attribute and it ends with the specified value.

$("p[class$=test]")

This selector selects all paragraph elements with a class attribute value ending with "test".

Attribute Contains Filter [attribute*=value]

It includes elements in the result set if they have the specified attribute and it contains the specified value as a substring.

$("p[name*=test]")

This selector selects all paragraph elements with a name attribute value containing word "test" as a substring.

Attribute Contains Word Filter [attribute~=value]

It includes elements in the result set if they have the specified attribute and it contains a given value, delimited by spaces.

$("p[name~=test]")

This selector selects all paragraph elements with a name attribute value containing word "test" as a substring, delimited by spaces.

Attribute Contains Prefix Filter [attribute|=value]

It includes elements in the result set that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

$("a[hreflang|='en']")

This selector selects all links with a hreflang attribute that is english.

Multiple Attribute Filters [attrFilter1][attrFilterN]

It includes elements that match all of the specified attribute filters.

$("input[class$=test][id]")

This selector selects all inputs that have an id attribute and whose class attribute ends with "test".


Content Filters

Content filters are used to examine the content of selected elements.

:contains(text)

It selects all elements that contain specified text.

$("p:contains('Manish')")

This selector selects all paragraph elements containing "Manish".

:empty

It selects all elements that do not have children or text.

$("td:empty")

This selector selects all td elements that are empty.

:has(selector)

It selects elements which contain at least one element that matches the specified selector.

$("div:has(p)")

This selector selects all divs that have a paragraph inside of them.

:parent

It selects all elements that are parents (i.e. they contain at least one other element, including text).

$("div:parent")

This selector selects all divs with children including text.


Visibility Filters

Visibility filters are used to examine the visibility of selected elements.

:visible

It selects all elements that are visible.

$("div:visible")

This selector selects all visible divs.

:hidden

It selects all elements that are hidden.

$("div:hidden")

This selector selects all hidden divs.


Child Filters

Child filters are used to refine a selector by examining the relationship each element has with its parent element.

:first-child

It selects all elements that are first child of their parent.

$("div label:first-child")

This selector selects first label in each matched div.

:first-of-type

It selects all elements that are the first child among siblings of the same element name.

$("label:first-of-type")

This selector selects first label in each matched div.

:last-child

It selects all elements that are last child of their parent.

$("div label:last-child")

This selector selects last label in each matched div.

:last-of-type

It selects all elements that are the last child among siblings of the same element name.

$("label:last-of-type")

This selector selects last label in each matched div.

:nth-child()

It selects all elements that are nth child of their parent.

$("div label:nth-child(2)")

This selector selects second label in each matched div.

$("div label:nth-child(even)")

This selector selects even-numbered labels in each matched div.

$("div label:nth-child(odd)")

This selector selects odd-numbered labels in each matched div.


Form Filters

Form filters are used to select form elements.

:input

It selects all input, textarea, select and button elements.

$("div :input")

This selector selects all input elements in each matched div element.

:text

It selects all input elements of type text.

$("div :text")

This selector selects all text elements in each matched div element.

:password

It selects all input elements of type password.

$("div :password")

This selector selects all password elements in each matched div element.

:radio

It selects all radio button elements.

$("div :radio")

This selector selects all radio button elements in each matched div element.

:checkbox

It selects all checkbox elements.

$("div :checkbox")

This selector selects all checkbox elements in each matched div element.

:submit

It selects all submit buttons.

$("div :submit")

This selector selects submit elements in each matched div element.

:reset

It selects all reset elements.

$("div :reset")

This selector selects all reset elements in each matched div element.

:image

It selects all image elements.

$("div :image")

This selector selects all image elements in each matched div element.

:button

It selects all button elements.

$("div :button")

This selector selects all button elements in each matched div element.

:file

It selects all file elements.

$("div :file")

This selector selects all file elements in each matched div element.

:enabled

It selects all enabled elements.

$("div :enabled")

This selector selects all enabled elements in each matched div element.

:disabled

It selects all disabled elements.

$("div :disabled")

This selector selects all disabled elements in each matched div element.

:checked

It selects all checked or selected elements (radio buttons, check boxes, select).

$("div :checked")

This selector selects all checked or selected elements in each matched div element.

:selected

It selects all selected elements.

$("div :selected")

This selector selects all selected elements in each matched div element.

:focus

It selects element if it is currently focused.

$("#myform :focus")

This selector selects focus element in "myform" form element.