愈來愈少人用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。