zoukankan      html  css  js  c++  java
  • jQuery——事件和AJAX

    因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。

    浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

    由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码。

    假设要在用户点击了超链接时弹出提示框,我们用jQuery这样绑定一个click事件:

    效果:

    on方法用来绑定一个事件,我们需要传入事件名称和对应的处理函数。

    另一种更简化的写法是直接调用click()方法:

    a.click(function () {
        alert('Hello!');
    });
    

    两者完全等价。我们通常用后面的写法。

    1、鼠标事件

    • click: 鼠标单击时触发;
    • dblclick:鼠标双击时触发;
    • mouseenter:鼠标进入时触发;
    • mouseleave:鼠标移出时触发;
    • mousemove:鼠标在DOM内部移动时触发;
    • hover:鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
        <style>
            #divMove{
                 500px;
                height: 500px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
    
    <!--要求:获取鼠标当前的一个坐标-->
    mouse :<span id="mouseMove"></span>
    <div id="divMove">
    在这里移动鼠标试试
    </div>
    
    <script>
        //当网页元素加载完毕之后,响应事件
        $(function () {
            $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
            })
        });
    </script>
    
    
    </body>
    </html>
    

    2、键盘事件

    键盘事件仅作用在当前焦点的DOM上,通常是<input><textarea>

    • keydown:键盘按下时触发;
    • keyup:键盘松开时触发;
    • keypress:按一次键后触发。

    3、其他事件

    • focus:当DOM获得焦点时触发;
    • blur:当DOM失去焦点时触发;
    • change:当<input><select><textarea>的内容改变时触发;
    • submit:当<form>提交时触发;
    • ready:当页面被载入并且DOM树完成初始化后触发。

    4、AJAX

    用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。

    用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。

    jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下:

    • async:是否异步执行AJAX请求,默认为true,千万不要指定为false

    • method:发送的Method,缺省为'GET',可指定为'POST''PUT'等;

    • contentType:发送POST请求的格式,默认值为'application/x-www-form-urlencoded; charset=UTF-8',也可以指定为text/plainapplication/json

    • data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType把data序列化成合适的格式;

    • headers:发送的额外的HTTP头,必须是一个object;

    • dataType:接收的数据格式,可以指定为'html''xml''json''text'等,缺省情况下根据响应的Content-Type猜测。

    • jQuey 封装好的 方法 $(”#name“).ajax(“”)

  • 相关阅读:
    vuejs开发环境搭建
    贝塞尔曲线(cubic bezier)
    解决安装mysql的”A Windows service with the name MySQL already exists.“问题
    display:inline-block的间隙问题和解决办法
    限制两行显示,超出部分省略号
    border-radius四个值的问题
    PHP环境搭建
    CSS3属性box-sizing
    -webkit-tap-highlight-color
    gdb命令
  • 原文地址:https://www.cnblogs.com/godles/p/12200450.html
Copyright © 2011-2022 走看看