Introduction

In jQuery, filters are methods that allow you to select elements from a set of matched elements based on specific criteria. They are particularly useful for manipulating DOM elements and selecting subsets of elements based on various conditions.

Commonly used jQuery filters

Here are some commonly used jQuery filters

Basic Filters

Content Filters

Attribute Filters

Form Filters

Visibility Filters

Child Filters

Using Attribute Filters

// Select all input elements with type="text"
$('input[type="text"]').css('border', '2px solid red');

// Select all elements with data-category="fruit"
$('[data-category="fruit"]').addClass('highlight');

Using Form Filters

// Select all disabled form elements
$(':disabled').css('opacity', '0.5');

// Select all input elements within a form
$('form :input').addClass('form-element');

Using Visibility Filters

// Select all visible elements with class="section"
$('.section:visible').fadeOut();

// Select all hidden elements with class="sidebar"
$('.sidebar:hidden').fadeIn();

Using Child Filters

// Select all <li> elements that are the only child of their parent
$('li:only-child').css('font-weight', 'bold');

// Select all <div> elements that have at least one <p> child
$('div:has(p)').css('border', '1px solid black');

Using Content Filters

// Select all <p> elements that contain the word "Lorem"
$('p:contains("Lorem")').addClass('contains-lorem');

// Select all empty <div> elements
$('div:empty').text('This div is empty');

Using Miscellaneous Filters

// Select the first <div> element
$('div:first').addClass('first-div');

// Select the last <tr> element in a table
$('table tr:last').addClass('last-tr');