三、jQuery 中的 DOM 操作（超详细）

最新推荐文章于 2024-06-15 11:46:27 发布

2301_76232361

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量1k

点赞数 20

分类专栏：程序员文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/2301_76232361/article/details/138935541

版权

程序员专栏收录该内容

269 篇文章 1 订阅

订阅专栏

*   [13.3、元素定位](about:blank#133_1071)

总结

前言

=====================================================================

本文将学习 jQuery 中的 DOM 操作。

请添加图片描述

一、 DOM 介绍

============================================================================

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树：

在这里插入图片描述

二、查找节点

==========================================================================

使用 jQuery 在文档树上查找节点非常容易，我们可以通过上一篇中的jQuery 选择器来完成。

2.1查找元素节点


var $li = $("ol li:eq(0)"); //获取<ol>里第一个<li>节点

var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容

alert(li_txt); //打印文本内容

2.2查找属性节点

利用 jQuery 选择器查找到需要的元素之后，就可以使用 attr() 方法来获取它的各种属性的值。attr() 方法的参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字，比如：


var $para = $("p"); //获取<p>节点

var p_txt = $para.attr("title"); //获取<p>元素节点属性title

alert(p_txt); //打印title属性值

注：下面属性操作的部分会具体讲解 attr()方法。

三、创建节点

==========================================================================

3.1、创建元素节点

创建元素节点可以用 $(html) 函数。$(html) 方法会根据传入的 HTML 标记字符串，创建一个 DOM 对象，并将这个 DOM 对象包装成一个 jQuery 对象后返回。首先创建一个 li 元素如下所示：


var $li = $("<li></li>"); //创建一个<li>元素

当然上面只是创建出来了，要使用的话，还需要使用 append() 等方法将该元素插入文档中（下面会讲插入节点）。

3.2、创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用 append() 等方法将它们添加到文档中就可以了，例如：


var $li = $("<li>xnm</li>"); //创建一个<li>元素,包括元素节点和文本节点，“xnm”就是创建的文本节点

3.3、创建属性节点

创建属性节点和创建文本节点类似，也是直接在创建元素节点时一起创建，比如：


var $li = $("<li title='xnm'>xnm</li>"); //创建一个<li>元素,包括元素节点和文本节点和属性节点，“syl”就是创建的文本节点,title='xnm' 就是创建的属性节点

示例：将新建的 li 元素插入到 ul 中


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li>white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        var li_obj = $("<li>黄色</li>");

        $("ul").append(li_obj);

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

四、插入节点

=========================================================================

4.1 DOM 插入现有元素内:

.append() 在每个匹配元素里面的末尾处插入参数内容。
.appendTo() 将匹配的元素插入到目标元素的最后面。
.html() 获取集合中第一个匹配元素的 HTML 内容设置每一个匹配元素的 html 内容。
.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo() 将所有元素插入到目标前面（元素内）。
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

4.2 DOM 插入现有元素外:

`.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before() 根据参数设定，在匹配元素的前面插入内容。
.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

注：这些插入节点的方法不仅能将新创建的 DOM 元素插入到文档中，也能对原有的 DOM 元素进行移动。

插入节点示例：将新建的 li 元素插入到 ul 中


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li>white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        $("<li>yellow</li>").appendTo("ul");

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

移动节点示例：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li>white</li>

      <li>red</li>

      <h1>I like</h1>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        var $li = $("ul li:eq(1)"); //获取<ul>节点中的第2个<li>元素节点

        var $h1 = $("h1"); //获取<h1>节点

        $h1.insertBefore($li); //移动节点

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

想要查看更多关于插入节点的实例，可以访问 jQuery 中文官网 DOM 插入现有元素内和 jQuery 中文官网 DOM 插入现有元素外

五、删除节点

=========================================================================

如果文档中某一个元素多余，那么我们可以使用 jQuery 中的 remove(),detach() 和empty() 方法删除节点。

5.1 detach() 方法

从 DOM 中去掉所有匹配的元素。.detach() 方法和.remove()一样, 除了 .detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li title="syl">white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        $("ul li").click(function () {

          alert($(this).html());

        });

        var $li = $("ul li:eq(1)").detach(); //删除元素

         //重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效

         //$li.appendTo("ul");

      });

    </script>

  </body>

</html>

请添加图片描述

5.2 empty() 方法

从 DOM 中移除集合中匹配元素的所有子节点。这个方法不接受任何参数。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li title="xnm">white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        $("ul li:eq(1)").empty(); //获取第二个<li>元素节点后,清除此元素里的内容,注意是元素里

      });

    </script>

  </body>

</html>

请添加图片描述

注：如果你想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），请使用 .detach()。

5.3 remove() 方法

将匹配元素集合从 DOM 中删除。（注：同时移除元素上的事件及 jQuery 数据。）和 .empty() 相似。.remove() 将元素移出 DOM。当我们想将元素自身移除时我们用 .remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的 jQuery 数据。在要删除元素同时保留数据和事件的情况下，使用.detach()来代替。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li>white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        var $li = $("ul li:eq(1)").remove(); //获取<ul>节点中的第2个<li>元素节点后,将它从网页中删除

        $li.appendTo("ul"); //把刚才删除的节点又重新添加到 <ul> 元素里



        //可以直接使用 appendTo() 方法来简化上面的代码

        //appendTo() 方法也可以用来移动元素,移动元素时首先将文档上删除此元素,然后讲该元素插入得到文档中的指定节点

        //$("ul li:eq(1)").appendTo("ul");

      });

    </script>

  </body>

</html>

请添加图片描述

从运行效果来看也验证了我们所说的元素用 remove() 方法删除后，还是可以继续使用的。

另外 remove() 方法也可以通过传递参数来选择性的删除元素。比如：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <ul>

      <li>blue</li>

      <li title="xnm">white</li>

      <li>red</li>

    </ul>

    <script type="text/javascript">

      $(document).ready(function () {

        $("ul li").remove("li[title!=xnm]"); //将<li>元素中属性title不等于'xnm'的<li>元素删除

      });

    </script>

  </body>

</html>

想要了解更多关于删除节点的例子，可以访问 jQuery 中文官网 DOM 移除。

六、复制节点

=========================================================================

复制节点可以通过 clone() 方法来实现，当 clone()中传递了参数 true 时，代表复制元素的同时复制其所绑定的元素。

示例：点击 li 元素即可复制其本身到 ul 中


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    </head>

<body>

<ul>

    <li>blue</li>

    <li title="xnm">white</li>

    <li>red</li>

</ul>

<script type="text/javascript">

    $(document).ready(function () {

        $("ul li").on("click", function () {

            $(this).clone(true).appendTo("ul");

        });

    });

</script>

</body>

</html>

运行效果为：请添加图片描述

想要了解更多关于复制节点的操作，可以访问 jQuery 中文官网复制元素。

七、替换节点

==========================================================================

.replaceAll() 用集合的匹配元素替换每个目标元素。
.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

注：.replaceAll() 和 .replaceWith() 功能一样，但是目标和源相反。

示例：替换 p 元素


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <p>小丫么小牛马</p>

    <script type="text/javascript">

      $(document).ready(function () {

        $("p").replaceWith("<p>橘猫烧鲷鱼</p>");

        //注释代码与上面的代码作用一样

        // $("<p>橘猫烧鲷鱼</p>").replaceAll("p");

      });

    </script>

  </body>

</html>

想要了解更多关于替换节点的例子，可以访问 jQuery 中文官网 DOM 替换。

八、包裹节点

==========================================================================

8.1 、wrap() 方法

每个匹配的元素外层包上一个 html 元素。.wrap() 函数可以接受任何字符串或对象，可以传递给 $() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法

例子：

用一个有边框的 DIV 将 P 元素包裹起来


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <p>小丫么小牛马</p>

    <p>小丫么小牛马</p>

    <script type="text/javascript">

      $(document).ready(function () {

        $("p").wrap("<div style='border:1px red solid;'></div>");

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

8.2、wrapAll() 方法

在所有匹配元素外面包一层 HTML 结构。.wrapAll() 函数可以接受任何字符串或对象，可以传递给 $() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

注：该元素会将所有匹配的元素用一个元素来包裹，它不同于 wrap() 方法，wrap() 方法是将所有的元素进行单独的包裹。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <p>小丫么小牛马</p>

    <p>小丫么小牛马</p>

    <script type="text/javascript">

      $(document).ready(function () {

        $("p").wrapAll("<div style='border:1px red solid;'></div>");

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

8.3、wrapInner() 方法

在匹配元素里的内容外包一层结构。.wrapInner() 函数可以接受任何字符串或对象，可以传递给 $()工厂函数来指定一个 DOM 结构。这种结构可以嵌套多层，但是最内层只能有一个元素。每个匹配元素的内容都会被这种结构包裹。wrapInner() 方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <p>小丫么小牛马</p>

    <p>小丫么小牛马</p>

    <script type="text/javascript">

      $(document).ready(function () {

        $("p").wrapInner("<div style='border:1px red solid;'></div>");

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

想要了解更多关于包裹节点的实例，可以访问 jQuery 中文官网 DOM 插入并包裹现有内容。

九、属性操作

==========================================================================

在 jQuery 中， attr() 方法用来获取和设置元素的属性，removeAttr() 方法用来删除元素属性。

9.1、获取元素属性

如果要获取元素的属性，那么只需要给 attr() 方法传递一个参数，即属性名称。

示例：获取 P 元素的 class 属性值，并追加到 div 中


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <p class="xnm-class">小牛马</p>

    <div></div>

    <script type="text/javascript">

      $(document).ready(function () {

        var p_class = $("p").attr("class");

        $("div").append(p_class);

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

9.2、设置元素属性

如果需要设置元素的属性值，也可以使用 attr() 方法，不同的是，需要传递两个参数即属性名称和对应的值。

示例：设置 div 的 class 值


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

      .demo {

        border: 1px solid red;

        height: 100px;

      }

    </style>

  </head>

  <body>

    <div>小牛马</div>

    <script type="text/javascript">

      $(document).ready(function () {

        $("div").attr("class", "demo");

      });

    </script>

  </body>

</html>

运行效果为：

请添加图片描述

如果需要一次性为同一个元素设置多个元素，可以使用下面的代码来实现：


$("div").attr({ class: "demo", name: "test" }); //将一个 “名/值” 形式的对象设置为匹配元素的属性

9.3、删除元素属性

用 removeAttr() 方法来实现删除元素属性。.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

示例：删除 div 的 class


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

      .demo {

        border: 1px solid red;

        height: 100px;

      }

    </style>

  </head>

  <body>

    <div class="demo">橘猫烧鲷鱼</div>

    <script type="text/javascript">

      $(document).ready(function () {

        $("div").removeAttr("class");

      });

    </script>

  </body>

</html>

想要了解更多关于属性操作的例子，可以访问 jQuery 中文官网通用属性操作。

十、样式操作

=========================================================================

10.1、获取样式和设置样式

HTML 代码：


<p class="xnm">小牛马</p>

其中 class 也是 p 标签的属性，因此获取 class 和设置 class 都可以使用我们前面所说的attr()方法。比如：


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

        .xnm {

            background-color: red;

        }

        .xnm {

            background-color: yellow;

        }

    </style>

</head>

<body>

<p class="xnm">小牛马</p>

<script type="text/javascript">

    $(document).ready(function() {

        var  p_class = $("p").attr("class");//获取<p>元素的class

        console.log(p_class);//打印值为xnm

        $("p").attr("class","xnm");//替换class样式，如果想要添加可以使用addClass()方法

    });

</script>

</body>

</html>

请添加图片描述

10.2、追加样式

.addClass() 方法为每个匹配的元素添加指定的样式类名，值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

示例：为 div 追加一个新样式 another


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

      .demo {

        border: 1px solid red;

        height: 100px;

      }



      .another {

        width: 50%;

      }

    </style>

  </head>

  <body>

    <div class="demo">hello</div>

    <script type="text/javascript">

      $(document).ready(function () {

        $("div").addClass("another");

      });

    </script>

  </body>

</html>

注：凌晨两点了，好累懒得截图了QAQ，反正也没人看。。。

注：上例中 div 元素同时拥有两个 class 值，即 “demo” 和 “another” ，在 css 中有以下两条规定：

如果给一个元素添加了多个 class 值，那么就相当于合并了它们的样式。
如果有不同的 class 设定了同一样式属性，则后者覆盖前者。

10.3、移除样式

.removeClass() 方法移除集合中每个匹配元素上一个，多个或全部样式。如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除。

示例：移除 div 的 another 样式


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

      .demo {

        border: 1px solid red;

        height: 100px;

      }



      .another {

        width: 50%;

      }

    </style>

  </head>

  <body>

    <div class="demo another">hello</div>

    <script type="text/javascript">

      $(document).ready(function () {

        $("div").removeClass("another");

      });

    </script>

  </body>

</html>

注：如果要删除多个 class 值，我们可以以空格的方式删除多个 class 名，比如：


$("div").removeClass("another demo"); //删除 another 类和 demo 类

如果 removeClass() 方法不带参数，就会将 class 的值全部删除，比如：


$("div").removeClass(); //删除<div>元素的所有class

10.4、切换样式

.toggleClass() 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

例子：


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

      .main {

        color: red;

      }

    </style>

  </head>

  <body>

    <p>hello</p>

    <button class="btn1">切换段落的 "main" 类</button>

    <script type="text/javascript">

      $(document).ready(function () {

        $("button").click(function () {

          $("p").toggleClass("main");

        });

      });

    </script>

  </body>

</html>

运行效果：点击button，字变红色。

10.5、判断是否含有某个样式

.hasClass() 可以用来判断元素中是否含有某个 class，如果有则返回 true，否则返回 false。比如：


$("p").hasClass("another");

想要查看更多关于样式操作的实例，可以访问 jQuery 中文官网 class 属性。

十一、设置和获取 HTML、文本和值

======================================================================================

11.1、

.html() 方法

.html() 获取集合中第一个匹配元素的 HTML 内容或设置每一个匹配元素的 html 内容。类似于我们原生 JavaScript 中的 innerHTML 属性。

示例：获取 div 中的 HTML 内容


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <div><p>hello</p></div>

    <script type="text/javascript">

      $(document).ready(function () {

        var div_html = $("div").html(); //获取<div>元素的HTML代码

        alert(div_html); //打印<div>元素的HTML代码

      });

    </script>

  </body>

</html>

示例：设置 div 中的 HTML 内容


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

  </head>

  <body>

    <div></div>

    <script type="text/javascript">

      $(document).ready(function () {

        $("div").html("<span>hello</span>");

      });

    </script>

  </body>

</html>

11.2、.text() 方法

.text() 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。类似于 JavaScript 中的 innerText 属性。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

<meta charset="utf-8" />

<title></title>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<div><p>hello</p></div>

<script type="text/javascript">

  $(document).ready(function () {

    var div_html = $("div").html(); //获取<div>元素的HTML代码

    alert(div_html); //打印<div>元素的HTML代码

  });

</script>




示例：设置 div 中的 HTML 内容

<meta charset="utf-8" />

<title></title>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<div></div>

<script type="text/javascript">

  $(document).ready(function () {

    $("div").html("<span>hello</span>");

  });

</script>




[]( )11.2、.text() 方法

----------------------------------------------------------------------------------



`.text()` 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。类似于 JavaScript 中的 `innerText` 属性。
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中...(img-DAC0Y7kC-1715803470177)]

[外链图片转存中...(img-5093ZAAq-1715803470177)]

[外链图片转存中...(img-VLOnxO9Z-1715803470178)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

2301_76232361

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
三、jQuery 中的 DOM 操作（超详细）

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