jqueryイベント処理にどのようなものがあるか--楽バイトフロントエンド

Jqueryイベント
readyロードイベント
ready()onLoad()イベントに類似
ready()は複数書き込み可能で、順番に実行できます
​ $(document).ready(function(){})は$(function(){})に等しい

    
        
        
        
        
            //         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("  ...");
                });
            });
        
    
    
        
       ready()  
        

        
        
aaa
        
bbbb
        
ccc
        
dddd
    

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()イベント

    $(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);
        })
    });
    

    
bind()        
    
      
    

複数のイベントをバインド

    $(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");
            }
        });
    });


    
bind()       
    
      
    

             ，    
    

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("
");
        for(var i=0; i");
                $('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("
");
        for(var i=0; i");
            $('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  
});