What are jquery event processing -- Le byte front end

Keywords: Javascript JSON JQuery Programming

Jquery events

ready load event

ready() is similar to the onLoad() event

ready() can write multiple and execute in order

$(document).ready(function() {}) is equivalent to $(function() {})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ready event</title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            // Trigger the ready method when the document is loaded
            $(document).ready(function(){
                $("div").html("ready go...");
            })
            // $(document).ready(function(){}) == $(function(){}) 
            $(function(){
                $("p").click( function () {
                    $(this).hide(); 
                });
            });
            $(function(){
                $("#btntest").bind("click",function(){
                    $("div").html("Chop it...");
                });
            });
        </script>
    </head>
    <body>
        <h3>Triggered on page load ready()event</h3>
        <div></div>
        <input id="btntest" type="button" value="Chop hands" />
        <p>aaa</p>
        <p>bbbb</p>
        <p>ccc</p>
        <p>dddd</p>
    </body>
</html>

bind() bind event

Add one or more event handlers to the selected element and specify the functions to run when the event occurs.

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

eventType: an event type of string type, which is the event you need to bind.

These types can include the following:

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]: parameter passed, format: {Name: value, Name2: Value2}

handler(eventObject): the function triggered by the event

Simple bind() event

<script type="text/javascript">
    $(function(){
        /*$("#test").bind("click",function(){
            alert("The world will give way to those who have goals and vision!! "";
        });*/
        /*
         * js Event binding for
            ele.onclick=function(){};
         * */
        // Equivalent to the above placement method
        $("#test").click(function(){
            alert("The world will give way to those who have goals and vision!!");
        });
        /*
         1.Determine which elements to bind events for
            Get element
         2.What event to bind (event type)
            First parameter: type of event
         3.Action triggered by corresponding event
            Second argument: function
         * */
        $("#btntest").bind('click',function(){
            // $(this).attr('disabled',true);
            $(this).prop("disabled",true);
        })
    });
    </script>
<body>
    <h3>bind()Simple binding event</h3>
    <div id="test" style="cursor:pointer">Click to view famous quotes</div>
    <input id="btntest" type="button" value="Click to make it unavailable" />
</body>

Bind multiple events

<script type="text/javascript">
    $(function(){
        // Binding click and mouseout events
        /*$("h3").bind('click mouseout',function(){
            console.log("Bind multiple events');
        });*/
        // Chain programming
        $("h3").bind('click',function(){
            alert("Chain programming 1");
        }).bind('mouseout',function(){
            $("#slowDiv").show("slow "); / / let slowDiv display
        });
        /*$("#test").click(function(){
            console.log("Click the mouse... ");
        }).mouseout(function () {
            console.log("Removed the mouse... ");
        });*/
        $("#test").bind({
            click:function(){
                alert("Chain programming 1");
            },
            mouseout:function(){
                $("#slowDiv").show("slow");
            }
        });
    });
</script>
<body>
    <h3>bind()Method to bind multiple events</h3>
    <div id="test" style="cursor:pointer">Click to view famous quotes</div>
    <div id="slowDiv"style=" width:200px; height:200px; display:none; ">
        //The reason why people can is to believe in can
    </div>
</body>

Jquery Ajax

$.ajax

jquery calls the ajax method:

Format: $. ajax({});

Parameters:

type: request method GET/POST

url: request address url

async: asynchronous or not. true by default indicates asynchronous

Data: data sent to the server

dataType: the type of data expected from the server

contentType: set request header

success: call this function when the request is successful

error: call this function when the request fails

get request

$.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 request

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

This is a simple GET request function to replace complex $. ajax.

The callback function can be called when the request is successful. If you need to execute a function in the event of an error, use $. ajax.

// 1. Request json file and ignore the return value
$.get('js/cuisine_area.json');

// 2. Request json file, pass parameter, ignore return value
$.get('js/cuisine_area.json',{name:"tom",age:100});

// 3. Request the json file and get the return value. After the request is successful, you can get the return value
$.get('js/cuisine_area.json',function(data){
    console.log(data);
});

// 4. Request the json file, pass the parameters, and get the return value    
$.get('js/cuisine_area.json',{name:"tom",age:100},function(data){
    console.log(data);
});

$.post

This is a simple POST request function to replace complex $. ajax.