广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery操作元素节点
  • 730

0
分享到

jQuery操作元素节点

2024-04-02 19:04:59 730人浏览 八月长安
摘要

目录一、查找节点二、创建和插入节点1、创建节点2、插入子节点3、插入同辈节点三、替换节点四、复制节点五、删除节点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");
      });
    </script>
</head>
<body>
        <h2>热门动画排行</h2>
        <ul>
            <li>名侦探柯南</li>
            <li>阿拉蕾</li>
            <li>海贼王</li>
        </ul>
</body>
</html>

效果：

二、创建和插入节点

1、创建节点

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

例如：

2、插入子节点

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

3、插入同辈节点

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

示例：

<!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()用于替换节点，例如：

示例：

<!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()用于复制节点，语法如下：

注意：

示例：

<!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提供了三种删除节点的办法：

例如：

示例：

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

到此这篇关于jQuery操作元素节点的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jQuery操作元素节点

本文链接: https://www.lsjlt.com/news/142175.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • jQuery操作元素节点
    目录一、查找节点二、创建和插入节点1、创建节点2、插入子节点3、插入同辈节点三、替换节点四、复制节点五、删除节点jQuery中节点操作主要分为以下几种： 查找节点。创建节点。插入节点...
    99+
    2022-11-13
  • jQuery操作元素节点的方法
    本篇内容主要讲解“jQuery操作元素节点的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jQuery操作元素节点的方法”吧!一、查找节点示例：<!DOCTYPE html&...
    99+
    2023-06-29
  • jquery如何创建元素节点
    这篇“jquery如何创建元素节点”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“jquery如何创建元素节点”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入...
    99+
    2023-06-06
  • jquery如何查询节点内的元素
    本文小编为大家详细介绍“jquery如何查询节点内的元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery如何查询节点内的元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。查询方法：1、使用childr...
    99+
    2023-07-05
  • jquery怎么查询节点内的元素
    本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。查询节点内的元素，就是查询指定节点的子元素。jquery查询子元素有两种方法：children()方法：获取该元素下的直接子集元素find()方法：获取该元素...
    99+
    2023-05-14
    jQuery
  • jQuery遍历节点元素方法介绍
    一、遍历子元素 children()方法可以用来获取元素的所有子元素，语法如下： 示例： <!DOCTYPE html> <html lang="en"> ...
    99+
    2022-11-13
  • jquery如何删除第一个节点元素
    小编给大家分享一下jquery如何删除第一个节点元素，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...
    99+
    2022-10-19
  • jquery如何删除节点下所有元素
    这篇文章主要讲解了“jquery如何删除节点下所有元素”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何删除节点下所有元素”吧！ ...
    99+
    2022-10-19
  • jquery如何判断元素是否有子节点
    这篇文章主要讲解了“jquery如何判断元素是否有子节点”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何判断元素是否有子节点”吧！ ...
    99+
    2022-10-19
  • jquery如何操作元素属性
    这篇文章主要讲解了“jquery如何操作元素属性”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何操作元素属性”吧！ ...
    99+
    2022-10-19
  • jquery如何删除指定元素后的兄弟节点
    这篇文章主要为大家展示了“jquery如何删除指定元素后的兄弟节点”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何删除指定元素后的兄弟节点”这篇文...
    99+
    2022-10-19
  • JQuery怎么操作IFRAME里的元素
    本篇内容介绍了“JQuery怎么操作IFRAME里的元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JQ...
    99+
    2022-10-19
  • jQuery如何操作第N个元素
    这篇文章给大家分享的是有关jQuery如何操作第N个元素的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaS...
    99+
    2022-10-18
  • Jquery操作DOM元素方法详解
    一、文本输入框: text <input type=”text” value=”99.com” size=12 id=”input1” /> 1、获取文本值： $("#i...
    99+
    2022-11-13
  • jquery中怎么操作元素内容
    本篇内容介绍了“jquery中怎么操作元素内容”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！jquery中用于操作元素内容的方法有html(...
    99+
    2023-07-05
  • 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流的示例分析
    这篇文章主要介绍事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、事件冒泡定义事件冒泡是指在一个对象触发某类...
    99+
    2022-10-19
  • vue动态添加/删除dom元素节点的操作代码
    目录vue 动态添加/删除dom元素vue中删除dom元素节点vue 动态添加/删除dom元素 需要在点击添加时，增加一行key/value的输入框；点击垃圾桶图标时，删除对应行 效...
    99+
    2022-12-08
    vue删除dom元素 vue添加dom元素 vue dom元素节点
  • jQuery中DOM节点操作方法有哪些
    这篇文章主要为大家展示了“jQuery中DOM节点操作方法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery中DOM节点操作方法有哪些”这篇文章吧...
    99+
    2022-10-19
  • jquery中的节点操作方法有哪些
    本篇内容主要讲解“jquery中的节点操作方法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery中的节点操作方法有哪些”吧!选择节点在 jQuery 中，我们可以使用选择器来选择 ...
    99+
    2023-07-05
  • 怎么在jQuery中使用empty()操作dom节点
    怎么在jQuery中使用empty()操作dom节点？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。jquery是什么jquery是一个简洁而快速的JavaScript库，它具有...
    99+
    2023-06-14
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作