Use of jquery-selectors (selector) (vii. subelement)

Use of jquery-selectors (selector) (vii. subelement)

This series Article This article mainly describes how to use selectors in the jquery framework. I will describe them in the form of examples. It is based on simplicity and comprehensiveness and will not be very deep. My learning method is as follows: getting started, advanced!
This series of articles includes nine articles: basic articles, level articles, simple articles, content articles, visibility articles, attributes articles, child elements articles, forms articles, and form object attributes articles.
This article describes the usage of Nth-child (index/even/odd/equation), first-child, last-child, and only-child.
If you have any suggestions or comments on this series of articles, please send to: sjzlgt@qq.com
Because it is the first time to write a series of technical articles, it is inevitable that errors or Code Bug. Thank you!
You can go to the official jquery website to learn more about jquery.
Copyright: code-cat blog: http://www.cnblogs.com/bynet/ reprint Please retain the source and copyright information! It has been tested in IE6, IE7, and Firefox, with remarkable results. 1. Nth-child (index/even/odd/equation) Usage
Definition: matching the nth child or parity element ': eq (INDEX)' under the parent element matches only one element, and this will match the child element for each parent element. : Nth-child starts from 1, while: eq () is counted from 0!
You can use the following syntax:
: Nth-child (2) // Elements with an index of 2
: Nth-child (even) // The index is an even element.
: Nth-child (ODD) // The index is an odd element.
: Nth-child (3N)// The element whose index is 3 * n, n = 0, 1, 3, 4 ..., er... 3 is not dead. You can change it to 1, 2, 4, 5, 6... and so on.
: Nth-child (3N + 1) // The index is 3 * n + 1 elements, n =, 4...
: Nth-child (3N + 2) // The index is 3 * n + 2 elements, n =, 4...
Returned value: array <element>
Parameter: Index (number): sequence number of the element to be matched, starting from 1
Example: change the background color of the 2nd Li elements of each ul element in the DIV with ID "div_a1" to red.
Code: $ ("# div_a1 ul Li: Nth-child (2)" background .css ("background-color", "Red ");// Click the button to execute the code

Div id = "div_a1"

Ul id = "ul_a1"
• Li: c
• Li: C ++
• Li: C #
• Li: Java
• Li: Javascript

Ul id = "ul_a2"
• Li: Google
• Li: Microsoft
• Li: Apple
• Li: Sun
• Li: Intel

Ul id = "ul_a3"
• Li: onle one

Div id = "div_a5"

Note: The usage of other syntaxes is simple. I will not list them here. You can download the source file and modify it to see the effect. Note that the index starts from 1. 2. Usage of first-child
Definition: match the first child element ': First' to match only one element, and this selector matches one child element for each parent element.
Returned value: array <element>
Example: change the background color of the 1st Li elements of each ul element in the DIV with ID "div_b1" to red.
Code: $ ("# div_b1 ul Li: First-Child"). CSS ("background-color", "Red ");// Click button 2 to execute the code

Div id = "div_b1"

Ul id = "ul_b1"
• Li: c
• Li: C ++
• Li: C #
• Li: Java
• Li: Javascript

Ul id = "ul_b2"
• Li: Google
• Li: Microsoft
• Li: Apple
• Li: Sun
• Li: Intel

Ul id = "ul_b3"
• Li: onle one

Div id = "div_b5"

Note: Of course, you can also use $ ("# div_b1 ul Li: Nth-Child (1)") for this effect )"). CSS ("background-color", "Red. 3. Last-Child usage
Definition: match the last child element ': la'. Only one element is matched, and this selector matches one child element for each parent element.
Returned value: array <element>
Example: change the background color of the last Li element of each ul element in the DIV with ID "div_c1" to red.
Code: $ ("# div_c1 ul Li: Last-Child"). CSS ("background-color", "Red ");// Click "button 3" to execute this code

Div id = "div_c1"

Ul id = "ul_c1"
• Li: c
• Li: C ++
• Li: C #
• Li: Java
• Li: Javascript

Ul id = "ul_c2"
• Li: Google
• Li: Microsoft
• Li: Apple
• Li: Sun
• Li: Intel

Ul id = "ul_c3"
• Li: onle one

Div id = "div_c5" 4.: Only-Child usage
Definition: if an element is the only child element in the parent element, it will be matched. If the parent element contains other elements, it will not be matched.
Returned value: array <element>
Example: In the DIV with ID "div_c1", the background color of the unique Li element in each ul element is changed to red.
Code: $ ("# div_d1 ul Li: Only-Child"). CSS ("background-color", "Red ");// Click "button 4" to execute this code

Div id = "div_d1"

Ul id = "ul_d1"
• Li: c
• Li: C ++
• Li: C #
• Li: Java
• Li: Javascript

Ul id = "ul_d2"
• Li: Google
• Li: Microsoft
• Li: Apple
• Li: Sun
• Li: Intel

Ul id = "ul_d3"
• Li: onle one

Div id = "div_d5"

 

You can download the HTML source file of this article: Download