1、文档描述：https://www.jquery123.com/ready/
image.png
根据上面的描述，就是当DOM就绪时会执行，那么这个方法与document.onload有什么区别呢？
document.onload=function()
{
}
onload事件呢，是整个页面完全呈现时才会触发，比如说这个页面上有大量的图片，如果图片还没有接受完整，这个事件也是不会触发的，但是在大多数情况下，只要DOM结构完全加载时，脚本就应该可以运行，所以这个时候就要用.ready()方法了，传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。当使用的脚本依赖 CSS 属性值时，需要特别注意，要保证外部的样式或内嵌的样式被加载完后，再调用脚本。
以下三个语法是全部等价的：
- $(document).ready(handler)
- $().ready(handler)//不推荐使用
- $(handler)
2、事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
<script type="text/javascript">
$(function(){
//这就相当于写在了ready()里面
$("#btest").click(function(){
alert("jquery测试绑定事件")
})
})
</script>
</head>
<body>
<input type="button" value="测试事件绑定" id="btest" />
</body>
</html>
网页显示：
image.png
3、常见事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var span=document.getElementById("e01");
span.innerHTML="sssss"
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function(){
$("#textMsg").append("键盘按下：keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按：keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起：keyup");
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function(){
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击：click");
}).dblclick(function(){
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
