<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
. imgclass
{
height:200px;
width:200px;
}
. imgclass1
{
width:210px; height:210px;
}
Table TR TD
{
width:250px; height:250px;
}
</style>
<script src= "Jquery-1.9.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (' #Button1 '). Click (function () {
Gets the elements of all types (tagname) as img
$ (' img '). Show (3000);
$ (' img '). Hide (3000);
Gets the element with the value "Imgclass" for all class attributes
$ ('. Imgclass '). Hide (3000);
$ ('. Imgclass '). Show (3000);
$ ("#img1, #img2, #Button1"). Hide (2000);
$ ("#img1, #img2, #Button1"). Show (2000); It must be surrounded by a pair of "all IDs" instead of each ID enclosed in quotes
Multiple selectors can be either an ID or a mixture of id,tagname and classname
$ ("#img1, #img2, input"). Hide (2000);
$ ("#img1, #img2, Input"). Show (2000);
Change the style of a picture
$ (' #Button2 '). Click (function () {
$ (' #img2 '). Removeclass ()//delete class style with ID Img2
$ (' #img2 '). addclass (' Imgclass1 ');//Then add a style, click the button again to manipulate the picture, because the style of this picture has changed, so do not change
})
})
})
</script>
<body>
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
<tr><td></td><td>
<input id= "Button1" type= "button" value= "Dot Me"/></td></tr>
<tr><td></td><td> <input id= "Button2" type= "button" value= "Change control style"/></td></ Tr>
</table>
</body>
