3、jQuery 中的 DOM 操做（超详细）

2022年05月13日阅读数：20

这篇文章主要向大家介绍3、jQuery 中的 DOM 操做（超详细）,主要内容包括基础应用、实用技巧、原理机制等方面，希望对大家有所帮助。

文章目录

前言
1、 DOM 介绍
2、查找节点
- 2.1查找元素节点
- 2.2查找属性节点
3、建立节点
- 3.一、建立元素节点
- 3.二、建立文本节点
- 3.三、建立属性节点
4、插入节点
- 4.1 DOM 插入现有元素内:
- 4.2 DOM 插入现有元素外:
5、删除节点
- 5.1 detach() 方法
- 5.2 empty() 方法
- 5.3 remove() 方法
6、复制节点
7、替换节点
8、包裹节点
- 8.1 、wrap() 方法
- 8.二、wrapAll() 方法
- 8.三、wrapInner() 方法
9、属性操做
- 9.一、获取元素属性
- 9.二、设置元素属性
- 9.三、删除元素属性
10、样式操做
- 10.一、获取样式和设置样式
- 10.二、追加样式
- 10.三、移除样式
- 10.四、切换样式
- 10.五、判断是否含有某个样式
11、设置和获取 HTML、文本和值
- 11.一、
- 11.二、.text() 方法
- 11.三、val() 方法
12、遍历节点
- 12.一、.children() 方法
- 12.二、next() 方法
- 12.三、.prev()
- 12.四、.siblings() 方法
- 12.五、.parent() 方法
十3、CSS-DOM 操做
- 13.一、.css()
- 13.二、.height()、.width()
- 13.三、元素定位
总结

前言

本文将学习 jQuery 中的 DOM 操做。
请添加图片描述 javascript

1、 DOM 介绍

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 能够把 HTML 看作是文档树，经过 DOM 提供的 API 能够对树上的节点进行操做。下面咱们来看一下 W3C 上的 dom 树：
在这里插入图片描述 css

2、查找节点

使用 jQuery 在文档树上查找节点很是容易，咱们能够经过上一篇中的jQuery 选择器来完成。html

2.1查找元素节点

var $li = $("ol li:eq(0)"); //获取<ol>里第一个<li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容
alert(li_txt); //打印文本内容

2.2查找属性节点

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

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

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

3、建立节点

3.一、建立元素节点

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

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

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

3.二、建立文本节点

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

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

3.三、建立属性节点

建立属性节点和建立文本节点相似，也是直接在建立元素节点时一块儿建立，好比：浏览器

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

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

<!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、插入节点

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 插入现有元素外

5、删除节点

若是文档中某一个元素多余，那么咱们可使用 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 移除。

6、复制节点

复制节点能够经过 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 中文官网复制元素。

7、替换节点

.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、包裹节点

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.二、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.三、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 插入并包裹现有内容。

9、属性操做

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

9.一、获取元素属性

若是要获取元素的属性，那么只须要给 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.二、设置元素属性

若是须要设置元素的属性值，也可使用 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.三、删除元素属性

用 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、样式操做

10.一、获取样式和设置样式

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.二、追加样式

.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.三、移除样式

.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.四、切换样式

.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.五、判断是否含有某个样式

.hasClass() 能够用来判断元素中是否含有某个 class，若是有则返回 true，不然返回 false。好比：

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

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

11、设置和获取 HTML、文本和值

11.一、

.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.二、.text() 方法

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

示例：获取 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>
    <div>hello</div>
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        var p_text = $("div").text();
        alert(p_text);
      });
    </script>
  </body>
</html>

示例：设置 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>
    <div>hello</div>
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        $("div").text("world");
      });
    </script>
  </body>
</html>

11.三、val() 方法

.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每一个元素的值。相似于 JavaScript 中的 value 属性。.val() 方法主要用于获取表单元素的值，好比 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val() 方法返回一个包含每一个选择项的数组，若是没有选择性被选中，它返回 null。

示例：设置输入框的值

<!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>
    <input type="text" value="" />
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        $("input").val("QAQ");
      });
    </script>
  </body>
