越来越少人用JQuery但你就不学了吗4

1次阅读

共计 2318 个字符，预计需要花费 6 分钟才能阅读完成。

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

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>

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(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)：该事件触发执行的函数

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

正文完