☆ window.on和$(document).ready()的区别
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>window.on和$(document).ready()的区别
</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function abc(){
alert("函数abc");
}
function abc2(){
alert("函数abc2");
}
$(document).ready(abc);
$(document).ready(abc2);
</script>
</head>
<body>
</body>
</html>
☆ 事件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document
</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#dpanl{
width:300px;
height:300px;
}
.he{
background:orange;
font-size:30px;
}
#cen{
background:green;
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".he").mouseover(function(){
$(this).next().show();
});
$(".he").mouseout(function(){
$(this).next().hide();
});
});
</script>
</head>
<body>
<div id="dpanl">
<div class="he">jQuery是什么?
</div>
<div id="cen">
随着JavaScript、CSS、Ajax等技术的进步,越来越多的开发者将丰富多彩的程序及其功能进行封装,供其他人可以调用这些封装好的程序组件(框架)
jQuery是优秀的JavaScript框架,能方便的处理html文档、事件、动画以及Ajax交互
</div>
</div>
</body>
</html>
☆ 事件2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document
</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#dpanl{
width:300px;
height:300px;
}
.he{
background:orange;
font-size:30px;
}
#cen{
background:green;
display:none;
}
.abc{
background:#aaa;
}
</style>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".he").bind("click",function(){
var a=$(this).next();
if(a.is(":visible")){
a.hide();
$(".he").removeClass("abc");
}else{
a.show();
$(".he").addClass("abc");
}
$("#but").click(function(){
$(".he").unbind("click");
});
});
});
</script>
</head>
<body>
<input type="button" id="but" value="移除事件"/>
<div id="dpanl">
<div class="he">jQuery是什么?
</div>
<div id="cen">
随着JavaScript、CSS、Ajax等技术的进步,越来越多的开发者将丰富多彩的程序及其功能进行封装,供其他人可以调用这些封装好的程序组件(框架)
jQuery是优秀的JavaScript框架,能方便的处理html文档、事件、动画以及Ajax交互
</div>
</div>
</body>
</html>