复习回顾之JQuery和Ajax

最新推荐文章于 2023-12-12 12:21:25 发布

小心二次元：）

最新推荐文章于 2023-12-12 12:21:25 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： jquery ajax

本文链接：https://blog.csdn.net/nicexiaohei/article/details/123947457

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、JQuery

1.什么是JQuery？

JQuery的目标就是为了简化JavaScript对DOM对象的操作，可以把JQuery理解为一个JavaScript的库。所以学习JQuery之前应该先把JavaScript学习完。

2.DOM对象和JQuery对象的是什么及其联系

1）dom对象

使用JavaScript的语法创建的对象叫做dom对象，也叫做js对象，就是html页面上的一些html标签。例如：

<script type="text/javascript">
    // 这里obj就是一个dom对象
    let obj = document.getElementById("btn");
</script>
<input type="button" id="btn" value="按钮">

2）JQuery对象

使用JQuery语法表示的对象叫JQuery对象（注：JQuery对象是一个数组）。

<script type="text/javascript" src="导入JQuery的所在路径"></script>
<script type="text/javascript">
    // 这里$obj就是一个jQuery对象
    let $obj = $("#btn")
</script>
<input type="button" id="btn" value="按钮">

3）dom对象和jQuery对象的联系

dom对象可以和jQuery对象互相转换

dom对象转jQuery对象：$(obj)

jQuery对象转dom对象：$obj.get(0)或者$obj[0]

3.JQuery中常用的选择器

1）id选择器

语法：$("#dom对象的id")，这是通过dom对象的id来定位dom对象

2）class选择器

语法：$(".dom对象的class")

3）标签选择器

语法：$("dom对象的标签名称")

4）组合选择器

语法：$("#dom对象的id，.dom对象的class，dom对象的标签名称")，即以上选择器可以组合使用，之间用逗号隔开

5）表单选择器

使用input标签的type属性值来定位dom对象，有没有form标签都可以使用。

语法：$("：input标签的type属性值")，例如：$("：button")，选择了所有type是button的input标签。

4.JQuery中的过滤器（必须配合选择器使用）

JQuery对象是一个数组，里面存放着dom对象，所有数组中每个dom对象的下标顺序和dom对象（标签）所声明的位置一一对应。即当你使用某些选择器选择到多个dom对象时，JQuery对象就是一个存储这些对象的数组，例如：let $obj = $("div")，此时$obj就是一个存放div对象的数组，下标从0开始，对应着最先声明的<div>标签。

1）保留数组中第一个DOM对象

语法：$("选择器:first")

2）保留数组中最后一个DOM对象

语法：$("选择器:last")

3）根据数组下标，保留指定DOM对象

语法：$("选择器:eq(数组下标)")

4）选择数组中小于指定下标的DOM对象（不包括指定下标的DOM对象）

语法：$("选择器:lt(数组下标)")

5）选择数组中大于指定下标的DOM对象（不包括指定下标的DOM对象）

语法：$("选择器:gt(数组下标)")

6）表单属性过滤器

根据表单中dom对象对应的状态情况，定位dom对象。状态常见的有：enabled、disabled、checked（用于radio单选和checkbox多选）、selected（注：此过滤器必须配合表单选择器使用）。例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        $(function (){
          $("#btn1").click(function (){
            alert($(":text:enabled").val())
          })
          $("#btn2").click(function (){
            alert($(":text:disabled").val())
          })
          $("#btn3").click(function (){
            alert($(":checkbox:checked").val())
          })
          $("#btn4").click(function (){
            alert($("select>option:selected").val())
          })
        })
    </script>
</head>
<body>
    <input type="text" value="我是enabled的text" enabled>
    <input type="text" value="我是disabled的text" disabled>
    </br>
    <input type="checkbox" value="游泳">游泳
    <input type="checkbox" value="跑步">跑步
    <input type="checkbox" value="骑自行车">骑自行车
    </br>
    <select>
      <option value="" selected></option>
      <option value="java">java</option>
      <option value="c++">c++</option>
      <option value="javaScript">javaScript</option>
    </select>
    </br>
    <input type="button" value="选enabled的text" id="btn1">
    <input type="button" value="选disabled的text" id="btn2">
    <input type="button" value="选被选中的多选框" id="btn3">
    <input type="button" value="选被下拉列表框中的" id="btn4">
</body>
</html>

5.JQuery中事件的绑定

JQuery中事件的绑定有两种方法

方法一：$(选择器).监听事件名称(处理函数)。

方法二：$(选择器).on("监听事件名称"，处理函数)。

监听事件名称就是js中的事件去掉on。例如：onclick事件的监听事件名称就是click。处理函数就是规定当事件发生时运行的函数。

