This series of articles 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 involve much depth. My learning method is as follows: get started first, and then go to advanced level!
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
As this is the first time to write a series of technical articles, errors or code bugs are inevitable. Thank you!
You can go to the official jQuery website to learn more about jQuery.
Copyright: code-cat blog:Http://www.cnblogs.com/bynet/Reprinted, 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) // elements with an index of 3 * n, n =, 4 ..., er... 3 is not dead. You can change it to 1, 2, 4, 5, 6... and so on.
: Nth-child (3n + 1) // elements with an index of 3 * n + 1, n =, 4...
: Nth-child (3n + 2) // elements with an index of 3 * n + 2, 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 "button 1" 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 the button 2 to execute this 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 "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 the 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"
Article introduction:
Use of jQuery-Selectors (selector) (1. Basic)
Use of jQuery-Selectors (selector) (level 2)
Use of jQuery-Selectors (selector) (III. Simple)
Use of jQuery-Selectors (selector) (IV-V. Content & visibility)
Use of jQuery-Selectors (selector) (6. Attribute)
Use of jQuery-Selectors (selector) (vii. subelement)
