jquery是一个轻量级的js库，封装很多有用的函数使得代码变得简洁干净。学习jquery常用的函数
1：mouseover(鼠标移上)和mouseleave(鼠标移出)
2：mouseenter()和mouseout()效果雷同
$(document).ready(function(){
$('.table tr').mouseover(function(){
$(this).addClass('odd');
}).mouseleave(function(){
$(this).removeClass('odd');
})
})
此两种方法可用一个函数hover()代替
$(document).ready(function(){
$('.table tr').hover(function(){
$(this).addClass('odd');
},function(){
$(this).removeClass('odd');
})
})
2:mousedown(鼠标按下)和mouseup(鼠标松开)
$(document).ready(function(){
$('.table tr').mousedown(function(){
$(this).addClass('odd');
}).mouseup(function(){
$(this).removeClass('odd');
})
})
此方法两种方法可用一个函数toggle()代替
$(document).ready(function(){
$('.table tr').toggle(function(){
//点击第一下执行
$(this).addClass('odd');
},function(){
//点击第二下执行
$(this).removeClass('odd');
})
})
弹出层的一个小例子
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
var speed=500;
$('#btnShow').bind('click',function(event){
//取消事件冒泡(取消19行(代码是)其父类的事件的触发)
event.stopPropagation();
//设置弹出层的位置
var offset=$(event.target).offset();//offset对象包含两个属性:left,top指相对于视口偏离的位置
$("#divPop").css({top:offset.top+$(event.target).height()+"px",left:offset.left});
//设置动画弹出的速度
$("#divPop").show(speed);
})
$(document).bind('click',function(){$('#divPop').hide(speed)});
$("#btnShow").bind('click',function(){$('#divPop').show(speed)});
})
</script>
</head>
<body>
<br /><br /><br />
<button id="btnShow">显示提示文字</button>
<!-- 弹出层 -->
<div id="divPop" style="background-color:#f0f0f0;border:solid 1px #000000;position:absolute;display:none;width:300px;height:100px">
<div style="text-align:center">弹出层</div>
</div>
</body>
</html>
windows函数：setInterval(function(){},1000) setTimeout(function(){},1000)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script>
$(function(){
var sport=function(){
$('#divtest').animate({
marginLeft:'+200px',
marginTop:'+100px',
},9000);
}
$('#bt').bind('click',sport);
window.setTimeout(function(){
$('#divtest').stop();
},3000)
})
</script>
</head>
<body>
<div id="divtest" style="height:20px;width:30px;border:1px;background-color:yellow;margin-left:0px"></div>
<input type="button" value="动画" id="bt"/>
</body>
</html>