jQuery Filter Selectors

jQuery filter selectors allow you to refine your selection by filtering elements based on certain criteria. These selectors are powerful for narrowing down elements to apply specific actions. Here’s a detailed guide to commonly used jQuery filter selectors:

Basic Filter Selectors

$("*")
Selects all elements in the DOM.
```
$("*").css("border", "1px solid red");
```
Try It Now
$("element:first")
Selects the first occurrence of the specified element.
```
$("p:first").css("color", "blue");
```
Try It Now
$("element:last")
Selects the last occurrence of the specified element.
```
$("p:last").css("color", "green");
```
Try It Now
$("element:even")
Selects all elements with an even index (starting from 0).
```
$("li:even").css("background-color", "lightgrey");
```
Try It Now
$("element:odd")
Selects all elements with an odd index.
```
$("li:odd").css("background-color", "lightblue");
```
Try It Now
$("element:eq(index)")
Selects the element with the specified index.
```
$("li:eq(2)").css("font-weight", "bold");
```
Try It Now
$("element:gt(index)")
Selects all elements with an index greater than the specified index.
```
$("li:gt(2)").css("text-decoration", "underline");
```
Try It Now
$("element:lt(index)")
Selects all elements with an index less than the specified index.
```
$("li:lt(2)").css("color", "red");
```
Try It Now

Content-Based Filter Selectors

$(":contains('text')")
Selects elements that contain the specified text.
```
$("p:contains('jQuery')").css("font-style", "italic");
```
Try It Now
$(":has(selector)")
Selects elements that contain at least one element matching the selector.
```
$("div:has(p)").css("border", "1px solid black");
```
Try It Now
$(":empty")
Selects elements that have no children (including text nodes).
```
$("div:empty").css("background-color", "yellow");
```
Try It Now
$(":parent")
Selects elements that are parents (contain child elements).
```
$("div:parent").css("padding", "10px");
```
Try It Now

Visibility Filter Selectors

$(":visible")
Selects all elements that are visible.
```
$("div:visible").css("border", "2px solid green");
```
Try It Now
$(":hidden")
Selects all elements that are hidden.
```
$("div:hidden").show();
```
Try It Now

Attribute-Based Filter Selectors

$("[attribute]")
Selects elements with the specified attribute.
```
$("[title]").css("color", "purple");
```
Try It Now
$("[attribute='value']")
Selects elements with the specified attribute and value.
```
$("[type='text']").css("border", "1px solid blue");
```
Try It Now
$("[attribute^='value']")
Selects elements with an attribute value starting with the specified value.
```
$("[href^='http']").css("color", "orange");
```
Try It Now
$("[attribute$='value']")
Selects elements with an attribute value ending with the specified value.
```
$("[src$='.jpg']").css("border", "1px solid red");
```
Try It Now
$("[attribute*='value']")
Selects elements with an attribute value containing the specified value.
```
$("[class*='intro']").css("font-weight", "bold");
```
Try It Now

Form Filter Selectors

$(":input")
Selects all input, textarea, select, and button elements.
```
$(":input").css("border", "1px solid grey");
```
Try It Now
$(":checked")
Selects all checked checkboxes or radio buttons.
```
$(":checked").css("background-color", "lightgreen");
```
Try It Now
$(":selected")
Selects all selected options in a dropdown list.
```
$(":selected").css("font-weight", "bold");
```
Try It Now

Custom Filter Functions

$().filter(function)
Filters the set of matched elements by applying a custom function.

$("li").filter(function(index) {
    return index % 2 === 0;
}).css("background-color", "lightgrey");

Try It Now

By using these jQuery filter selectors, you can efficiently target specific elements in your document for dynamic manipulation, styling, or event handling.