</html>

12、遍历节点

12.一、.children() 方法

得到匹配元素集合中每一个元素的子元素，选择器选择性筛选。

鉴于一个 jQuery 对象，表示一个 DOM 元素的集合，.children()方法容许咱们经过在 DOM 树中对这些元素的直接子元素进行搜索，而且构造一个新的匹配元素的 jQuery 对象。.find() 和 .children() 方法是类似的，但后者只是针对向下一个级别的 DOM 树。还要注意的是和大多数的 jQuery 方法同样，.children() 不返回文本节点;让全部子元素包括使用文字和注释节点，建议使用 .contents()。

.children() 方法选择性地接受同一类型选择器表达式，咱们能够将参数传递给 $() 函数。若是提供选择器参数，将过滤出来的元素，测试它们是否匹配。

示例：获取 ul 的子元素 li 的文本值

<!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 ul_chlildList = $("ul").children();
        for (var i = 0, len = ul_chlildList.length; i < len; i++) {
   
   
          alert(ul_chlildList[i].innerHTML);
        }
      });
    </script>
  </body>
</html>

12.二、next() 方法

取得匹配的元素集合中每个元素紧邻的后面同辈元素的元素集合。若是提供一个选择器，那么只有紧跟着的兄弟元素知足选择器时，才会返回此元素。

若是一个 jQuery 表明了一组 DOM 元素，.next() 方法容许咱们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素建立一个新的 jQuery 对象。

该方法还能够接受一个可选的选择器表达式，该选择器表达式能够是任何可传给 $() 函数的选择器表达式。若是每一个元素的直接兄弟元素知足所提供的选择器，那么它会保存在新生成的 jQuery 对象中，不然，不会包含该元素。

示例：获取 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>
    <div>xiaoniuma</div>
    <p>XIAONIUMA</p>
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        var div_next = $("div").next();
        alert(div_next.text());
      });
    </script>
  </body>
</html>

12.三、.prev()

取得一个包含匹配的元素集合中每个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器。

若是提供的 jQuery 表明了一组 DOM 元素，.prev() 方法经过这些元素组合传递到方法构造一个新的 jQuery 对象。

该方法选择性地接受同一类型选择器表达式，咱们能够传递给 $() 函数。若是提供了选择器表达式，那么会先测试该元素是否知足匹配的选择器表达式。

示例：获取 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>
    <div>xiaoniuma</div>
    <p>XIAONIUMA</p>
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        var p_prev = $("p").prev();
        alert(p_prev.text());
      });
    </script>
  </body>
</html>

12.四、.siblings() 方法

得到匹配元素集合中每一个元素的兄弟元素,能够提供一个可选的选择器。

若是提供的 jQuery 表明了一组 DOM 元素，.siblings() 方法经过这些元素组合传递到方法构造一个新的 jQuery 对象。

示例：改变 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>
    <div>xiaoniuma</div>
    <p>XIAONIUMA-P</p>
    <div>XIAONIUMA</div>
    <script type="text/javascript">
      $(document).ready(function () {
   
   
        $("p").siblings().css("background-color", "red");
      });
    </script>
  </body>
</html>

12.五、.parent() 方法

取得匹配元素集合中，每一个元素的父元素，能够提供一个可选的选择器。

若是提供的 jQuery 表明了一组 DOM 元素，.parent() 方法容许咱们可以在 DOM 树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素建立一个新的 jQuery 对象。

.parents() 和 .parent() 方法是类似的，但后者只是进行了一个单级的 DOM 树查找（注：也就是只查找一层，直接的父元素，而不是更加上级的祖先元素）。此外，$( "html" ).parent() 方法返回一个包含 document 的集合，而$( "html" ).parents()返回一个空集合。

该方法还能够接受一个可选的选择器表达式，该选择器表达式能够是任何可传给 $() 函数的选择器表达式。若是提供了选择器表达式，那么会先测试该元素是否知足匹配的选择器表达式。

