Post
Ask Question

jQuery Filters: Selecting, Manipulating, and Filtering DOM Elements

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

  • first: Select the first matched element.
  • last: Select the last matched element.
  • even: Selects even-indexed elements (0-indexed).
  • odd: Selects odd-indexed elements (0-indexed).
  • eq(index): Selects the element at the specified index (0-indexed).

Content Filters

  • contains(text): Select elements that contain the specified text.
  • empty: Selects elements that have no children (including text nodes).
  • has(selector): Selects elements that contain at least one element matching the specified selector.

Attribute Filters

  • [attribute]: Selects elements that have the specified attribute.
  • [attribute=value]: Selects elements with the specified attribute and value.
  • [attribute!=value]: Selects elements with the specified attribute but not the specified value.
  • [attribute^=value]: Selects elements with the specified attribute whose value begins with the specified value.
  • [attribute$=value]: Selects elements with the specified attribute whose value ends with the specified value.
  • [attribute*=value]: Selects elements with the specified attribute whose value contains the specified value.

Form Filters

  • input: Select input, textarea, select, and button elements.
  • checked: Select checked checkboxes and radio buttons.
  • disabled: Selects disabled form elements.
  • enabled: Select enabled form elements.

Visibility Filters

  • visible: Select elements that are currently visible.
  • hidden: Select elements that are currently hidden (including those with display: none or visibility: hidden).

Child Filters

  • parent: Selects elements that have at least one child node (including text nodes).
  • first-child: Select elements that are the first child of their parent.
  • last-child: Select elements that are the last child of their parent.
  • only-child: Select elements that are the only child of their parent.

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');


Similar Articles