jquery事件處理有哪些--樂字節前端

時間 2020-06-29

原文原文鏈接

Jquery事件

ready加載事件

ready()相似於 onLoad()事件javascript

ready()能夠寫多個，按順序執行html

$(document).ready(function(){})等價於$(function(){})java

<!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()綁定事件

爲被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數。jquery

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是一個字符串類型的事件類型，就是你所須要綁定的事件。ajax

這類類型能夠包括以下：編程

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

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter服務器

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

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

Jquery Ajax

$.ajax

jquery調用ajax方法：

格式：$.ajax({});

參數：

type：請求方式GET/POST

url：請求地址url

async：是否異步，默認是true表示異步

data：發送到服務器的數據

dataType：預期服務器返回的數據類型

contentType：設置請求頭

success：請求成功時調用此函數

error：請求失敗時調用此函數

get請求

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
                $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post請求

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.json",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

$.get

這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。

請求成功時可調用回調函數。若是須要在出錯時執行函數，請使用 $.ajax。

// 1.請求json文件，忽略返回值
$.get('js/cuisine_area.json');

// 2.請求json文件，傳遞參數，忽略返回值
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.請求json文件,拿到返回值,請求成功後可拿到返回值
$.get('js/cuisine_area.json',function(data){
    console.log(data);
});

// 4.請求json文件,傳遞參數,拿到返回值    
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

$.post

這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。

請求成功時可調用回調函數。若是須要在出錯時執行函數，請使用 $.ajax。

// 1.請求json文件，忽略返回值
$.post('../js/cuisine_area.json');

// 2.請求json文件，傳遞參數，忽略返回值
$.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.請求json文件,拿到返回值,請求成功後可拿到返回值
$.post('js/cuisine_area.json',function(data){
    console.log(data);
});

// 4.請求json文件,傳遞參數,拿到返回值    
$.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

$.getJSON

表示請求返回的數據類型是JSON格式的ajax請求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data); // 要求返回的數據格式是JSON格式
});

相關標籤/搜索

每日一句

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