• jQuery_Ajax

    jQuery

    js库是一个封装好的特定的集合（方法和函数）。简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

    用jq要先引入jq。

    基本使用

    入口函数

    $(function(){});是页面DOM加载完成的入口。

    • 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jq帮我们完成了封装。
    • 相当于原生js中的DOMContentLoaded。
    • 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
    对象

    顶级对象：$是jQuery的别称，同时也是jQuery的顶级对象。

    DOM对象和jQuery对象

    用原生js获取来的对象就是DOM对象，jQuery方法获取的元素就是jQuery对象。jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

    DOM对象和jQuery对象之间是可以相互转换的，因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用就要进行转换。

    • DOM—>jQuery：$(DOM对象)
      • 例如：$('div')
    • jQuery—>DOM：
      • $('div')[index]：index是索引号
      • $('div').get(index)：index是索引号

    常用的API

    选择器

    $("选择器")：里面选择器直接写css选择器即可，但是要加双引号。

    子代选择器：$("ul>li")：使用>号，获取亲儿子层级的元素，ps：并不会获取孙子层级的元素。

    后代选择器：$("ul li")：使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等。

    遍历内部的元素（伪数组形式存储）的过程就叫做隐式迭代。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。方便我们调用。

    jQ筛选选择器：

    • $('li:first')：获取第一个li元素。
    • $('li:last')：获取最后一个li元素。
    • $("li:eq(index)")：获取到的li元素中，选择索引号为index的元素，index从0开始。
    • $("li:odd")：获取到的li元素中，选择索引号为奇数的元素。
    • $("li:even")：获取到的li元素中，选择索引号为偶数的元素。

    筛选方法：

    • parent()：返回的是最近一级的父级元素。（亲爸爸
    • children(selector)：子代选择器 ul>li
    • find(selector)：选里面所有的孩子，包括儿子和孙子，类似于后代选择器。
    • siblings(selector)：除了自身元素以外的亲兄弟。
    • nextAll([expr])：查找当前元素之后的兄弟元素。
    • prevtAll([expr])：查找当前元素之前的兄弟元素。
    • hasClass(class)：检查当前的元素是否含有某个特定的类，如果有就返回true。
    • eq(index)：选择第index个元素。（更推荐这个方法来选择

    jQ得到当前元素的索引号：$(this).index()

    样式操作

    jQ可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

    操作css方法：

    • 参数只写属性名，则是返回属性值。
    • 参数是属性名,属性值，属性必须加引号，值如果是数字可以不用跟单位和引号。
    • 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号。
      • $(this).css({width:200,height:200,background:"red"});
      • 如果是复合属性则必须采取驼峰命名法，如果值不是数字则需要加引号。

    设置类样式方法：

    • 添加类：$(this).addClass("className")
    • 删除类：$(this).removeClass("className")
    • 切换类：$(this).toggleClass("className")

    原生js中className会覆盖元素原来里面的类名，jQ里面类操作只是对指定类进行操作，不影响原先的类名。

    属性操作

    element.prop("属性名")：获取元素固有的属性值。

    element.prop("属性名","属性值")：修改元素的属性值。

    元素的自定义属性，我们通过attr()，修改后面加值就可以了。

    数据缓存data()这个里面的数据是存放在元素的内存里面，可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

    文本属性值

    html()：获取元素的内容。html("内容")：设置元素的内容。

    text()：获取元素的文本内容。

    val()：获取设置表单值。

    parent()：返回祖先元素，里面的参数是返回指定的祖先元素。

    .toFixed(数字)：保留几位小数。

    元素操作

    主要是遍历、创建、添加、删除元素操作。

    遍历元素：

    • $("div").each(function(index,domEle){})
      • each()遍历匹配的每一个元素，主要用dom处理
      • 里面的回调函数有两个参数：index是每个元素的索引号，可以自己指定索引号名称；domEle是每个dom元素对象，不是jq对象。
    • $.each(object,function(index,element){})
      • $.each()可用于遍历任何对象，主要用于数据处理，比如数组，对象。
      • 里面的函数有两个参数：index是元素的索引号；element是遍历内容。

    创建元素：

    • $("
    • ")：创建了一个li元素。
    • 添加元素：
      • 内部添加：element.append("内容") 把内容放入匹配元素内部最后面，类似原生的appendChild。element.prepend("内容") 是放在前面。
      • 外部添加：element.after("内容") 把内容放到目标元素的后面。element.before("内容") 是放在前面。
      • 内部添加元素，生成之后是父子关系。外部添加元素，生成之后是兄弟关系。
    • 删除元素：
      • element.remove()：删除匹配的元素（本身）
      • element.empty()：删除匹配的元素集合中所有的子节点
      • element.html("")：清空匹配的元素内容
    尺寸、位置操作

    尺寸：

    • width()/height()：只算width/height
    • innerwidth()/innerheight()：算width/height+padding
    • outerwidth()/outerheight()：算width/height+padding+border
    • outerwidth(true)/outerheight(true)：算width/height+padding+border+margin

    位置:

    • offset()：获取设置距离文档的位置（偏移），**跟父级没有关系。**可以设置偏移。
    • position()：获取距离带有定位父级位置（偏移）。如果没有带有定位的父级，则以文档为准。只能获取不能设置。

    事件

    绑定事件

    单个事件注册：$(this).事件(function(){})

    element.on(events,[selector],fn)方法在匹配元素上绑定一个或多个事件的事件处理函数。

    • events：一个或多个用空格分隔的事件类型。
    • selector：元素的子元素选择器。
    • fn：回调函数，即绑定在元素上的函数。

    on()可以事件委派操作。事件委派操作就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

    $('ul').on('click','li',function(){
    alert('hello');
})
//click是绑定在ul上的 但是点击li才会触发

    • 1
    • 2
    • 3
    • 4

    on()可以给动态创建的元素绑定事件。

    解绑事件

    off()：解除事件。

    • 没有参数就是解除所有事件。
    • 有参数就是解除该参数的事件。比如：click、mouseover。
    • $("ul").off("click","li")：解除事件委托。

    one()：只能触发事件一次。

    自动触发

    三种方式：

    • 元素.事件()：会触发元素的默认行为。
    • 元素.trigger(“事件”)：会触发元素的默认行为。
    • 元素.triggerHandler(“事件”)：不会触发元素的默认行为。

    Ajax

    JSON

    概述

    JSON是一种轻量级的数据交换格式，轻量级体现在JSON的体积小，虽然一个小的体积可能表示的数据很多。在js中，json是以对象的形式存在的。

    数据交换：各种语言之间交换数据。在现代的开发中，能够做数据交换的包括两个：JSON、XML，两个都是非常标准的数据交换格式。

    • XML体积大，解析难度大。
    • JSON体积小，解析更容易。
    • XML的语法严谨，JSON的语法相对松散。
    对象的创建和使用

    JSON是一种无类型的对象，直接一个大括号包起来就是一个JSON对象。

    JSON对象必须全部带上双引号。

    //语法格式：
var jsonObj = {
    "属性名": "属性值",
    "属性名": "属性值",
    "属性名": "属性值",
    ...
}
//ps：属性值可以是任意类型，也可以是JSON对象

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    使用的方法和js对象一样。

    交换数据

    Java和js两个语言怎么交换数据：Java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给js，然后在js当中把json格式的字符串转换成json对象，这样就可以从js对象中取数据了，这样就完成了数据的交换。

        <script>
        var fromJava = "{\"name\":\"zs\", \"age\":20}"; //这个不是json对象，是一个字符串
        //将json格式的字符串转换成json对象
        //eval函数可以将一个字符串当做一段js代码解释执行
        window.eval("var stu = " + fromJava); //这个可以将json格式的字符串转换成json对象
        //转换成json对象的目的是为了取数据（这样就完成了数据交换
        /*上面的代码执行结束就等同于这里创建了一个json对象：
        var stu = {
            "name": "zs",
            "age": "20"
        }*/
        console.log(stu.name + "," + stu.age);
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    解析json动态生成表格：

    <body>
    <script>
        // 从Java过来一个json格式的字符串
        var fromJava = "{\"total\" : 3, \"students\" : [{\"name\" : \"张三\", \"age\" : 20}, {\"name\" : \"李四\", \"age\" : 19}, {\"name\" : \"王强\", \"age\" : 25}]}";
        onload = function(){
            document.getElementById("btn").onclick = function(){
                //解析上面json格式的字符串，将解析出来的数据放到tbody里
                window.eval("var json = " + fromJava); //json对象
                //设置总记录条数
                document.getElementById("totalSpan").innerHTML = json.total;
                //拼接html
                var studentArray = json.students;
                var html = "";
                for(var i = 0; i < studentArray.length; i++){
                    var s = studentArray[i];
                    html += "";
                    html += "" + (i + 1) + "";
                    html += "" + s.name + "";
                    html += "" + s.age + "";
                    html += "";
                }
                //将上面拼接的html设置在tbody里面
                document.getElementById("stuTbody").innerHTML = html;
            }
        }
    </script>
    
    <input type="button" value="查看学生信息列表" id="btn">
    <hr>
    <table border="1px" width="40%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tbody id="stuTbody">
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>17</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王强</td>
                <td>25</td>
            </tr> -->
        </tbody>
    </table>
    总记录条数:<span id="totalSpan">0</span>条
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    正则表达式

    通常使用正则表达式进行字符串格式匹配。正则表达式是有一堆特殊的符号组成的一个表达式，每一个特殊的符号都有特殊的表达含义。

    在js中创建正则表达式：重点使用第一种

    • 直接量语法：var regExp = /正则表达式/标记
      • 标记是可选项，可写可不写，有以下值可选：
        • g：全局 global
        • i：忽略大小写 ignorecase
        • gi：全局扫描，并且忽略大小写
    • 使用内置类RegExp类：var regExp = new RegExp("正则表达式", "标记")
    表单验证

    获取元素的三种方式：（很重要很常见

    • getElementById("id名")：根据id获取一个元素。
    • getElementsByName("name名")：根据name属性获取多个元素。
    • getElementsByTagName("标签名")：根据标签获取多个元素。

    表单验证（很重要 多写几遍）

    <body>
    <script>
        /*
        1.用户名不能为空
        2.用户名在6-14位之间
        3.用户名只能数字和字母组成，不能含有其他符号（正则表达式）
        4.密码和确认密码一致
        5.统一失去焦点验证
        6.错误提示信息统一在span标签中提示，并且要求字体12号，红色
        7.文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
        8.最终表单中所有项均合法方可提交
        */

        onload = function(){
            //给id="username"的节点绑定blur事件
            var usernameElt = document.getElementById("username");
            var nameError = document.getElementById("nameError");
            //失去焦点
            usernameElt.onblur = function(){
                //获取用户名
                var username = usernameElt.value;
                //去除前后空白
                username = username.trim();
                //用户名不能为空,不能为空串
                if(username == ""){
                    nameError.innerHTML = "用户名不能为空";
                }else{
                    //用户名不为空 检测长度是否合法
                    if(username.length < 6 || username.length > 14){
                        nameError.innerHTML = "用户名在6-14位之间";
                    }else{
                        //用户名不为空，长度也合法 再检测是否有特殊符号
                        var regExp = /^[a-zA-Z0-9]+$/
                        var ok = regExp.test(username);
                        if(ok){
                            //合法
                            nameError.innerHTML = "";
                        }else{
                            //不合法
                            nameError.innerHTML = "用户名只能由字母和数字组成";
                        }
                    }
                }
            }
            //获得焦点:清空span信息
            usernameElt.onfocus = function(){
                nameError.innerHTML = "";
            }

            var passwordElt = document.getElementById("confirmpwd");
            var pwdError = document.getElementById("pwdError");
            //确让密码失去焦点就验证
            passwordElt.onblur = function(){
                //获取密码
                var userpwd = document.getElementById("userpwd").value;
                //获取确认密码
                var confirmpwd = document.getElementById("confirmpwd").value;
                //检测是否一致
                if(userpwd != confirmpwd){
                    pwdError.innerHTML = "密码和确认密码不一致";
                }else if(userpwd == "" && confirmpwd == ""){
                    pwdError.innerHTML = "密码不能为空";
                }else{
                    pwdError.innerHTML = "";
                }
            }
            //获得焦点：清空span里的信息
            passwordElt.onfocus = function(){
                pwdError.innerHTML = "";
            }

            document.getElementById("regbtn").onclick = function(){
                //验证用户名 怎么验证用户名？让用户名文本框失去焦点
                //重点：使用js代码怎么触发事件
                usernameElt.focus(); //触发文本框获取焦点事件
                usernameElt.blur(); //触发文本框失去焦点事件
                
                //验证密码 怎么验证密码？让文本框失去焦点
                passwordElt.focus(); //触发文本框获取焦点事件
                passwordElt.blur(); //触发文本框失去焦点事件
                
                //当所有span的内容都为空就表示表单合法
                if(nameError.innerHTML == "" && pwdError.innerHTML == ""){
                    //提交
                    var formObj = document.getElementById("userForm");
                    //调用submit()来完成表单的提交
                    formObj.submit();
                }
            }
        }
    </script>
    <form id="userForm" action="">
        用户名<input type="text" name="username" id="username"><span id="nameError"></span>
        <br>
        密码<input type="password" name="userpwd" id="userpwd">
        <br>
        <!-- 确认密码不需要提交给服务器 name不要写 -->
        确认密码<input type="password" id="confirmpwd"><span id="pwdError"></span>
        <br>
        <!-- 表单项目都合法才能提交 -->
        <!-- button不能提交表单，但是js代码可以提交表单 -->
        <input type="button" value="注册" id="regbtn">
    </form>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104

    全局刷新和局部刷新

    全局刷新：使用form、href等发起的请求是全局刷新。（用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面）缺点如下：

    • 传递数据量比较大，占用网络的带宽。
    • 浏览器需要重新的渲染整个页面。
    • 用户体验不是那么好。

    局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象。对视图部分刷新。特点如下：

    • 数据比较小，在网络中传输速度快。
    • 更新页面内容，是部分更新页面，浏览器不会全部渲染视图。
    • 在一个页面中，可以做多个局部刷新。
    • 从浏览器获取的是数据，拿到更新视图。

    异步请求对象

    在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。

    异步对象（XMLHttpRequest）是在浏览器内部的一种js对象，各大浏览器都能支持异步对象的使用。使用js语法创建和使用这个对象：var xhr = new XMLHttpRequest()，之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

    使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。局部刷新需要使用以下技术：

    • JavaScript：创建XMLHttpRequest对象，调用它的属性或者方法。
    • dom：处理dom，更新select的数据。
    • css：处理视图，更新，美化。
    • servlet：服务器端技术。
    • 数据格式：json（它之前是xml

    把上面这些技术的综合使用称为Ajax。

    Ajax

    Ajax是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法。它不是新的编程语言，是多种技术的综合使用，使用Ajax实现局部刷新。Ajax的核心是JavaScript和xml（json）：使用JavaScript操作异步对象XMLHttpRequest 和服务器交换使用json数据格式。

    异步对象的属性和方法

    创建异步对象，使用js的语法：var xhr = new XMLHttpRequest();

    方法：

    • open(请求方式,服务器端的访问地址,异步还是同步)
    • send()：使用异步对象发送请求

    属性：

    • readyState：请求的状态（请求的过程
      • 0：表示创建异步对象时，new XMLHttpRequest();
      • 1：表示初始异步对象的请求参数，执行open()方法。
      • 2：使用send()方法发送请求。
      • 3：使用异步对象从服务器接收了数据。
      • 4：异步对象接收了数据，并在异步对象内部处理完成后。
    • status：网络的状态，和Http的状态码对应。
      • 200：请求成功
      • 404：服务器资源没有找到
      • 500：服务器内部代码有错误
    • responseText：表示服务器端返回的数据
    使用步骤

    1）使用js创建异步对象：var xhr = new XMLHttpRequest();

    2）给异步对象绑定事件，事件名称是：onreadystatechange

    • 在绑定事件中做什么，根据readyState值做请求的处理。

      xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        //从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
        var data = xhr.responseText;
        //更新dom对象
        document.getElementById("#mydiv").innerHTML = data;
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

    3)初始请求的参数，执行open()函数

    4）发送请求，执行send()

    常用的函数
    $.ajax()

    $.ajax()是jq中Ajax请求的核心方法，所有的其他方法都是在内部使用此方法。语法：$.ajax({json格式的参数})，json格式的参数：key是定义好了的，需要开发人员给key赋值，这些key是用来表示ajax请求必须的参数。例如：请求的url地址、是不是异步请求、请求的方式等等。$.ajax()有以下参数：

    • url：服务器的地址，例如某个servlet的访问地址。
    • type：表示请求的方式：get、post。默认是get，这个值不区分大小写。
    • data：表示提交的请求参数，可以是string、数组、json类型的，推荐使用json格式。
      • json格式例如：data:{"name":"lisi","age":20}。jq在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。
    • dataType：数据格式，可以是html、text、xml、json等等，表示发起请求后，希望服务器端返回的数据格式。
      • jq可以尝试使用对应格式处理返回的数据，比如指定了dataType:json表示希望服务器返回的是json格式数据，jq就会把json数据转换成json对象。
      • 服务器代码可以得到dataType的内容。
    • success：函数function。当服务器端返回了数据，jq处理完数据后，执行这个函数。等同于异步对象的readyState == 4 && status = 200的情况。
      • 例如：success:function(resp){开发人员处理服务器返回的数据}。resp是自定义形参，相当于resp = xhr.responseText
    • error：函数function。当请求错误时，执行这个函数。
    • contentType：表示请求的参数数据格式，这个内容可以不写。例如：application/json。
    • async：是一个boolean，表示请求是同步（false）还是异步（true）的，默认是true。
    函数get和post

    $.get()这个函数就是执行get请求方式的ajax，语法：$.get(url,请求参数,success函数,dataType)

    $.post()执行post请求的ajax，语法：$.post(url,请求参数,success函数,dataType)

  • 相关阅读:
    国内食用油行业数据浅析
    麻了，这让人绝望的大事务提交
    【前端精进之路】JS篇：第5期 JS引擎线程的执行过程的三个阶段
    【STM32学习】I2C通信协议 | OLED屏
    ChatGPT 的原理简介
    2022年最新四川机动车签字授权人模拟试题及答案
    系统移植第5天作业
    汽车称重软件的秤台和车辆管理有哪些要求（二）
    10.19作业
    33、连接器(connector)
  • 原文地址：https://blog.csdn.net/triggerV/article/details/126444387