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

最新推荐文章于 2023-05-28 17:07:28 发布

axbhealj

最新推荐文章于 2023-05-28 17:07:28 发布

阅读量617

点赞数

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

本文链接：https://blog.youkuaiyun.com/axbhealj/article/details/129569065

版权

前端专栏收录该内容

9 篇文章

订阅专栏

一、DOM

1.1 追加元素

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

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

prepend 追加,元素内部前面追加

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

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 过滤


    <!-- 筛选 -->
    <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请求失败执行的回调函数
        
    }

});