jquery事件处理有哪些--乐字节前端

bigegpt 2024-10-24 09:03 87 浏览

ready加载事件

? ready()类似于 onLoad()事件
? ready()可以写多个，按顺序执行
?

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

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

<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格式
});

jquery鼠标移入移出

上一篇：选择郑州Web前端学习课程需要付出更多的精力
下一篇：开发者必看:火狐Firefox 34新特性一览

jquery事件处理有哪些--乐字节前端

ready加载事件

bind()绑定事件

简单的bind()事件

绑定多个事件

Jquery Ajax

$.ajax

$.get

$.post

$.getJSON

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

Ceph运维手册(基于P版本)

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程