In jQuery, selectors are used to find and select HTML elements that you want to manipulate. jQuery selectors are similar to CSS selectors, but they offer more advanced functionality.

Here�s an overview of different types of jQuery selectors:

? Basic Selectors

These selectors allow you to select elements based on their properties, such as ID, class, or element type.

? 1. ID Selector

Selects an element with a specific id attribute.

javascript
$("#myElement")

? 2. Class Selector

Selects elements with a specific class attribute.

javascript
$(".myClass")

? 3. Element Selector

Selects all elements of a specific type (e.g., div, p, a).

javascript
$("div")

? Advanced Selectors

These selectors provide more powerful ways to select elements based on their relationships or states.

? 4. Descendant Selector

Selects all elements that are descendants of a specified element.

javascript
$("#parent div")

This will select all div elements inside the element with id="parent".

? 5. Child Selector

Selects only direct child elements of a specified element.

javascript
$("#parent > div")

This selects only the div elements that are direct children of the element with id="parent".

? 6. Attribute Selector

Selects elements that match a specific attribute.

• Select elements with a specific id attribute:

  javascript
  $("input[id='myId']")
  

• Select elements that contain a specific attribute (e.g., type):

  javascript
  $("input[type='text']")
  

• Select elements with a class attribute starting with "prefix":

  javascript
  $("div[class^='prefix']")
  

? Filter Selectors

These selectors allow you to filter the set of selected elements based on conditions.

? 7. First/Last Child Selectors

Selects the first or last child of a parent element.

• First child:

  javascript
  $("ul li:first")
  

• Last child:

  javascript
  $("ul li:last")
  

? 8. Even/Odd Child Selectors

Selects elements based on their position (even or odd).

• Even index:

  javascript
  $("ul li:even")
  

• Odd index:

  javascript
  $("ul li:odd")
  

? 9. :eq() Selector

Selects an element at a specific index in a set of elements.

javascript
$("ul li:eq(2)")  // Selects the third list item (index is 0-based)

? 10. :contains() Selector

Selects elements containing specific text.

javascript
$("p:contains('Hello')")  // Selects paragraphs containing "Hello"

? Pseudo-Classes Selectors

jQuery provides several useful pseudo-classes to select elements based on their state.

? 11. :visible / :hidden

Selects elements that are visible or hidden.

javascript
$("p:visible")  // Selects visible paragraphs

javascript
$("p:hidden")  // Selects hidden paragraphs

? 12. :focus

Selects the element that has focus (e.g., input field).

javascript
$("input:focus")

? Form Selectors

These selectors are used to select form elements based on their states.

? 13. :input, :checkbox, :radio, :text, etc.

Selects form elements based on their type.

javascript
$("input:checkbox")  // Selects all checkbox elements

javascript
$("input:text")      // Selects all text input elements

? jQuery UI Selectors

When using jQuery UI, some additional selectors may be available.

? 14. :ui-state-default, :ui-state-active, etc.

These selectors are used for elements that use jQuery UI styling.

javascript
$(".ui-state-default")  // Selects elements with the "ui-state-default" class

? Summary of jQuery Selectors