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