Home Web Front-end JS Tutorial jQuery filter selector usage analysis_jquery

jQuery filter selector usage analysis_jquery

May 16, 2016 pm 04:14 PM
jquery usage filter Selector

The example in this article describes the usage of jQuery filter selector. Share it with everyone for your reference. The specific analysis is as follows:

In practice, a filter selector can be added to the basic selector to complete the query task. Depending on the specific situation, the index value, content, attributes, sub-element position, and form of the element can be used in the filter selector

Domain attributes and visibility as filter conditions

1. :first selector

Format:

Copy code The code is as follows:
$("selector: first")
is used Filter the current jQuery collection and select the first matching element

Example:

Copy code The code is as follows:
$("td:first").css("border ", "2px solid blue");

2. :last selector

Format:

Copy code The code is as follows:
$("selector: last")
is used Filter the current jQuery collection and select the last matching element
Example:
Copy code The code is as follows:
$("td:last").css("border", " 2px solid blue");

3. :odd selector

Format:

Copy code The code is as follows:
$("selector: odd")
is used Select all elements with odd index (counting from 0)

Example:

Copy code The code is as follows:
$("td:odd").css("background ", "red");

4. :even selector

Format:

Copy code The code is as follows:
$("selector: even")
is used Select all elements with even index (counting from 0)

Example:

Copy code The code is as follows:
$("td:even").css("background ", "red");

5. :eq selector

Format:

Copy code The code is as follows:
$("selector:eq(index)")
Used to select the element whose index is equal to the given value from the matching set

Example:

Copy code The code is as follows:
$("li:eq(1)").css ("color", "blue");

6. :gt selector

Format:

Copy code The code is as follows:
$("selector:gt(index)")
Used to select all elements from a matched set with index greater than a given value

Example:

Copy code The code is as follows:
$("li:gt(0)").css ("color", "green");

7. :lt selector

Format:

Copy code The code is as follows:
$("selector:lt(index)")
Used to select all elements from a matched set with index greater than a given value

Example:

Copy code The code is as follows:
$("li:lt(5)").css ("color", "green");

To find all elements with index greater than n1 and less than n2, you can use array selector,

Copy code The code is as follows:
$("selector:gt(n1), selector:lt(n2)") ;

8. :not selector

Format:

Copy code The code is as follows:
$("selector1:not(selector2)")
Used to remove all elements matching the given selector from the matched set

Example:

Copy code The code is as follows:
$("td:not(:first, :last) ").css("background", "red"); //Except for the first and last cells, the background color of other cells is red

9. :header selector

Format:

Copy code The code is as follows:
$(":header")
for selection All heading elements like h1, h2, h3

10. :animated selector

Format:

Copy code The code is as follows:
$("selector:animated")
is used Select all elements that are performing animation

Simple example:

Copy code The code is as follows:
 
 
 
 
过滤选择器 
 
 
 
 

简单过滤选择器应用示例

 
 
   
     
     
     
     
     
   
   
     
     
     
     
     
   
   
     
     
     
     
     
   
 

效果图如下所示:

希望本文所述对大家的jQuery程序设计有所帮助。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to open filtered duplicate files in Quark How to open filtered duplicate files in Quark Mar 01, 2024 am 11:25 AM

When using Quark Browser, there is a function to filter duplicate files. Some friends are not very familiar with this. Here I will introduce how to turn on this function. If you are interested, come and take a look with me. 1. First, click "Quark Browser" on your mobile phone to enter the interface, then click and select "Quark Network Disk" in the options in the middle of the page to open and enter. 2. Find "Backup Settings" in the lower part of the Quark network disk interface, and click to open it, as shown in the figure below: 3. Next, on the page you enter, there is a "Filter Duplicate Files", which is displayed behind it There is a switch button. Click the circular slider on it and set it to color to turn on this function. When you continue to back up files, duplicate files will be skipped to save network disk capacity.

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Chinese character filtering: PHP regular expression practice Chinese character filtering: PHP regular expression practice Mar 24, 2024 pm 04:48 PM

PHP is a widely used programming language, especially popular in the field of web development. In the process of web development, we often encounter the need to filter and verify text input by users, among which character filtering is a very important operation. This article will introduce how to use regular expressions in PHP to implement Chinese character filtering, and give specific code examples. First of all, we need to clarify that the Unicode range of Chinese characters is from u4e00 to u9fa5, that is, all Chinese characters are in this range.

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

Correct usage of POST request in PHP Correct usage of POST request in PHP Mar 27, 2024 pm 03:15 PM

The use of POST requests in PHP is a common operation in website development. Data can be sent to the server through POST requests, such as form data, user information, etc. Proper use of POST requests can ensure data security and accuracy. The following will introduce the correct usage of POST requests in PHP and provide specific code examples. 1. Basic principles of POST requests in PHP In PHP, the data submitted through the POST method can be obtained by using the $_POST global variable. The POST method converts the form number into

See all articles