示例：获取 p 元素的父级元素的 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>
  </head>
  <body>
    <div class="demo">
      <p>XIAONIUMA-P</p>
    </div>
    <script type="text/javascript">
      var p_pa = $("p").parent();
      alert(p_pa.attr("class"));
    </script>
  </body>
</html>

另外还有两个方法 closest() 和 parents() 方法你们能够了解一下：

closest() 方法从元素自己开始，逐级向上级元素匹配，并返回最早匹配的祖先元素。也就是说首先检查当前元素是否匹配，若是匹配则直接返回元素自己，若是不匹配则向上查找父级元素，逐级向上直到找到匹配选择器的元素，若是什么都没找到则返回一个空的 jQuery 对象。
parents() 得到集合中每一个匹配元素的祖先元素。查找方式和 parent() 方法相似，不一样点在于，当它找到第一个父节点时并无中止查找，而是继续查找，最后返回多个父节点。

想要了解更多关于遍历节点的操做，能够访问 jQuery 中文官网遍历。

十3、CSS-DOM 操做

CSS-DOM 技术简单来讲就是读取和设置 style 对象的各类属性。

13.一、.css()

获取匹配元素集合中的第一个元素的样式属性的值或设置每一个匹配元素的一个或多个 CSS 属性。

.css() 方法能够很是方便地获取匹配的元素集合中第一个元素的样式属性值，对于某些属性而言，浏览器访问样式属性的方式是不一样的，该方法对于取得这些属性是很是方便的(例如，某些属性在标准浏览器下是经过的 getComputedStyle() 方法取得的，而在 Internet Explorer 下是经过 currentStyle 和 runtimeStyle 属性取得的)而且，某些特定的属性，不一样浏览器的写法不一。举个例子， Internet Explorer 的 DOM 将 float 属性写成 styleFloat 实现，W3C 标准浏览器将 float 属性写成 cssFloat。为了保持一致性，您能够简单地使用"float"，jQuery 将为每一个浏览器返回它须要的正确值。

另外,jQuery 一样能够解析 CSS 和用 multiple-word 格式化（用横杠链接的词，好比：background-color）的 DOM 属性的不一样写法。举个例子：jQuery 能解析.css('background-color')和 .css('backgroundColor') 而且返回正确的值。不一样的浏览器可能会返回 CSS 颜色值在逻辑上相同，但在文字上表现不一样，例如： #FFF, #ffffff, 和 rgb(255,255,255)。

简写速写的 CSS 属性(例如： margin, background, border) 是不支持的，例如，若是你想从新获取 margin，可使用 $(elem).css('marginTop') 和 $(elem).css('marginRight')，其余的也是如此。

从 jQuery 1.9 开始, 传递一个 CSS 的样式属性的数组给 .css() 将返回属性 - 值配对的对象。例如，要获取元素 4 个边距宽度值 border-width，你可使用 $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

