JQuery实战：DOM操作和Ajax请求（跨域请求） - JS学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > JQuery实战：DOM操作和Ajax请求（跨域请求）

博主信息

博文 145

粉丝 7

访问量 202176

专题推荐

更多>

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(){……}
    })