Jquery实现动态切换图片的方法

这篇文章主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下

本文实例讲述了Jquery实现动态切换图片的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title></title> 
7. <style type="text/css"> 
8. #tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;margin:auto;}  
9. #tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;}  
10. #main{margin:0px auto;border:1px solid yellow;} 
11. </style>  
12. <script src="jquery-1.6.2.min.js" type="text/javascript"></script> 
13. <script type="text/javascript"> 
14. var $imgs; 
15. var $tds; 
16. $(function () { 
17. $tds = $("#tbl td"); 
18. $tds.click(function () { 
19. //说明: 
20. //$("img", $(this))表示当前td下的img元素 
21. //$("img", $(this).siblings("td")) 表示当前td的所有兄弟元素(并且要求是td)下的img元素 
22. $("img", $(this)).attr("src", "../images/select.JPG"); 
23. $("img", $(this).siblings("td")).attr("src", "../images/noselect.JPG"); 
24. }); 
25. } 
26. ); 
27. </script> 
28. </head> 
29. <body> 
30. <div id="main"> 
31. <table id="tbl"> 
32. <tbody> 
33. <tr> 
34. <td><img src="../images/noselect.JPG" /></td> 
35. <td><img src="../images/noselect.JPG" /></td> 
36. <td><img src="../images/noselect.JPG" /></td> 
37. <td><img src="../images/noselect.JPG" /></td> 
38. <td><img src="../images/noselect.JPG" /></td> 
39. </tr> 
40. </tbody> 
41. </table> 
42. </div>  
43. </body> 
44. </html> 

希望本文所述对大家的jQuery程序设计有所帮助。