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.


  • 相关阅读:
    cookie和session区别
    jsp编写页面时常见错误提示
    web处理jsp文件的三个阶段
    JSP页面元素
    B/S与C/S区别
    url组成部分
    css选择器
    ol,ul,dl,table标签的基本语法
    剑指offer-把二叉树打印成多行
    剑指offer-从上往下打印二叉树
  • 原文地址:https://www.cnblogs.com/HeroBeast/p/1307388.html
Copyright © 2011-2022 走看看