<!--
1. Hierarchy selector: Through the hierarchical relationship between DOM elements, the main hierarchical relationships include descendants, father and son, neighboring, sibling relationships, through which the base-class relationship can easily and quickly locate elements
jquery Selector Detailed
Depending on the elements in the obtained page, you can divide the jquery selector into: basic selector, hierarchy selector, filter selector, form selector four categories. Among them, in the filter selector can be divided into: Simple filter selector, Content filter selector, visibility filter selector, attribute filter selector, child element filter selector, Form object attribute filter Selector 6 kinds
Note: Ancestor descendant is different from the set of elements selected by Parent>child, whose hierarchical relationship is ancestor and descendant, while the latter is a parent-child relationship, and Prev+next can use. Next () instead prev~ Siblings can be replaced with Nextall ().
-->
<title></title>
<!--use the jquery hierarchy selector to select elements: In the page, set 4 block <div> tags, where the second block <div>, add 1 <span> tags, in the <span> tag and add 1 <span> tags, all element initial values are hidden, and then through the jquery hierarchy selector, the corresponding page markup is displayed. -->
<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 () {
$ (' #divMid '). CSS (' Display ', ' block ');
$ (' div span '). CSS (' Display ', ' block '); Show all <span> tags in div
})
$ (function () {
$ (' #divMid '). CSS (' Display ', ' block ');
$ (' Div>span '). CSS (' Display ', ' block '); Show <div> Neutron <span> mark
})
$ (function () {
$ (' #divMid +div '). CSS (' Display ', ' block '); Displays the next <div> after the ID is divmid element
$ (' #divMid '). Next (). CSS (' Display ', ' block ');
})
$ (function () {
$ (' #divMid ~ div '). css (' Display ', ' block '); Show all <div> after ID is divmid element
$ (' #divMid '). Nextall (). CSS (' Display ', ' block ');
})
$ (function () {
$ (' #divMid '). Siblings (' div '). css (' Display ', ' block '); Show all adjacent <div> with ID divmid element
})
/* Siblings () method and selector prev~siblings difference is that the former get all the adjacent elements, before and after, the latter only to get all the adjacent elements behind the tag, can not get the front part of the * *
</script>
<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>
