码迷,mamicode.com
首页 > Web开发 > 详细

JQuery练习

时间:2020-02-06 12:38:21      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:选择   ++   alt   效果图   tab   select   gray   class   com   

1.表格斑马线

 1 <!DOCTYPE html>
 2 <script src="jquery.min.js"></script><!-- 放在同一个文件夹下 -->
 3 <html>
 4 
 5 <head>
 6     <title></title>
 7 </head>
 8 <style type="text/css">
 9 td {
10     text-align: center;
11 }
12 </style>
13 <script type="text/javascript">
14 // $(selector: odd) 满足选择器条件的奇数元素
15 // $(selector: even) 满足选择器条件的偶数元素
16 // 因为是基零的, 所以第一排的下标其实是0(是偶数)
17 $(function() {
18     $("#d").click(function() {
19         console.log(111);
20         $("tr:odd").toggleClass("gray");
21     });
22 });
23 </script>
24 
25 <body>
26     <table width="400px" style="border-collapse: collapse;">
27         <tr>
28             <td>id</td>
29             <td>名称</td>
30             <td>血量</td>
31             <td>伤害</td>
32         </tr>
33         <script type="text/javascript">
34         for (i = 0; i < 6; i++) {
35             document.write(
36                 "<tr><td>" + i + "</td><td>" + "hero" + i + "</td><td>" + 500 + "</td><td>" + 70 + "</td></tr>"
37             )
38         }
39         </script>
40     </table>
41     <br>
42     <button id=‘d‘>应用/取消表格斑马线</button>
43     <style type="text/css">
44     .gray {
45         background-color: gray;
46     }
47     </style>
48 </body>
49 
50 </html>

效果图:

技术图片技术图片

 

JQuery练习

标签:选择   ++   alt   效果图   tab   select   gray   class   com   

原文地址:https://www.cnblogs.com/gilgamesh-hjb/p/12267983.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!