越来越少人用JQuery，但你就不学了吗？（4）

如需要跟多资料请点击下方图片⬇（扫码加好友→备注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.οnclick=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>