Selectors

Selecting Elements

JQuery selectors are one of the most essential characteristics of the jQuery library. These selectors will allow you to rapidly identify any set of page elements.

1. Basic Selectors
2. Attribute Selectors
3. Form Selectors
4. Hierarchy

All: $("*")

The "all" selector is used to identify and select all the form elements such as div, span etc...

Elements: $("element")

The "Element" selector is used to select a particular element such as div, span, h1 etc...

Id: $("#id")

The "#" selector is used to identify the elements in a form with particular id.

Class: $(".class")

The "class" selector is used to select all the form elements with the same class name.

Contains: $('[attribute*="value"]')

The "Contains" selector is used when ever we need to select all elements which contains the given attribute value� with substrings.

Contains Word: $('[attribute~="value"]')

The "Contains word" selector is used to select all the specified attribute elements that match the given word delimited by spaces.

Starts With: ('[attribute^="value"]')

The [attribute^="value"] Selector or starts with attribute selector selects all the elements that starts with the exact value which is mentioned in the given string.

Ends With: ('[attribute$="value"]')

The [attribute$="value"] Selector or Ends with attribute selector selects all the elements that ends with the exact value which is mentioned in the given string.

Equals: $("[attribute='value']"))

The [attribute=value] Selector or attribute equals selector selects all the elements of the specified attribute and it returns the exact value mentioned in the attribute.

Not Equals: $('[attribute!="value"]')

The "Not equal" selector is used to select all elements from the page which is accurately not equal to the given value.

Prefix: $(":eq(index)")

The [attribute|="value"] Selector or contains prefix attribute selector selects all the elements that contains the prefix of the value with the exact value of the given string.

Has: :has()

The ":has()" selector is used to identify and select a specific content in an element that matches the selector.

Button: $(":button")

The ":button" selector is used to select all the form elements of input type button.

Submit: $(":submit")

The ":submit" selector is used to select all form elements of input type submit. Typically applies to all buttons and input elements.

Input: $(":input")

The ":input" selector is used to select all the form elements of input type input. Typically applies to input, textarea, buttons and form values.

Textbox: $(":text")

The ":text" selector is used to select all form elements of input type text. $(':text') is equivalent to $('[type=text]') and thus selects all form elements of input type text.

Disable: $(":disabled")

The ":disabled" selector is used to select all form elements of input type disabled.

Enabled: $(":enabled")

The ":enabled" selector is used to select all form elements of input type enabled.

Checked: $(":checked")

The ":checked" selector is used to select only the checked items in a form elements of input type checked.

Selected: $(":selected")

The ":selected" selector is used to select all the form elements of input type selected.

Child: $("parent > child")

The "Child" selector is used to select all the elements which are the immediate children of the specified element.

Descendent: $("ancestor descendant")

The "descendant" selector selects all the elements that are the descendant of the specified ancestors, which could be a child, grandchild, great-grandchild, and so on.

Next Adjacent: $("label + input")

The "Next Adjacent" Selector is used to select the next sibling element which immediately follows the specified element in a document.

Next Sibling: $("prev ~ siblings")

The "Next sibling" selector is used to select all the next sibling elements of a given element having same parent.