jquery基础
2008-10-09 16:54
483 查看
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.
$(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.
相关文章推荐
- Jquery 表单基础元素操作总结
- [导入]Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
- Jquery基础学习笔记(1)
- jQuery零基础入门——(六)修改DOM结构
- JQuery的Promise详解 : Promise基础
- jQuery基础学习(2)(效果)
- jQuery基础---filter()和find()
- 九、jQuery选择器基础
- jQuery常用及基础知识总结(一)
- jQuery基础学习(5)(AJAX)
- jquery基础学习
- JQuery学习笔记三:基础DOM和CSS操作
- JQuery 常用方法基础教程
- jQuery 基础DOM和CSS操作
- jquery的学习笔记,天天要努力,基础基础
- jQuery基础【1】
- jQuery的基础知识二
- jquery selector 基础
- jQuery基础
- 前端计划第二天-jQuery基础