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>Untitled Document</title> 
7. <script src="js/jquery-1.7.1.min.js"></script> 
8. <script src="js/jquery.raty.min.js"></script> 
9. <script type="text/javascript"> 
10. $(function(){ 
11. $("#div1").hover(function(){ 
12. $("#div1 li").hover(function(){ 
13. h=0; 
14. n=$("#div1 li").index(this); 
15. for(var i=0;i<=n;i++){ 
16. $("#div1 li").eq(i).addClass("on"); 
17. } 
18. $("#div1 li").click(function(){ 
19. h=1; 
20. m=$("#div1 li").index(this); 
21. for(var i=0;i<=m;i++){ 
22. $("#div1 li").eq(i).addClass("on"); 
23. } 
24. return; 
25. }) 
26. },function(){ 
27. if(h==0) 
28. for(var i=5;i>=n;i--){ 
29. $("#div1 li").eq(i).removeClass("on"); 
30. } 
31. } 
32. ) 
33. },function(){ 
34. if(h==0) 
35. for(var i=0;i<=5;i++){ 
36. $("#div1 li").eq(i).removeClass("on"); 
37. } 
38. }) 
39. }) 
40. </script> 
41. <style type="text/css"> 
42. #div1 ul li{ 
43. margin:0 -8px; 
44. width:30px; 
45. height:34px; 
46. list-style:none; 
47. float:left; 
48. width:35px; 
49. background:url(img/xing1.gif) center center no-repeat; 
50. margin-left:10px; 
51. } 
52. #div1 ul li.on{ 
53. background:url(img/xing2.gif) center center no-repeat; 
54. } 
55. #div1{ 
56. height:35px; 
57. } 
58. </style> 
59. </head> 
60. <body> 
61. <div id="div1"> 
62. <ul> 
63. <li></li> 
64. <li></li> 
65. <li></li> 
66. <li></li> 
67. <li></li> 
68. <li></li> 
69. </ul> 
70. </div> 
71. </body> 
72. </html> 

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