Use of jquery-selectors (selector) (level 2)

Use of jquery-selectors (selector) (level 2)

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.
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 orCode Bug. Thank you!
You can go to the official jquery website to learn more about jquery.
Copyright: the code-cat blog is reprinted. Please retain the source and copyright information! The four selector ranges described in this article are confusing and difficult to understand. The four examples I have provided can illustrate the scope of their functions and are very clear. Please carefully study these four examples for comparison! Download the source code and try to modify the conditions and check the effect!
Jquery selectors are very flexible to use. Now, you can use the four selectors in this article to combine them with the selectors mentioned in the previous article and see the results. I believe you will see enough results to shock you! 1. Ancestor descendant usage
Definition: match all conforming child elements under a given ancestor Element
Returned value: array <element>
Parameter: Ancestor (selector): Any valid selector descendant (selector): A Selector Used to match an element and is the descendant element of the first selector.
Example: change the background color of all input elements in Div with ID "div_1" to red.
Code: $("div_1 input" ).css ("background-color", "Red ");// Click the button to execute the code

Div id = "div_1"
Div id = "div_2"
Div id = "div_3"
Div id = "div_4"
Div id = "div_5"

Div id = "div_5_1"

Note: Please compare this instance with the 2nd usage instances to see their control scope! 2. Parent> child usage
Definition: match all child elements under a given parent Element
Returned value: array <element>
Parameter: parent (selector): Any valid selector child (selector): A Selector Used to match an element and is a child element of the first selector.
Example: change the background color of all input elements in the DIV with ID "div_a1" to red.
Code: $ ("# div_a1> input" ).css ("background-color", "Red ");// Click button 2 to execute the code

Div id = "div_a1"
Div id = "div_a2"
Div id = "div_a3"
Div id = "div_a4"
Div id = "div_a5"

Div id = "div_a5_1" 3. Prev + next usage
Definition: match all next elements following the prev Element
Returned value: array <element>
Parameter: Prev (selector): Any valid selector next (selector): a valid selector followed by the first Selector
Example: change the background color of the input element followed by all span elements in the DIV with ID "div_b1" to red.
Code: $ ("# div_b1 span + input" ).css ("background-color", "Red ");// Click "3" to execute the code.

Div id = "div_b1"
Span Div id = "div_b2"
Span Div id = "div_b3"
Span Div id = "div_b4"
Span Div id = "div_b5"

Div id = "div_b5_1" Span

Note: I used ancestor descendant FOR THE FIRST selector. You can also try other operations. In this example, compare it with the instance at and check the effect! 4. Prev ~ Siblings usage
Definition: match all the siblings elements after the prev Element
Returned value: array <element>
Parameter: Prev (selector): Any valid selector siblings (selector): a selector that acts as the first selector's peer
Example: change the background color of all input elements following the span element in the DIV with ID "div_c1" to red.
Code: $ ("# div_c1 span ~ Input "background .css (" background-color "," Red ");// Click button 4 to execute the code

Div id = "div_c1"
Span Div id = "div_c2"
Span Div id = "div_c3"
Span Div id = "div_c4"
Span Div id = "div_c5"

Div id = "div_c5_1" Span

Note: The input before the span element in Div id = "div_c1" and ID = "div_c4" does not change the background color, because the second selector searches for the element after the first selector.

 

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