Discover the secrets of jQuery filters: reveal what features are included

jQuery is a popular JavaScript library used to simplify DOM manipulation and event handling. In jQuery, filters are a powerful tool that can help developers accurately select the elements on the page that need to be manipulated. This article will explore the mysteries of jQuery filters, reveal the functionality they contain, and provide concrete code examples.

1. Basic filter

1. :first: Select the first matching element

   $("p:first").css("color", "red");

   Copy after login

2. :last: Select the last matching element

   $("p:last").css("font-weight", "bold");

   Copy after login

3. :even / :odd: Select the element at an even or odd position

   $("tr:even").css("background-color", "lightgray");
   $("tr:odd").css("background-color", "lightblue");

   Copy after login

4. :eq(): Select the element at the specified index position

   $("li:eq(2)").css("text-decoration", "underline");

   Copy after login

5. :gt() / :lt(): Select elements greater than or less than the specified index position

   $("div:gt(3)").hide();
   $("div:lt(2)").show();

   Copy after login

2. Content filter

1. :contains(): Select elements that contain the specified text

   $("div:contains('jQuery')").css("color", "green");

   Copy after login

2. :empty: Select elements that have no child elements

   $("p:empty").text("这是一个空段落");

   Copy after login

3. :has(): Select elements that contain specific sub-elements

   $("ul:has(li)").css("border", "1px solid black");

   Copy after login

3. Visibility filter

1. :visible / :hidden: Select visible or hidden elements

   $("div:hidden").show();
   $("div:visible").hide();

   Copy after login

2. :animated: Select the currently executing animation effect Element

   $("div:animated").stop();

   Copy after login

4. Attribute filter

1. ##[attribute]: Select elements with specified attributes

   $("[href]").css("color", "blue");

   Copy after login

2. [attribute=value]: Select elements whose attribute value is equal to the specified value

   $("[type='text']").css("border", "1px solid gray");

   Copy after login

3. ##[attribute! =value]

   : Select elements whose attribute value is not equal to the specified value

   $("[href!='#']").css("text-decoration", "underline");

   Copy after login
By using these different types of filters, developers can operate elements on the page more flexibly. Achieve various dynamic effects and interactive functions. The powerful functions and concise syntax of jQuery filters are one of the reasons for its popularity, and they also provide developers with great convenience and efficiency.