zoukankan      html  css  js  c++  java
  • jquery基础

    demo7:table滑过变色,隔行变色.
    $(document).ready(function(){   //这个就是传说的ready
             $(".stripe tr").mouseover(function(){  
                     //如果鼠标移到class为stripe的表格的tr上时,执行函数
             $(this).addClass("over");}).mouseout(function(){
                                     //给这行添加class值为over,并且当鼠标一出该行时执行函数
             $(this).removeClass("over");})   //移除该行的class
             $(".stripe tr:even").addClass("alt");
                     //给class为stripe的表格的偶数行添加class值为alt
    });
    在效果上,我又加了点击 某行 变色:
    $(document).ready(function(){   //这个就是传说的ready
             $(".stripe tr").mouseover(function(){  
                     //如果鼠标移到class为stripe的表格的tr上时,执行函数
             $(this).addClass("over");}).mouseout(function(){
                                     //给这行添加class值为over,并且当鼠标一出该行时执行函数
             $(this).removeClass("over");}).click(function(){ //移除该行的class
         $(this).toggleClass("click").removeClass("alt")})//点击变色,注意:因为有隔行变色,所以这里必须在触发toggleClass时,remove("alt").
         $(".stripe tr:even").addClass("alt");
             //给class为stripe的表格的偶数行添加class值为alt
    });
    说到这里 ,不得不说一下 toggle与toggleClass区别:
    $(document).ready(function(){   //这个就是传说的ready
             $(".stripe tr").mouseover(function(){  
                     //如果鼠标移到class为stripe的表格的tr上时,执行函数
             $(this).addClass("over");}).mouseout(function(){
                                     //给这行添加class值为over,并且当鼠标一出该行时执行函数
             $(this).removeClass("over");}).toggle(function(){ $(this).addClass("click"); },function(){ $(this).removeClass("click");}).unbind("click")
         $(".stripe tr:even").addClass("alt");
             //给class为stripe的表格的偶数行添加class值为alt
    });
    可以发现:
    toggleClass:可以发现超连接还是可以连接的,没有被 toggle和click占用
    toggle:可以发现超连接已经不可以用了,所以说toggle不适合这种情况。不过可以把click解绑(unbind("click")),代码量好象比click结合toggleClass多,所以我选择的是toggleClass.


  • 相关阅读:
    关于一个标准的poi下载文件模板 可拿来来直接使用
    关于史上最简单的导出(导出excal)
    关于spring MVC的面试题
    关于响应式布局(pc端访问自适应 手机端访问自适应)
    密码生成器
    关于poi的导出(POI)
    关于MUI一个很实用的前端框架
    (转载)插画版Kubernetes指南(小孩子也能看懂的kubernetes教程)
    (转载)Python tips: 什么是*args和**kwargs?
    python编程中的if __name__ == 'main': 的作用和原理
  • 原文地址:https://www.cnblogs.com/HeroBeast/p/1307388.html
Copyright © 2011-2022 走看看