6.JQuery中一些常用的函数

val():无参调用时，读取dom数组中的第一个dom对象的value属性。有参调用时，将dom数组中所有dom对象的value属性值修改为传入的参数。

text():相当于js中的innerText，无参调用时，读取dom数组中所有dom对象的文字显示内容，将得到的内容拼接成一个字符串返回。有参调用时，将dom数组中所有dom对象的文字显示内容值修改为传入的参数。

attr():用法一：attr("属性名")，获取DOM数组第一个对象的属性值。用法二：attr("属性名","值")，对DOM数组中所有的DOM对象的该属性值修改为传入的值。

remove()：将DOM数组中所有的DOM对象及其子对象删除。

empty()：将DOM数组中所有DOM对象的子对象删除。

append(参数)：为DOM数组中所有DOM对象添加子对象，参数是一个字符串，可以识别html标签。

each():each是对数组，json对象，和JQuery对象（dom数组）的遍历方法，对每个元素调用一次函数。用法一：$.each(要遍历的对象，function（index，element）{处理程序})。用法二：JQuery对象.each（function（index，element）{处理程序}）。其中index是遍历时的数组下标（遍历json对象时是key），element是遍历时的对象（遍历json对象时是value）。

二、Ajax

1.什么是Ajax？

Ajax全称：Asynchronous Javascript and XML。是用来做局部刷新的，我们需要创建一个对象，用来代替浏览器发起请求给服务器，该对象常用的是：XMLHttpRequest。

2.XMLHttpRequest对象的四个重要属性

1）onreadystatechange属性

一个js函数，每当XMLHttoRequest对象的readyState属性改变时，就会调用该函数。

2）readyState属性

存放XMLHttpRequest的状态，从0-4一共五种状态

① 0：请求未初始化，创建异步对象

② 1：初始化异步请求对象

③ 2：异步对象发送请求

④ 3：异步请求对象接受到响应数据

⑤ 4：异步请求对象已经将数据解析完毕（这个状态被使用）

3）status属性

表示网络请求状况

① 200：请求成功

② 404：未找到页面

③ 500：服务器端出错

4）responseText属性

表示从服务器端返回的数据

3.实现异步请求的步骤

1）创建异步请求对象（此时异步请求对象的readystatechange是0）

let xmlHttp = new XMLHttpRequest();

2）给异步对象绑定事件

xmlHttp.onreadystatechange = function() {
    // 处理请求的状态变化
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        // 说明异步请求成功
        // 获取异步请求返回的数据
        let data = xmlHttp.responseText;
        // 做处理...
    }
}

3）初始化异步请求对象（此时异步请求对象的readystatechange变化为1）

// 请求方式即get或者post，该参数是字符串
// url即请求地址，参数也是字符串
// 同步还是异步请求，参数是boolean类型值，异步为true，默认为true
xmlHttp.open(请求方式,url,同步还是异步请求);

4）使用异步对象发送请求（此时异步请求对象的readystatechange变化为2）

xmlHttp.send();

4.同步与异步请求区别

异步处理请求：不用等待数据处理完毕，仍然往下执行后续代码。同步处理请求：必须等请求从服务器获得响应后，才能执行后续代码。

5.JQuery封装的Ajax请求

JQuery将ajax请求进行了封装，方便程序员发送异步请求。有如下三个封装好的方法：

1）$.ajax()

使用方法，$.ajax()通过Json字符串的参数来规定一个ajax请求。格式为$.ajax({属性名：属性值，属性名：属性值，...})，具体的属性名有如下：

① async：布尔值类型参数，表示是否是异步请求，异步为true，默认为true。

②contentType：可选参数，类型为字符串，表示发送到服务器的数据所使用的内容类型，常用Json格式，如：application/json。

③data：字符串或者数组或者json对象类型参数，表示要发送到服务器的数据，常用json。

④dataType：可选参数，类型为字符串，期望从服务器响应的数据格式。有xml、html、text、json，常用也是json。

⑤error：类型是一个函数，表示请求失败要运行的函数。

⑥success（resp）：类型也是一个函数，表示请求成功后运行的函数，其中resp是自定义的形参名，就是JQuery处理之后的responseText。

⑦type：类型为字符串，表示该ajax的请求类型（get或者post）

⑧url：类型为字符串，表示请求的地址。

        $.ajax({
            async:true,
            contentType:'application/json',
            data:{'name':'张三','age':24},
            dataType:'json',
            error:function (){
                alert("请求失败！");
            },
            success:function (resp){
                alert("返回的数据为=="+resp);
            },
            type:'post',
            url:'/test'
        })