jQuery操作元素节点

更新时间：2022年05月04日 11:39:17 作者：.NET开发菜鸟

这篇文章介绍了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操作元素节点的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
本文是作者学习jQuery之后练手之作，兼容各大浏览器，非常的精美实用，这里放出来给小伙伴们，有需要的直接拿走，别跟我客气^_^
2014-11-11
jquery 实现checkbox全选，反选，全不选等功能代码(奇数)
jquery 实现全选，反选，全不选等功能，下面直接以例子进行说明,需要的朋友可以参考下
2012-10-10
jQuery实现html可联动的百分比进度条
这篇文章主要介绍了jQuery实现html可联动的百分比进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
jquery获取选中的文本和值的方法
这篇文章主要介绍了jquery获取选中的文本和值的方法,需要的朋友可以参考下
2014-07-07
jQuery简单验证上传文件大小及类型的方法
这篇文章主要介绍了jQuery简单验证上传文件大小及类型的方法,结合实例形式分析了jQuery针对上传文件的类型与大小运算操作相关技巧,需要的朋友可以参考下
2016-06-06
Jquery实现三层遍历删除功能代码
遍历每一行的同时一定要记住这里是gridviewrow不是datarow，找到这个选中项在执行删除
2013-04-04
jQuery插件开发基础简单介绍
jquery插件开发基础：开发jQuery 插件的基本格式,开发全局函数的基本格式，接下来为您详细介绍，感兴趣的朋友可以了解哦
2013-01-01
基于jquery实现省市区三级联动效果
这篇文章主要介绍了基于jquery实现省市区三级联动效果,需要的朋友可以参考下
2015-12-12
jQuery中$.ajax()和$.getJson()同步处理详解
这篇文章主要介绍了jQuery中$.ajax()和$.getJson()同步处理详解的相关资料，非常的细致全面，有需要的小伙伴可以参考下。
2015-08-08
jQuery事件绑定.on()简要概述及应用
前几天看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的，最后看源码发现bind()和delegate()都是由on()实现的，感兴趣的朋友可以了解下，或许本文对你有所帮助
2013-02-02