jquery查找节点-jQuery 中的基本 DOM 操作

bendan520 jquery

2023-09-17 0 2,688 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

文章目录

提示：以下为本文正文，以下案例仅供参考。

1.DOM简介

文档对象模型（DOM）是W3C组织推荐的处理可扩展标记语言的标准编程接口。 DOM 定义了访问 HTML 和 XML 文档的标准。 DOM可以把HTML看成一棵文档树，通过DOM提供的API可以操作树中的节点。接下来我们看一下W3C上的dom树

2. 查找节点 2.1 查找元素节点

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

2.2 查找属性节点

使用 jQuery 选择器找到所需元素后，可以使用 attr() 方法获取其各种属性的值。 attr()方法的参数可以是一个或两个。当参数为1时，为要查询的属性名称，例如：

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

3.创建节点 3.1 创建节点元素

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

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

事实上，它刚刚创建。如果要使用它，则需要使用append()等方法将元素插入到文档中。

3.2 创建文本节点

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

将新的 li 元素插入到 ul 中

<script type="text/javascript">
      $(document).ready(function () {
        var li_obj = $("黄色
");
        $("ul").append(li_obj);
      });
    </script>

四个插入节点 4.1DOM 插入现有元素：

.append() 在每个匹配元素的末尾插入参数内容。

.appendTo() 在目标元素的末尾插入匹配元素。

.html() 获取集合中第一个匹配元素的 HTML 内容，并设置每个匹配元素的 HTML 内容。

.prepend() 在每个匹配元素之后（元素内部）插入参数内容。

.prependTo() 将所有元素插入目标上方（元素内）。

.text() 获取匹配元素集中每个元素的组合文本，包括它们的后代。将匹配元素集中每个元素的文本内容设置为指定的文本内容。

4.2DOM在现有元素之外插入：

.after() 将参数指定的内容插入到匹配元素集中每个元素的前面作为其兄弟节点。

.before() 根据参数设置在匹配元素后面插入内容。

.insertAfter() 将集合中的每个匹配元素插入到目标元素前面（注意：插入的元素被视为目标元素的兄弟元素）。

.insertBefore() 将集合中的每个匹配元素插入到目标元素上（注意：插入的元素被视为目标元素的兄弟元素）。

5.删除节点

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

5.1detach()方法

从 DOM 中删除所有匹配的元素。 .detach() 的工作方式与 .remove() 相同，不同之处在于 .detach() 保存所有 jQuery 数据并将其与删除的元素关联。当您需要删除元素然后将其插入到 DOM 中时，这些方法非常有用。

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

5.2remove()方法

从 DOM 中删除匹配元素集。（注意：还删除元素上的风暴和 jQuery 数据。）与 .empty() 类似。 .remove() 将元素移出 DOM。当我们想要删除元素本身时jquery查找节点，我们使用 .remove() ，这也会删除元素内部的所有内容，包括与元素相关的绑定和 jQuery 数据。如果您想要删除元素同时保留数据和完整性，请改用 .detach()。

<script type="text/javascript">
      $(document).ready(function () {
        var $li = $("ul li:eq(1)").remove(); //获取节点中的第2个元素节点后,将它从网页中删除
        $li.appendTo("ul"); //把刚才删除的节点又重新添加到  元素里
        //可以直接使用 appendTo() 方法来简化上面的代码
        //appendTo() 方法也可以用来移动元素,移动元素时首先将文档上删除此元素,然后讲该元素插入得到文档中的指定节点
        //$("ul li:eq(1)").appendTo("ul");
      });
    </script>