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

JavaScript
// 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

JavaScript
// 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

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

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

Using Child Filters

JavaScript
// 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

JavaScript
// 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

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

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