用简洁的jQuery方法toggleClass实现隔行换色
2023-06-13 09:15:29 时间
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下:
<!DOCTYPEHTML> <html> <head> <metacharset="utf-8"> <title>隔行换色</title> <scriptsrc="js/jquery-1.4.2.min.js"></script> <styletype="text/css"> body,table,td,{ font-family:Arial,Helvetica,sans-serif; font-size:12px; } .h{ background:#f3f3f3; color:#000; } .c{ background:#ebebeb; color:#000; } </style> </head> <body> <divid="aaa"> <form> <tableid="table"width="50%"border="0"cellpadding="3"cellspacing="1"> <tr> <tdwidth="30"align="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> <tr> <tdalign="center"><inputtype="checkbox"name="checkbox"class="check1"value="checkbox"/></td> <td>蓝枫前端</td> <td>蓝枫前端</td> </tr> </table> </form> </div> <script>
第一种比较复杂的方法:
$(function() { $("#tabletr").hover(function() { $(this).addClass("h"); },function() { $(this).removeClass("h"); }) $("input").click(function() { if($(this).attr("checked")) { $(this).closest("tr").addClass("c"); } else { $(this).closest("tr").removeClass("c"); } }) })
第二种比较简单的方法:
toggleClass()对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用"switch"参数,您能够规定只删除或只添加类。
$(function(){ $("#tabletr").hover(function(){ $(this).toggleClass("h"); }) $("input").click(function(){ vard=$(this); d.closest("tr").toggleClass("c",d.attr("checked")); }) }) </script> </body> </html>
相关文章
- jQuery offset()和position()方法
- jQuery prev() prevAll()和prevUntil()方法
- jQuery next() nextAll()和nextUntil()方法
- JQuery弹出框定位实现方法
- jQuery数组处理方法汇总
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
- jquery添加节点的几种方法介绍
- html文件中jquery与velocity变量中的$冲突的解决方法
- jquery遍历数组与筛选数组的方法
- jquery.cookie()方法的使用(读取、写入、删除)
- JQuery中使用Ajax赋值给全局变量异常的解决方法
- jquery的ajax和getJson跨域获取json数据的实现方法
- jquery解析XML字符串和XML文件的方法说明
- jquery日历控件实现方法分享
- jquery判断滚动条到达了底部和顶端的方法
- jQuery对于显示和隐藏等常用状态的判断方法
- Jquery实现图片预加载与延时加载的方法
- jQuery实现tag便签去重效果的方法
- jquery调取json数据实现省市级联的方法
- jQuery及JS实现循环中暂停的方法
- jQuery实现长按按钮触发事件的方法
- 原生js实现复制对象、扩展对象类似jquery中的extend()方法