JQuery实战：DOM操作和Ajax请求（跨域请求）

DOM操作（Jquery）:

1、DOM操作插入：
（1）函数方法

方法	作用说明
`.append` `.appendTo`	当前元素有子元素则在子元素末尾插入，无子元素则在当前元素后面插入；两个方法作用相同，只是使用方法不同
`.prepend()` `.prepednTo()`	在元素内部头部插入，两个方法作用相同,用办法不同
`.after()` `.insertAfter()`	在元素之后插入,两个方法作用相同，只是使用方法不同
`.before()` `.insertBefore()`	在元素之前插入，两个方法作用相同，只是使用方法不同

2.元素的删除操作

方法	作用说明
`.remove()`	移除元素本身
`.empty()`	移除元素本身的内容（包含里面的html内容）

3.替换元素

方法	作用说明
`new.replaceAll(old)`	替换元素内所有匹配的
`old.replaceWith(new)`	用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

4.实操演练
（1）代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jquery操作和请求</title>
        <script src="jquery.js"></script>
        <style>
            ul:first-of-type{
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>item1</li>
            <li class="shuang">item2</li>
            <li>item3</li>
            <li class="shuang">item4</li>
            <li class="dan">item5</li>
        </ul>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </body>
    <script>
        let cl=console.log;
        cl($);
        // appendTo和append作用相同：在元素内部末尾(或者元素后面)插入，用法不同而已
        $("ul:first-child").append("<li>item6</li>");
        $("<li>item7</li>").appendTo($("ul:first-child"));
        $("ul:first-child > li:nth-child(3)").append("<li>item</li>");
        //在元素内部头部插入，两个方法作用相同知识用办法不同，
        $("ul:first-child").prepend("<li>item0</li>");
        $("<li>item-1</li>").prependTo($("ul:first-child"));
        // after()和before()
        $("ul:first-child").after("<h2>结束</h2>");
        $("ul:first-child").before("<h1>开始</h1>");
        // cl($("ul:last-of-type"));
        $("<h2>second<h2>").insertAfter($("ul:last-of-type"));
        $("<h2>one<h2>").insertBefore($("ul:last-of-type"));
        cl($("ul:last-of-type").text());
        cl($("ul:last-of-type > li:last-of-type").text());
        // cl($("ul:nth-child(1)"));
        // .remove();
        $("li:last-of-type").remove();
        $("ul:last-of-type > li:nth-of-type(1)").empty();
        $("ul:last-of-type").empty();
        $("ul:last-of-type").remove();
        cl($(".shuang"));
        // 两个函数作用相同知识用法不同
        $("<li>$$$$$$$$</li>").replaceAll($(".shuang"))
        $(".dan").replaceWith($("<li>22222</li>"));
    </script>
</html>

Jquery请求和跨域请求

1.GET和POST请求：

$.get(url,callback());GET请求
$.post(url,data,callback());POST请求

2.ajax请求

    $.ajax({
        type:"GET",
        url:"url",
        data:{
            id:2,
        },
        dataType:"json|html",
        //告诉跨域访问的服务器需要返回的函数名称
        //dataType:"jsonp",
        //jsonpCallback: "show",
        success:function(){……}
    })

DOM操作（Jquery）:

Jquery请求和跨域请求

相关文章