<Head>
<Title> </title>
<Style type = "text/css">
. Imgclass
{
Width: 200px; height: 200px;
}
. Imgclass1
{
Width: 210px; height: 210px;
}
Table tr td
{
Width: 300px; height: 300px;
}
</Style>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ('# Button1'). click (function (){
// Obtain all the elements whose tagnames are img.
// $ ('Img '). hide (3000 );
// $ ('Img '). show (3000 );
// Obtain the elements whose values of all class attributes are "imgclass ".
// $ ('. Imgclass'). hide (3000 );
// $ ('. Imgclass'). show (3000 );
// Obtain all elements in the document
$ ('*'). Hide (2000 );
$ ('* 'Background .css ('background-color', 'blue ');
// $ ('# Img1, # img3, # Button2'). hide (2000 );
// $ ("# Img1, # img3, # Button2 "). show (2000); // All IDS must be enclosed by a pair of '', and each id cannot be enclosed by quotation marks.
// Multiple selectors can be either id or a mixture of id, tagname, and classname
// $ ('# Img1, # img3, input'). hide (2000 );
// $ ("# Img1. # img3, input"). show (2000 );
})
// Change the image Style
$ ('# Button2'). click (function (){
$ ('# Img2'). removeClass ();
$ ('# Img2'). addClass ('imgclass1 ');
})
})
</Script>
</Head>
<Body>
<Table>
<Tr>
<Td>
</Td>
<Td>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Td>
</Td>
</Tr>
</Table>
<Input id = "Button1" type = "button" value = ""/> <br/>
<Input id = "Button2" type = "button" value = "change control style"/> <br/>
</Body>