示例：获取 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>
    <style type="text/css">
      div {
   
   
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div>xiaoniuma</div>
    <script type="text/javascript">
      alert($("div").css("background-color"));
    </script>
  </body>
</html>

示例：为 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>
    <div>hello</div>
    <script type="text/javascript">
      $("div").css({
   
    border: "1px solid red", height: "100px" });
    </script>
  </body>
</html>

对于透明度的设置，能够直接使用 opacity 属性，jQuery 已经处理好了兼容性的问题，好比：

$("p").css("opacity", "0.5");

13.二、.height()、.width()

.height() 获取匹配元素集合中的第一个元素的当前计算高度值或设置每个匹配元素的高度值。
.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值或给每一个匹配的元素设置宽度。

示例：获取 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>

    <style type="text/css">
      .demo {
   
   
        border: 1px solid red;
        height: 100px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="demo">QAQ好累</div>
    <script type="text/javascript">
      alert($("div").height() + " && " + $("div").width());
    </script>
  </body>
</html>

height() 方法也能用来设置元素的高度，若是传递的是一个数字，则默认单位是 px，若是要用其余单位，则必须传递一个字符串，好比：

$("p").height(520);//设置<p>元素的高度值为520px
$("p").height(10rem);//设置<p>元素的高度值为10rem

还能够经过 css 方法来获取高度值：

$(element).css("height");

二者的区别是：css() 方法获取的高度值与样式的设置有关，可能会获得 “auto” ，也可能获得 “10px” 之类的字符串，而 height() 方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

一样的 width 方法也是相相似的，这里就再也不重复的讲解了，你们能够自行尝试使用看看效果。

13.三、元素定位

offset() 方法，在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每个元素的坐标，坐标相对于文档。这个方法不接受任何参数。.offset() 方法容许咱们检索一个元素相对于文档（document）的当前位置。和 .position() 的差异在于：.position() 是相对于相对于父级元素的位移。当经过全局操做（特别是经过拖拽操做）将一个新的元素放置到另外一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用.offset()更合适。.offset() 返回一个包含 top 和 left 属性的对象。好比：

var p_offset = $("p").offset(); //获取<p>元素的offset()
var p_offsetLeft = p_offset.left; //获取左偏移
var p_offsetTop = p_offset.top; //获取右偏移

position() 方法，获取匹配元素中第一个元素的当前坐标，相对于 offset parent 的坐标。(offset parent 指离该元素最近的并且被定位过的祖先元素 ) .position() 方法能够取得元素相对于父元素的偏移位置。与 .offset() 不一样, .offset() 是得到该元素相对于 documet 的当前坐标当把一个新元素放在同一个容器里面另外一个元素附近时，用 .position() 更好用。.position()返回一个包含 top 和 left 属性的对象。

var position = $("p").position(); //获取<p>元素的position()
var left = position.left; //获取左偏移
var top = position.top; //获取右偏移

scrollTop() 方法和scrollLeft()方法，这两个方法的做用是分别获取元素的滚动条距顶端的距离和距左侧的距离。另外能够为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。好比:

var $p = $("p");
var scrollTop = $p.scrollTop(); //获取元素的滚动条距顶端的距离
var scrollLeft = $p.scrollLeft(); //获取元素的滚动条距左侧的距离
$("textarea").scrollTop(300); //元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft(300); //元素的横向滚动条滚动到指定的位置

想要了解更多关于 css 属性的操做能够访问 jQuery 中文官网 CSS 属性。

总结

我敲，好累呀，后头直接开摆了，不想截图，若是有哪位客官在看的话，谅解下蛤，都挺简单哒，动动小手实践下更好呀！
请添加图片描述

下一章将讲解 jQuery 中的事件和动画。

标签： javascript css html java jquery web 编程数组浏览器 bash

原文地址：https://blog.csdn.net/weixin_44009656/article/details/124564531

3、jQuery 中的 DOM 操做（超详细）

文章目录

前言

1、 DOM 介绍

2、 查找节点

2.1查找元素节点

2.2查找属性节点

3、 建立节点

3.一、建立元素节点

3.二、建立文本节点

3.三、建立属性节点

4、插入节点

4.1 DOM 插入现有元素内:

4.2 DOM 插入现有元素外:

5、删除节点

5.1 detach() 方法

5.2 empty() 方法

5.3 remove() 方法

6、复制节点

7、 替换节点

8、 包裹节点

8.1 、wrap() 方法

8.二、wrapAll() 方法

8.三、wrapInner() 方法

9、 属性操做

9.一、获取元素属性

9.二、设置元素属性

9.三、删除元素属性

10、样式操做

10.一、获取样式和设置样式

10.二、追加样式

10.三、移除样式

10.四、切换样式

10.五、判断是否含有某个样式

11、 设置和获取 HTML、文本和值

11.一、

11.二、.text() 方法

11.三、val() 方法

12、遍历节点

12.一、.children() 方法

12.二、next() 方法

12.三、.prev()

12.四、.siblings() 方法

12.五、.parent() 方法

十3、CSS-DOM 操做

13.一、.css()

13.二、.height()、.width()

13.三、元素定位

总结

相关推荐

热门标签

2、查找节点

3、建立节点

7、替换节点

8、包裹节点

9、属性操做

11、设置和获取 HTML、文本和值