JQuery中的DOM、查找、过滤、浅了解一下ajax

迷南。 2024-03-25 05:26 200阅读 0赞

## 一、DOM ##

### **1.1 追加元素** ###

**内部追加**,追加的元素变成子元素

*  append 追加,元素内部后面追加

*  **pre**pend 追加,元素内部前面追加

**外部追加**,追加的元素变成了兄弟元素

*  after 追加,元素外部后面追加

*  before 追加,元素外部前面追加

<div id="box" style="width: 200px;height: 200px;border: 2px red solid;">
            <div id="innerbox" style="background-color: skyblue;width: 50px;height: 50px;">
            </div>
        </div>
        <button id="btn1">内部 后面 追加</button>
        <button id="btn2">内部 前面 追加</button><br>
        <button id="btn3">外部 后面 追加</button>
        <button id="btn4">外部 前面 追加</button><br><br>
    
        <script src="../JS/jquery-2.1.0.js"></script>
        <script>
            // 内部后面追加
            $("#btn1").click(() => {
                $("#box").append("<div style='background-color: aqua;width: 50px;height: 50px;'></div > ");
            })
            // 内部前面追加
            $("#btn2").click(() => {
                $("#box").prepend("<div style='background-color: lightgreen;width: 50px;height: 50px;'></div > ");
            })
            // 外部后面追加
            $("#btn3").click(() => {
                $("#box").after("<div id='outbox' style='background-color: yellow;width: 50px;height: 50px;'></div > ");
            })
            // 外部前面追加
            $("#btn4").click(() => {
                $("#box").before("<div  id='outbox' style='background-color: red;width: 50px;height: 50px;'></div > ");
            })
    </script>

### **1.2 删除元素** ###

删除元素

*  empty() **删除子元素及内容**,**保留自己**

*  remove() 删除**全部**元素,**包括自己**

*  remove(选择器) **删除指定选择器选到的元素**

<button id="btn5">删除元素 - empty</button>
        <button id="btn6">删除元素 - remove</button><br>
        <button id="btn7">删除元素 - remove(选择器)</button><br>
    
    <script src="../JS/jquery-2.1.0.js"></script>
        <script>
    // 删除所有内部元素（删除子元素，保留自己）
            $("#btn5").click(() => {
                $("#box").empty();
            })
            // 删除所有内部元素 包括自己
            $("#btn6").click(() => {
                $("#box").remove();
            })
            // 通过选择器选到 多个 元素后才可以用
            // 然后使用remove指定选择器，删除指定元素
            $("#btn7").click(() => {
                $("div").remove("#outbox");
            })
        </script>

## 二、JQuery筛选查找 ##

### **2.1 过滤** ###

![943123fdb7dc22430612d68e182d2795.png][]

<p>第1段</p>
        <p>第2段</p>
        <p id="p3">第3段</p>
        <p>第4段</p>
        <p>第5段</p>
        <button id="btn1">first</button>
        <button id="btn2">last</button>
        <button id="btn3">eq</button>
        <button id="btn4">not</button> 
        <button id="btn5">filter</button>
        <script src="../JS/jquery-2.1.0.js"></script>
        <script>
            $("#btn1").click(() => {
                $("p").first().css("color", "blue");
            })
            $("#btn2").click(() => {
                $("p").last().css("color", "red");
            })
            $("#btn3").click(() => {
                // 获得指定下标（从0开始）
                $("p").eq(1).css("color", "yellow");
            })
            $("#btn4").click(() => {
                // 除了某些(传的参数是jq对象)
                $("p").not($("#p3")).css("color", "pink");
            })
            $("#btn5").click(() => {
                // 只选择某些(传的参数是选择器)
                $("p").filter("#p3").css("color", "pink");
            })
        </script>
        <br>

### **2.2 查找** ###

查找祖先

*  parent() 直接父级

*  parents() 查找所有祖先,包括到html根标签

*  parentsUntil(元素) 返回所有父级,直到指定元素停止

查找后代

*  children() 返回直接后代(子)

*  find(选择器) 返回所有后代,再根据指定选择器过滤

查找兄弟

*  siblings() 所有兄弟

*  next() 下一个兄弟

*  prev() 上一个兄弟

