如需要跟多资料请点击下方图片?（扫码加好友→备注66）
Jquery事件
ready加载事件
? ready()类似于 onLoad()事件
? ready()可以写多个，按顺序执行
? $(document).ready(function(){})等价于$(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ready事件</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
// 文档载入完便触发ready方法
$(document).ready(function(){
$("div").html("ready go...");
})
// $(document).ready(function(){}) == $(function(){})
$(function(){
$("p").click( function () {
$(this).hide();
});
});
$(function(){
$("#btntest").bind("click",function(){
$("div").html("剁吧...");
});
});
</script>
</head>
<body>
<h3>页面载入时触发ready()事件</h3>
<div></div>
<input id="btntest" type="button" value="剁手" />
<p>aaa</p>
<p>bbbb</p>
<p>ccc</p>
<p>dddd</p>
</body>
</html>
bind()绑定事件
? 为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject));
? eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
? 这类类型可以包括如下：
? blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
? mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
? mouseleave,change, select, submit, keydown, keypress, keyup, error
? [, eventData]：传递的参数，格式：{名:值,名2:值2}
? handler(eventObject)：该事件触发执行的函数
简单的bind()事件
<script type="text/javascript">
$(function(){
/*$("#test").bind("click",function(){
alert("世界会向那些有目标和远见的人让路！！");
});*/
/*
* js的事件绑定
ele.onclick=function(){};
* */
// 等同于上面的放方法
$("#test").click(function(){
alert("世界会向那些有目标和远见的人让路！！");
});
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
* */
$("#btntest").bind(‘click‘,function(){
// $(this).attr(‘disabled‘,true);
$(this).prop("disabled",true);
})
});
</script>
<body>
<h3>bind()方简单的绑定事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了" />
</body>
绑定多个事件
<script type="text/javascript">
$(function(){
// 绑定click 和 mouseout事件
/*$("h3").bind(‘click mouseout‘,function(){
console.log("绑多个事件");
});*/
// 链式编程
$("h3").bind(‘click‘,function(){
alert("链式编程1");
}).bind(‘mouseout‘,function(){
$("#slowDiv").show("slow");//让slowDiv显示
});
/*$("#test").click(function(){
console.log("点击鼠标了....");
}).mouseout(function () {
console.log("移出鼠标了...");
});*/
$("#test").bind({
click:function(){
alert("链式编程1");
},
mouseout:function(){
$("#slowDiv").show("slow");
}
});
});
</script>
<body>
<h3>bind()方法绑多个事件</h3>
<div id="test" style="cursor:pointer">点击查看名言</div>
<div id="slowDiv"style=" width:200px; height:200px; display:none; ">
人之所以能，是相信能
</div>
</body>