2. 技术
    3. 越来越少人用JQuery，但你就不学了吗？（4）

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

    技术2025-12-04  24

    如需要跟多资料请点击下方图片⬇（扫码加好友→备注66）

    Jquery事件

    ready加载事件

    ​ ready()类似于 onLoad()事件

    ​ ready()可以写多个，按顺序执行

    ​ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 等 价 于 (document).ready(function(){})等价于 (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>
    Processed: 0.027, SQL: 9