事件解析 ：
jQuery基本的事件共有以下6种。
·页面事件。
·鼠标事件。
·键盘事件。
·表单事件。
·编辑事件。
·滚动事件。
事件操作是jQuery的核心。
1.页面事件
在jQuery中 ，我们使用$(documend).ready()来替代JavaScript中的window.onload ,但这两者之间有着一些区别 。
（1）JavaScript的onload事件
在JavaScript中 , onload表示文档加载完成后再执行的一个事件 。
语法 ：window.onload = function(){
……………….
}
说明 ：对于 JavaScript 的 onload 事件来说 ，只有当页面上的所有DOM元素以及所有外部文件（图片，外部CSS,外部JavaScript等）都加载完成之后再执行 。这里的“所有DOM元素”，指的是HTML部分的代码 。
（2）jQuery的ready事件
在jQuery中，ready也表示文档加载完成后再执行的一个事件。
语法 ：$(document).ready(function(){
………………….
});
说明 ：对于 jQuery 的 ready 事件来说 ，只要当页面上的所有DOM元素加载完成就可以执行 ，不需要等外部文件（图片，外部CSS,外部JavaScript等）加载完成。
jQuery的ready事件相当于JavaScript的onload事件来说，极大地提高了页面的响应速度，提供了更好的用户体验。
（3）ready事件的4种写法。
写法1 ：
$(documend).ready(function(){
……………………..
});
写法2 ：
jQuery(documend).ready(function(){
……………………..
});
写法3 ：
$(function(){
……………………..
});
写法4 ：
jQuery(function(){
……………………..
});
2.鼠标事件
事件 | 说明 |
click | 鼠标单击事件 |
mouseover | 鼠标移入事件 |
mouseout | 鼠标移出事件 |
mousedown | 鼠标按下事件 |
mouseup | 鼠标松开事件 |
mousemove | 鼠标移动事件 |
（1）鼠标单击
注意 ：单击事件不只是按钮台有，我们可以为任何元素添单击事件 。
举例 ：为div元素添加单击事件
$(function(){
$("div").click(function(){
alert("……..");
})
})举例 ：自动触发点击事件
$(function(){
$("#btn").click(function(){
alert("………..");
}).click();
})（2）鼠标移入和鼠标移出
举例 ：移入和移出
<script>
$(function () {
$("div").mouseover(function () {
$(this).css("color", "red");
})
$("div").mouseout(function () {
$(this).css("color", "black"); //（this等价于“div”）
})
})
</script>
<body>
<div>可舒服了</div>
</body>（3）鼠标按下和鼠标松开
举例 ：
<script>
$(function () {
$("#btn").mousedown(function () {
$("h1").css("color", "red");
})
$("#btn").mouseup(function () {
$("h1").css("color", "black");
})
})
</script>
<body>
<h1>学习</h1>
<input id="btn" type="button" value="按钮"/>
</body>3.键盘事件
在jQuery中，常用的键盘事件共有两种。
·键盘按下 ：keydown 。
·键盘松开 ：keyup 。
举例 ：统计输入字符的长度
<script>
$(function () {
$("#txt").keyup(function () {
var str = $(this).val();
$("#num").text(str.length);
})
})
</script>
<body>
<input id="txt" type="text"/>
<div>
字符串长度为 ：
<span id="num">0</span>
</div>
</body>
4.表单事件
在jQuery中,常用的表单数据有3种。
·focus和blur.
·select .
·change.
还有一个submit事件 。不过 ，submit事件一般都是结合后端技术来使用。
（1）focus 和 blur
focus表示获取焦点时触发的事件，而blur表示失去焦点时触发的事件，两者是相反的操作。
并不是所有的HTML元素都有焦点事件 ，具有“获取焦点”和“失去焦点”特点的元素只有两种。
·表单元素（单选按钮 ，复选框 ，单行文本框 ，多行文本框 ，下拉列表）。
·超链接。
<input id="search" type="text" value="百度一下"/ >
<input type="button" value="搜索"/>
<script>
$(function () {
//获取文本框默认值
var txt = $("#search").val();
//获取焦点
$("#search").focus(function () {
if($(this).val() == txt){
$(this).val("");
}
})
//失去焦点
$("#search").blur(function () {
if ($(this).val() == "") {
$(this).val(txt);
}
})
})
</script>
（2）select
在jQuery中 ，当我们选中“单行文本框”或“多行文本框”中的内容时 ，就会触发select事件。
举例 ：
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>select</title>
<script src="~/Content/bootstrap-4.1.3-dist/js/jquery-3.2.1.js"></script>
<script>
$(function () {
$("#txt1").select(function () {
alert("单行文本框的内容");
})
$("#txt2").select(function () {
alert("你选中了多行文本框的内容");
})
})
</script>
</head>
<body>
<input id="txt1" type="text" value="爱你哟"/><br>
<textarea id="txt2" cols="20" rows="5" style="margin-top:10px;">爱你呢</textarea>
</body>
</html>
（3）change
在jQuery中 ，change事件常用于“具有多个选项的表单元素”中change事件在以下三种情况下被触发 。
·单选框选择某一项时触发 。
·复选框选择某一项时触发 。
·下拉菜单选择某一项时触发 。
举例 ：
5.编辑事件
在jQuery中 ，常用的编辑事件只有一种 ，那就是contexmenu事件 。
主要控制应该何时显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
举例 ：禁用鼠标右键
。。。。。。
分析 ：虽然鼠标右键被禁用了，但是我们还是可以用快捷键，如使用“ctel”+“c”快捷键来复制内容，使用“ctrl”+“s”快捷键来保存网页等，并不能真正地防止复制。
contextmenu 事件在大多数情况下都是用来保护版权的。
6.滚动事件
滚动事件 ，指的就是拉动页面滚动条是所触发的事件。
在jQueery中，我们可以使用scroll()方法来表示滚动事件。
语法 ：$().scroll(function(){
…………
});
说明 ：scroll()方法经常配合scrollTop方法了一起使用。
举例：回到顶部
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>scrol</title>
<style type="text/css">
body{
height: 1800px;
}
div{
position:fixed;
right: 50px;
bottom:50px;
display:none;
width:40px;
height:40px;
color:white;
background-color:#45B823;
font-family:微软雅黑;
font-size: 15px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
</style>
<script src="~/Content/bootstrap-4.1.3-dist/js/jquery-3.2.1.js"></script>
<script>
$(function () {
//根据滚动距离判断按钮是显示或隐藏
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("div").css("display", "inline-block");
}
else {
$("div").css("display", "none");
}
});
//实现点击滚动回到顶部
$("div").click(function () {
$("html,body").scrollTop(0);
});
})
</script>
</head>
<body>
<h3>你是谁</h3>
<div>回到顶部</div>
</body>
</html>
