<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
. Imgclass
{
Width: 100px;
Height: 100px;
}
Div
{
Width: 250px;
Height: 250px;
Background-color: # eee;
Border: solid 2px Blue;
}
</Style>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Button1'). click (function (){
// $ ('# Divfirst img '). hide (2000); // obtain all the elements whose tagnames are img in the layer where id is divfirst, whether or not these elements are nested in other elements
// $ ('# Divfirst span img '). hide (2000); // obtain the img element of all span sub-elements in the layer with id divfirst. Note that this span sub-element can be the son or grandson of divFirst.
// $ ('# Divfirst> span img'). hide (2000); // obtain all img elements in the same level span element of the layer whose id is divFirst
// $ ('# Divfirst + div img '). hide (2000); // obtain the first div element of the same level behind the layer with id divFirst, and this div must be followed. If there are other elements in the middle, it cannot be obtained.
// $ ('# Divfirst + div img'). hide (2000 );
// $ ('# Divfirst'). next (). hide (2000); // obtain the first sibling element after the layer whose id is divfirst, no matter what type
// $ ('# Divfirst ~ Div img '). hide (2000); // obtain all the same level behind divfirst, And the type is all img elements in div.
// $ ('# Divfirst'). nextAll (). hide (2000); // obtain all the same-level elements after divfirst, no matter what type (the type is uncertain)
// $ ('# Divfirst ~ '). Hide (2000); this code has the same effect as the previous one.
// $ ('# Divfirst span'). hide (2000 );
// $ ('# Divfirst> span img'). hide (2000 );
// $ ('# Divfirst + div img'). hide (2000 );
// $ ('# Divfirst'). next (). hide (2000 );
// $ ('# Divfirst ~ Div img '). hide (2000 );
// $ ('# Divfirst ~ '). Hide (2000 );
// $ ('# Divfirst'). nextAll (). hide (2000 );
})
})
</Script>
</Head>
<Body>
<Input id = "Button1" type = "button" value = "layered selector"/>
<Div id = "divfirst">
Level 1
<Span> landscape
<A href = "#">
</A>
</Span>
<! -- <Div> -->
<Span>
</Span> <! -- </Div> -->
</Div>
<Div>
Layer 2
</Div>
<Div>
Layer 3
</Div>
</Body>
</Html>