<div id="box1" style="width: 400px;height: 400px;border: 2px solid red;">
            <div id="box2" style="width: 300px;height: 300px;border: 2px solid rgb(89, 0, 255);">
                <div id="box3" style="width: 50px;height: 50px;border: 2px solid rgb(0, 255, 55);"> 3</div>
                <div id="box4" style="width: 50px;height: 50px;border: 2px solid rgb(0, 255, 55);"> 4</div>
                <div id="box5" style="width: 50px;height: 50px;border: 2px solid rgb(0, 255, 55);"> 5</div>
                <div id="box6" style="width: 50px;height: 50px;border: 2px solid rgb(0, 255, 55);"> 6</div>
                <div id="box7" style="width: 50px;height: 50px;border: 2px solid rgb(0, 255, 55);"> 7</div>
            </div>
        </div>
        <button id="btn-1">查找父级</button>
        <button id="btn-2">查找所有祖先</button>
        <button id="btn-3">查找所有祖先直到</button>
        <br>
        <button id="btn-4">查找直接后代</button>
        <button id="btn-5">查找所有后代</button>
        <br>
        <button id="btn-6">查找所有兄弟</button>
        <button id="btn-7">查找上一个兄弟</button>
        <button id="btn-8">查找下一个兄弟</button>
        <script>
            // 直接父级
            $("#btn-1").click(() => {
                $("#box4").parent().css("background-color", "pink");
            })
            // 查找所有祖先,直到html根标签
            $("#btn-2").click(() => {
                $("#box4").parents().css("background-color", "pink");
                console.log($("#box4").parents())
            })
            $("#btn-3").click(() => {
                // 获得所有祖先，直到指定的元素停止（不包含指定元素）
                $("#box4").parentsUntil("body").css("background-color", "pink");
                console.log($("#box4").parentsUntil("body"));
            })
    
            $("#btn-4").click(() => {
                // 获得子集，没有获得孙子集
                $("#box1").children().css("border", "9px solid black");
            })
            $("#btn-5").click(() => {
                // 获得所有后代，后再通过find指定的选择器过滤剩下的
                $("#box1").find("*").css("border", "10px solid black");
            })
    
            $("#btn-6").click(() => {
                // 获得所有兄弟()
                $("#box5").siblings().css("background-color", "skyblue");
            })
            $("#btn-7").click(() => {
                // 获得上一个兄弟()
                $("#box5").prev().css("background-color", "blue");
            })
            $("#btn-8").click(() => {
                // 获得下一个兄弟()
                $("#box5").next().css("background-color", "red");
            })
        </script>

## 三、Ajax ##

ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)

*  异步,页面中科院同时进行多个事情

*  经典案例: 注册框,输入完用户名直接提示"已注册"

*  这就是异步,也就是局部刷新

使用**ajax**与服务器进行**异步交互**,向服务器发送数据,接收服务器发来的数据

### **3.2 $.get** ###

get请求一般用来从服务器获得数据,一般就是用来查询数据

// $.get() 可以向服务器发送一个get请求

// $.get(url, \[data\], \[callback\], \[type\])

// url是服务器路径,必填

// data,是向服务器发送的数据,可选

// callback,请求完成后的**回调函数**,可选

// type,返回内容类型,可选

<body>
        <button id="btn">$.get --> go</button>
        <table border="2" id="tb-users">
          <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>分数</td>
            <td>班号</td>
            <td>生日</td>
            <td>组号</td>
          </tr>
        </table>
        <script src="./js/jquery-2.1.0.js"></script>
        <script>
          $("#btn").click(function () {
            // 发送ajax的get请求
            // 回调函数是,请求完成后执行的函数
            // 回调函数中,设置一个参数,参数就是服务器返回的数据
       $.get("https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users",
              function (ret) {
                alert("发送请求成功!");
                console.log(ret);
                if (ret.status == 200) {
                  var dataArr = ret.data;
                  for (var i = 0; i < dataArr.length; i++) {
                    var user = dataArr[i];
                    $("#tb-users").append("<tr>"+
                        "<td>"+user.sid+"</td>"+
                        "<td>"+user.sname+"</td>"+
                        "<td>"+user.score+"</td>"+
                        "<td>"+user.cid+"</td>"+
                        "<td>"+user.sbirthday+"</td>"+
                        "<td>"+user.zid+"</td>"+
                        "</tr>")
                  }
                }
              }
            );
          });
        </script>
      </body>
    </html>

### **4.3 $.post** ###

post一般是**向服务器发送数据的**,一般是用来添加

### **4.4 $.ajax** ###

**$.ajax (json)**向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数

$.ajax({
        url:"",   // 服务器路径
        type:"",  // 请求方式,默认是get
        data:"",  // 向服务器发送的数据
        success:function(ret){  // 成功的回调函数,参数就是服务器返回的数据
            
        },
        error:function(){ // ajax请求失败执行的回调函数
            
        }
    
    });

[943123fdb7dc22430612d68e182d2795.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/322a403a729f480fa2b1d597b4ddb1fc.png