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

时间 2020-07-14

标签愈来愈少 jquery 学了栏目 JQuery 繁體版

原文原文链接

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

Jquery事件

ready加载事件

ready()相似于 onLoad()事件html

ready()能够写多个，按顺序执行java

$(document).ready(function(){})等价于$(function(){})jquery

<!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 ：是一个字符串类型的事件类型，就是你所须要绑定的事件。ide

这类类型能够包括以下：函数

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclickthis

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter.net

mouseleave,change, select, submit, keydown, keypress, keyup, error code

[, 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>