一、鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件；
注意：鼠标事件方法的区别如下
<style>
div {
width: 200px;
height: 200px;
background: pink;
}
p {
background: green;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>hello</p>
</div>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
/* 鼠标事件
1.鼠标在其被选元素的子元素上来回进入时，触发mouseover()
不触发mouseenter()
2.鼠标在其被选元素的子元素上来回进入时，触发mouseout()
不触发mouseeleave() */
//1.click()
$('div').click(function () {
alert("我被点击了")
})
//mouseover() 当鼠标进入div的时候触发，当鼠标在p和div之间移出移入时仍然触发
$('div').mouseover(function () {
console.log("mouseover");
})
//mouseenter() 当鼠标进入div的时候触发，当鼠标在p和div之间移出移入时不在触发
$('div').mouseenter(function () {
console.log("mouseenter");
})
//mouseout()当鼠标进出div的时候触发，当鼠标在p和div之间移出移入时仍然触发
$('div').mouseout(function () {
console.log("mouseout");
})
//mouseleave()当鼠标进出div的时候触发，当鼠标在p和div之间移出移入时不在触发
$('div').mouseleave(function () {
console.log("mouseleave");
})
</script>二、键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件
触发顺序：1.keydown 2.keypress 3.keyup
<input type="text" name="" id="">
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
/* 用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件*/
/* 触发顺序：
键盘被按下
keypress触发
键盘释放了按键 */
$(function () {
$('input').keydown(function () {
console.log("键盘被按下");
})
$('input').keyup(function () {
console.log("键盘释放了按键");
})
$('input').keypress(function () {
console.log("keypress触发");
})
})
</script>三、浏览器事件
1.调整窗口大小 $(selector).resize( );
<body>
<ul class="header">
<li>男生</li>
<li>女生</li>
</ul>
<ul class="box">
<li>男生小说</li>
<li>女生小说</li>
</ul>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
$('.header li').click(function () {
var index = $(this).index();
$(".box li").css("background", "")
//变量的字符串拼接
// $(".box li:eq(" + index + ")").css("background", "red")
//es6模板拼接
$(`.box li:eq(${index})`).css("background", "red")
})
</script>
</body>2.index（）方法，可以返回$(selector)对象的索引值。
<body>
<ul class="header">
<li>男生</li>
<li>女生</li>
</ul>
<ul class="box">
<li>男生小说</li>
<li>女生小说</li>
</ul>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
//点击男生对应男生小说，点击女生对应女生小说；
$('.header li').click(function () {
var index = $(this).index();
$(".box li").css("background", "")
//变量的字符串拼接
// $(".box li:eq(" + index + ")").css("background", "red")
//es6模板拼接
$(`.box li:eq(${index})`).css("background", "red")
})
</script>
</body>四、绑定事件和移除事件
绑定事件使用
$(selector).on(type,fn);
其中 type是指事件，如：click,mouseover,mouseout等，还可以是自定义事件
fn是处理函数；
（1）绑定单个事件
<div></div>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
/* 绑定单个事件 */
$('div').click(function () {
$(this).css({
background: "pink",
transition: "all 1s"
})
})
</script>（2）绑定多个事件：
绑定多个事件是用on ，将事件以对象的形式书写
$('div').on({
click: function () {
$(this).css({
background: "pink",
transition: "all 1s"
})
},
mouseover: function () {
$(this).css({
width: "500px",
height: "500px",
transition: "all 1s"
})
},
mouseout: function () {
$(this).css({
width: "300px",
height: "300px",
background: "red"
})
}
})（3）利用on给未来元素，做事件委托处理
<div></div>
<script>
$('div').html('<h1>1111</h1>')
$('div').on("click", "h1", function () {
alert("事件委托啦")
})
</script>（4）移除事件
移除事件使用off()方法：off([type])
Type:事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
当off()不带参数时，表示移除所绑定的全部事件
$('button').click(function () {
$("div").off("click")
})（5）hover()方法；
hover()方法相当于mouseenter与mouseleave事件的组合
补充：mouseover 和mouseenter 区别是：在进入子元素区域时候，mouseenter 将不在触发。只在进入父元素（绑定了mouseenter ）时才触发。
hover(enterFn,leaveFn);
第一个函数表示光标移入时触发
第二个函数表示光标移出时触发
<body>
<div></div>
<script src="http://code.jQuery.com/jQuery-2.1.1.min.js"></script>
<script>
/* hover()方法；相当于mouseenter与mouseleave事件的组合 */
$('div').hover(fn, fn2);
function fn() {
console.log('1');
}
function fn2() {
console.log('2');
}
</script>
</body>6.toggle()方法
toggle()方法不带参数，与show( )和hide( )方法作用一样
toggle(参数)，可以实现添加类去移除类的切换；
五、jQuery动画效果
1.show() 控制元素的显示 $(selector).show([speed],[callback])
2.hide( )控制元素的隐藏 $(selector).hide([speed],[callback])
speed 可选。表示速度，默认为“0”，可能值：毫秒（如1000）、slow、normal、fast
callback可选。show函数执行完之后，要执行的函数
3.改变元素的透明度
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果callback回调函数是在动画结束执行的；
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
4.改变元素的高度
slideDown() 可以使元素逐步延伸显示
slideUp()则使元素逐步缩短直至隐藏
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])
$(document).ready(function() {
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
});5.自定义动画
$(selector). animate({params},speed,callback)
animate()方法包含4个参数：【只有第一个参数是必须的】
第一个参数： 是一组包含作为动画属性和终值的样式属性和以及其值的集合
第二个参数： 表示动画持续的时间，以毫秒为单位，也可以用预定义字符串如：slow、normal、fast等；
第三个参数： 表示要使用的擦除效果的名称，若要使用该参数，则需要插件支持。默认jQuery提供linear、和swing特效；
第四个参数： 表示回调函数，即动画完毕后将要调用的函数
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
function fn() {
$('div').animate({
height: "800px",
width: "800px"
}, 2000)
$('div').animate({
height: "200px",
width: "200px"
}, 2000, fn)
}
fn();
</script>
</body>
