Use of jquery selectors (selector) (level 2)

This series Article It consists of nine articles: basic, level, simple, content, visibility, attribute, subelement, form, and form object attribute.
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!

Online address http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htmXmlns = "http://www.w3.org/1999/xhtml">

jquery-selectors (selector)
usage (level 2)

This series of articles mainly describes how to use selectors in the jquery framework. I will describe them in the instance mode, which is based on simplicity and comprehensiveness and will not involve
And very deep, my learning method: first entry, then advanced!

This series of articles is divided into nine articles: basic articles, level articles, simple articles, content articles, visibility articles, attributes articles, subelements articles, forms articles, and form object attributes.
.

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: 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
Clearly, Please carefully study these four instances and compare them! Download the source code and try to modify the conditions and check the effect!

Jquery selectors are highly flexible to use. So far, you can use the four selectors in this article to combine them with the selectors mentioned in the previous article and
Looking at the results, I believe you will see the results that shocked 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): Used to match the selector of an element.
Generation Element

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

Form 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 elements after the first selector.