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 mainly explains: first,: last,: not (selector),: even,: odd,: eq (index),: gt (index),: lt (index ),: header,: animated usage.
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/ reprint Please retain the source and copyright information! |
1. first usage
Definition: match the first element found
Returned value: Element
Example: change the background color of the first Li element in ul with ID "ul_1" to red.
Code: $ ("# ul_1 li: first" ).css ("background-color", "red"); // click the button to execute this code
Ul ID = "ul_1"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
2.: last usage
Definition: match the last element found
Returned value: Element
Example: change the background color of the last Li element in ul with ID "ul_2" to red.
Code: $ ("# ul_2 li: last" ).css ("background-color", "red"); // click button 2 to execute this code
Ul ID = "ul_2"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
3.: not (selector) Usage
Definition: removes all elements that match the given selector.
Returned value: Array <Element>
Parameter: selector (Selector): Specifies the selector Used for filtering.
Example: change the background color of other Li elements except the last Li element in ul with ID "ul_3" to red.
Code: $ ("# ul_3 li: not (li: last)" ).css ("background-color", "red"); // click the button to execute this code
Ul ID = "ul_3"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
Extension: You can run $ ("li: not (li: last)" ).css ("background-color", "red ").4. even usage
Definition: matches all elements with an even index value and starts counting from 0.
Returned value: Array <Element>
Example: change the background color of the Li element whose ID is "ul_4" to red (Note: The index starts from 0)
Code: $ ("# ul_4 li: even" ).css ("background-color", "red"); // click button 4 to execute this code
Ul ID = "ul_4"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
5. Usage of odd
Definition: matches all elements with an odd index value and starts counting from 0.
Returned value: Array <Element>
Example: change the background color of the Li element whose ID is "ul_5" to red (Note: The index starts from 0)
Code: $ ("# ul_5 li: odd" ).css ("background-color", "red"); // click "5" to execute the code.
Ul ID = "ul_5"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
6.: eq (index) Usage
Definition: matching an element with a given index value
Returned value: Element
Parameter: index (Number): starts from 0.
Example: change the background color of the Li element whose ID is "ul_6" to red (Note: The index starts from 0)
Code: $ ("# ul_6 li: eq (3)" ).css ("background-color", "red"); // click to execute this code
Ul ID = "ul_6"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
7.: gt (index) Usage
Definition: match all elements greater than the given index value
Returned value: Array <Element>
Parameter: index (Number): starts from 0.
Example: change the background color of the Li element whose index value is greater than 3 in ul with ID "ul_7" to red (Note: The index starts from 0)
Code: $ ("# ul_7 li: gt (3)" ground .css ("background-color", "red"); // click "7" to execute the code.
Ul ID = "ul_7"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
8.: lt (index) Usage
Definition: match all elements smaller than the given index value
Returned value: Array <Element>
Parameter: index (Number): starts from 0.
Example: change the background color of the Li element whose index value is less than 3 in ul with ID "ul_8" to red (Note: The index starts from 0)
Code: $ ("# ul_8 li: lt (3)" ground .css ("background-color", "red"); // click the button to execute this code
Ul ID = "ul_8"
- Li 1
- Li 2
- Li 3
- Li 4
- Li 5
- Li 6
- Li 7
- Li 8
9. header usage
Definition: Match title elements such as h1, h2, and h3
Returned value: Array <Element>
Example: change the background color of all header (title) elements in the DIV with ID "div_1" to red.
Code: $ ("# div_1: header" ).css ("background-color", "red"); // click "9" to run the code div id = "div_1"
P Mark
Mark H1H2H3H4H5H6 by span
10.: animated usage
Definition: match all elements of the animation being executed
Returned value: Array <Element>
Example: change the background color of the element with no animation effect in the DIV with ID "div_2" to red.
Code: $ ("# div_2: not (: animated)" ).css ("background-color", "red "); // click "10" to execute the code DIV id = "div_2"
Span flag
You can download the HTML source file of this article: download
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)
