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.


  • 相关阅读:
    linux PCI 接口
    Linux 内核链表头数据结构
    Linux内核链表
    spawn-fcgi原理及源代码分析
    TRIZ系列-创新原理-17-转变到新维度原理
    《转》ceilometer的数据採集机制入门
    git配置文件读取顺序
    Android Studio 使用感受 错误解决
    scikit-learn:在实际项目中用到过的知识点(总结)
    //%f表示以十进制格式化输出浮点数 %.2f
  • 原文地址:https://www.cnblogs.com/HeroBeast/p/1307388.html
Copyright © 2011-2022 走看看