Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<! --
1. hierarchical selector: gets elements through the hierarchical relationship between DOM elements. Its main hierarchical relationships include descendant, parent and child, adjacent, and sibling relationships. Through the basic relationships, you can easily and quickly locate elements.
JQuery selector details
Based on the elements in the obtained page, jQuery selectors can be divided into four categories: Basic selector, level selector, filter selector, and form selector. There are six filter selectors: simple filter selector, content filter selector, visibility filter selector, attribute filter selector, child element filter selector, and form object attribute filter selector.
Note: the set of elements selected by ancestor descendant and parent> child is different. The hierarchy of the former is the ancestor and descendant, and the latter is the parent-child relationship. In addition, prev + next can be used. next () instead, and prev ~ Siblings can be replaced by nextAll.
-->
<Title> </title>
<! -- Use the jQuery hierarchy selector to select an element: on the page, set four <div> tags. In the second <div>, add one <span> tag, add another <span> tag in the <span> tag. The initial values of all elements are hidden. Then, the corresponding page tag is displayed through the jQuery hierarchy selector. -->
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Style type = "text/css">
Body {font-size: 12px; text-align: center ;}
Div, span {float: left; border: solid 1 px # ccc; margin: 8px; display: none}
. ClsFraA {width: 65px; height: 65px}
. ClsFraP {width: 45px; height: 45px; background-color: # eee}
. ClsFraC {width: 25px; height: 25px; background-color: # ddd}
</Style>
<Script type = "text/javascript">
$ (Function (){
(('Nvidivmid'mirror.css ('display', 'block ');
$ ('Div span'mirror.css ('display', 'block'); // display all <span> tags in the div
})
$ (Function (){
(('Nvidivmid'mirror.css ('display', 'block ');
$ ('Div> span'demo.css ('display', 'block'); // display <div> neutron <span> flag
})
$ (Function (){
(('Nvidivmid1_div'mirror.css ('display', 'block'); // The next <div>
Certificate ('nvidivmid'0000.next().css ('display', 'block ');
})
$ (Function (){
$ ('# DivMid ~ Div'demo.css ('display', 'block'); // display all <div>
Certificate ('nvidivmid'0000.nextall().css ('display', 'block ');
})
$ (Function (){
(('Nvidivmid'mirror.siblings('div'mirror.css ('display', 'block'); // display all adjacent elements whose ID is divMid <div>
})
/* Siblings () method and Selector prev ~ The difference between siblings and siblings is that the former obtains all adjacent elements regardless of the front and back, while the latter only obtains all adjacent elements after the mark, and cannot obtain the front part */
</Script>
</Head>
<Body>
<Div class = "clsFraA">
Left </div>
<Div class = "clsFraA" id = "divMid">
<Span class = "clsFraP" id = "Span1">
<Span class = "clsFraC" id = "Span2"> </span>
</Span>
</Div>
<Div class = "clsFraA">
Right_1 </div>
<Div class = "clsFraA">
Right_2 </div>
</Body>
</Html>