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

jQuery sub-attribute filter selector usage analysis_jquery

WBOY
Release: 2016-05-16 16:14:46
Original
1100 people have browsed it

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

1. :first-child selector

is used to select all elements of the first child element of its parent, format:

Copy code The code is as follows:
$("selector:first-child")

For example:

Copy code The code is as follows:
$("ul:first-child").css( "text-decoration", "underline").css("color", "blue");

2. :last-child selector

is used to select all elements of the last child element of its parent, format:

Copy code The code is as follows:
$("selector:last-child")

For example:

Copy code The code is as follows:
$("ul:last-child").css( "text-decoration", "underline").css("color", "red");

3. :nth-child selector

Used to select the Nth child element or odd-even element under the parent element.

Syntax format:

Copy code The code is as follows:
$("selector:nth-child(index/even /odd/equation)");

For example:

Copy code The code is as follows:
$("ul li:nth-child(4)" ).css("color", "red");//Set the text color of the fifth element under the ul element to red, that is, the index value of the li element is 4

4. :only-chilid selector

The unique selector used to select an element

Format:

Copy code The code is as follows:
$("selector:only-chilid")

Simple example:

Copy code The code is as follows:
 
 
 
 
子元素过滤选择器 
 
 
 
 
 
子元素过滤器应用实例
 
 
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
     
       
       
       
       
       
     
 
 

效果图如下所示:

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

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template