Home > Developer > JavaScript
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
As this is the first time to write a series of technical articles, errors or code bugs are inevitable. Thank you!
Online address http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd "> <ptml xmlns =" http://www.w3.org/1999/xhtml "> <pead> <title> jQuery-Selectors-2-bynet </title> <style type =" text/css ">. div {width: 95%; margin-left: 15px; margin-top: 15px; margin-right: 15px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; background-color: # ccc; border: #999 1 p X solid; line-height: 30px; font-size: 13px; font-family: ;}. blue {color: Blue ;}. green {color: Green ;}. button {border: green 1px solid; width: 100px ;}. xiaobiao {font-weight: bold ;}. red_test {background-color: red; color: White; width: 300px; height: 30px ;}. li_test {border: #000 1px solid ;}. nei_div {border: #333 1px solid; width: 200px; float: left; margin-right: 5px; padding-left: 5px ;} </style> </pead> <body> JQuery-Selectors (selector) usage (II. Level) this series of articles mainly describes how to use the Selectors in the jQuery framework. I will explain it in the form of an instance, it is based on simplicity and comprehensiveness and will not be deeply involved. My Learning Method: get started first, and then get started! <Br> this series of articles is divided: there are nine articles in total: basic, level, simple, content, visibility, attribute, subelement, form, and form object attributes. <Br> if you have any suggestions or comments on this series of articles, please send to the mailbox: sjzlgt@qq.com <br> because it is the first time to write a technical series of articles, it is inevitable that errors or code bugs, please note, thank you! <Br> you can go to the official jQuery website to learn more about jQuery. <Br> <strong> copyright: the source and copyright information of the code-cat blog are reprinted! </Strong> 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! <Br> the jQuery selector is very flexible to use. So far, you can combine the four selector types in this article with the selector mentioned in the previous article and view the effect, I believe you will see the results that can shake you! 1. ancestor descendant usage <br> definition: match all conforming descendant elements under a given ancestor Element <br> return value: Array <Element> <br> parameter: ancestor (Selector ): any valid Selector, descendant (Selector), is used to match the Selector of an element and is the last generation element of the first Selector. <br> instance: change the background color of all Input elements in DIV with ID "div_1" to red <br> code: $("div_1 input" ).css ("background-color", "red "); // click button 1 to execute the code form ID = "div_1" <br> <input type = "text" value = "input"/> <input type = "text" /> div id = "div_2" <br> <input type = "text"/> DIV I D = "div_3" <br> <input type = "text" value = "input"/> div id = "div_4" <br> <input type = "text"/> div id = "div_5" div id = "div_5_1" <input type = "text"/> <input type = "button" id = "btn_1" value = "button 1" class = "button"/> <strong> note: please compare this instance with the 2nd usage instances to see their control scope! </Strong> 2. parent> child usage <br> definition: match all child elements under a given parent Element <br> return value: Array <Element> <br> parameter: parent (Selector ): any valid Selector, child, is used to match the Selector of an element and is a child element of the first Selector. <br> example: change the background color of all Input elements in DIV with ID "div_a1" to Red <br> code: $ ("# div_a1> input" ).css ("background-color ", "red "); // click button 2 to execute the code div id = "div_a1" <br> <input type = "text" value = "input"/> <input type = "text" /> div id = "div_a2" <br> <input type = "text"/> div id =" Div_a3 "<br> <input type =" text "value =" input "/> div id =" div_a4 "<br> <input type =" text "/> div id = "div_a5" div id = "div_a5_1" <input type = "text"/> <input type = "button" id = "btn_2" value = "button 2" class = "button "/> 3. prev + next usage <br> definition: match all next elements following the prev Element <br> return value: Array <Element> <br> parameter: prev (Selector ): any valid Selector next (Selector): a valid Selector followed by the first Selector <br> instance: change the background color of the input element followed by all span elements in the DIV with ID "div_b1" to Red <B R> code: $ ("# div_b1 span + input" ground .css ("background-color", "red "); // click "3" to execute the code div id = "div_b1" <br> <input type = "text" value = "input"/> span <input type = "text" value = "input" style = "width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_b2 "<br> span <input type =" text "value =" input "style =" width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> div id =" div _ B3 "<br> span <input type =" text "value =" input "style =" width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_b4 "<br> <input type =" text "value =" input "style =" width: 50px; "/> span <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_b5 "div id =" div_b5_1 "span <input type =" text "/> <input type =" button "id =" btn_3 "value =" button 3 "class =" button "/> <strong> note: first select The selector uses ancestor descendant. You can also try other usages. In this example, compare it with the instance at and check the effect! </Strong> 4. prev ~ Siblings usage <br> definition: match all the siblings elements after the prev Element <br> return value: Array <Element> <br> parameter: prev (Selector ): any valid Selector siblings (Selector): a Selector that acts as the Peer of the first Selector <br> instance: change the background color of all the input elements following the span element in the DIV with ID "div_c1" to Red <br> code: $ ("# div_c1 span ~ Input "background .css (" background-color "," red "); // click button 4 to execute the code div id = "div_c1" <br> <input type = "text" value = "input"/> span <input type = "text" /> div id = "div_c2" <br> span <input type = "text" value = "input" style = "width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_c3 "<br> span <input type =" text "value =" input "style =" width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_c4 "<br> <input type =" text "value =" input "style =" width: 50px; "/> span <input type =" text "value =" input "style =" width: 50px; "/> div id =" div_c5 "div id =" div_c5_1 "span <input type =" text "value =" input "style =" width: 50px; "/> <input type =" text "value =" input "style =" width: 50px; "/> <input type =" button "id =" btn_4 "value =" button 4 "class =" button "/> <strong> 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 finds the elements after the first selector </strong> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
After running, you need to refresh it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
