jQuery（七）：节点操作

时间：2023-03-09 00:02:32
jQuery（七）：节点操作

jQuery中节点操作主要分为以下几种：

  1. 查找节点。
  2. 创建节点。
  3. 插入节点。
  4. 替换节点。
  5. 复制节点。
  6. 删除节点。

一、查找节点

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>节点操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

      $(function(){

           // 查找节点

           // 获取h2标签，并将其隐藏

           $("h2").hide();

           // 获取Li元素，并添加背景色

           $("li").css("background-color","red");

      });

    </script>

</head>

<body>

        <h2>热门动画排行</h2>

        <ul>

            <li>名侦探柯南</li>

            <li>阿拉蕾</li>

            <li>海贼王</li>

        </ul>

</body>

</html>

效果：

jQuery（七）：节点操作

二、创建和插入节点

1、创建节点

工厂函数$()用于获取或创建节点，语法如下：

jQuery（七）：节点操作

例如：

jQuery（七）：节点操作

2、插入子节点

元素内部插入子节点，语法如下：

jQuery（七）：节点操作

3、插入同辈节点

元素外部插入同辈节点，语法如下：

jQuery（七）：节点操作

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>节点操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

      $(function(){

           // 查找节点

           // 获取h2标签，并将其隐藏

           $("h2").hide();

           // 获取Li元素，并添加背景色

           $("li").css("background-color","red");

           // 创建节点

           var $newNode=$("<li>火影忍者</li>"); // 创建含文本的li元素节点

           // 追加子节点

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

           $($newNode).appendTo($("ul"));

           // 前置插入子节点 添加到第一个位置

           $("ul").prepend($newNode);

           $($newNode).prependTo($("ul"));

           // 元素之后插入同辈节点

           // 创建ul标签

           var $newheader=$("<h2>热门电影排行</h2>");

           $("h2").after($newheader);

           $($newheader).insertAfter($("h2"));

           // 元素之前插入同辈节点

           $("h2").before($newheader);

           $($newheader).insertBefore($("h2"));

      });

    </script>

</head>

<body>

        <h2>热门动画排行</h2>

        <ul>

            <li>名侦探柯南</li>

            <li>阿拉蕾</li>

            <li>海贼王</li>

        </ul>

</body>

</html>

三、替换节点

replaceWith()和replaceAll()用于替换节点，例如：
jQuery（七）：节点操作
示例：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>节点操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

      $(function(){

           // 查找节点

           // 获取h2标签，并将其隐藏

           $("h2").hide();

           // 获取Li元素，并添加背景色

           $("li").css("background-color","red");

           // 创建节点

           var $newNode=$("<li>火影忍者</li>"); // 创建含文本的li元素节点

           // 追加子节点

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

           $($newNode).appendTo($("ul"));

           // 前置插入子节点 添加到第一个位置

           $("ul").prepend($newNode);

           $($newNode).prependTo($("ul"));

           // 元素之后插入同辈节点

           // 创建ul标签

           var $newheader=$("<h2>热门电影排行</h2>");

           $("h2").after($newheader);

           $($newheader).insertAfter($("h2"));

           // 元素之前插入同辈节点

           $("h2").before($newheader);

           $($newheader).insertBefore($("h2"));

           // 替换节点

           $("ul li:eq(1)").replaceWith($newNode);

           $($newNode).replaceAll($("ul li:eq(1)"));

      });

    </script>

</head>

<body>

        <h2>热门动画排行</h2>

        <ul>

            <li>名侦探柯南</li>

            <li>阿拉蕾</li>

            <li>海贼王</li>

        </ul>

</body>

</html>

四、复制节点

clone()用于复制节点，语法如下：

jQuery（七）：节点操作

注意：

jQuery（七）：节点操作

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>节点操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

      $(function(){

           // 查找节点

           // 获取h2标签，并将其隐藏

           $("h2").hide();

           // 获取Li元素，并添加背景色

           $("li").css("background-color","red");

           // 创建节点

           var $newNode=$("<li>火影忍者</li>"); // 创建含文本的li元素节点

           // 追加子节点

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

           $($newNode).appendTo($("ul"));

           // 前置插入子节点 添加到第一个位置

           $("ul").prepend($newNode);

           $($newNode).prependTo($("ul"));

           // 元素之后插入同辈节点

           // 创建ul标签

           var $newheader=$("<h2>热门电影排行</h2>");

           $("h2").after($newheader);

           $($newheader).insertAfter($("h2"));

           // 元素之前插入同辈节点

           $("h2").before($newheader);

           $($newheader).insertBefore($("h2"));

           // 替换节点

           $("ul li:eq(1)").replaceWith($newNode);

           $($newNode).replaceAll($("ul li:eq(1)"));

           // 复制节点

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

           // 输出元素本身html

           alert($("<div></div>").append($("ul li:eq(1)").clone(true)).html()) ;

      });

    </script>

</head>

<body>

        <h2>热门动画排行</h2>

        <ul>

            <li>名侦探柯南</li>

            <li>阿拉蕾</li>

            <li>海贼王</li>

        </ul>

</body>

</html>

五、删除节点

jQuery提供了三种删除节点的办法：

jQuery（七）：节点操作

例如：

jQuery（七）：节点操作

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>节点操作</title>

    <!--引入jQuery-->

    <script src="../jquery-3.3.1.js"></script>

    <!--javascript-->

    <script>

      $(function(){

           // 查找节点

           // 获取h2标签，并将其隐藏

           $("h2").hide();

           // 获取Li元素，并添加背景色

           $("li").css("background-color","red");

           // 创建节点

           var $newNode=$("<li>火影忍者</li>"); // 创建含文本的li元素节点

           // 追加子节点

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

           $($newNode).appendTo($("ul"));

           // 前置插入子节点 添加到第一个位置

           $("ul").prepend($newNode);

           $($newNode).prependTo($("ul"));

           // 元素之后插入同辈节点

           // 创建ul标签

           var $newheader=$("<h2>热门电影排行</h2>");

           $("h2").after($newheader);

           $($newheader).insertAfter($("h2"));

           // 元素之前插入同辈节点

           $("h2").before($newheader);

           $($newheader).insertBefore($("h2"));

           // 替换节点

           $("ul li:eq(1)").replaceWith($newNode);

           $($newNode).replaceAll($("ul li:eq(1)"));

           // 复制节点

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

           // 输出元素本身html

           alert($("<div></div>").append($("ul li:eq(1)").clone(true)).html()) ;

           // 删除节点

           $("ul li:eq(1)").remove();

           $("ul li:eq(1)").detach();

           $("ul li:eq(1)").empty(); // 只清空节点内容

      });

    </script>

</head>

<body>

        <h2>热门动画排行</h2>

        <ul>

            <li>名侦探柯南</li>

            <li>阿拉蕾</li>

            <li>海贼王</li>

        </ul>

</body>

</html>

相关文章