jquery基础-CSDN博客

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.