文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

jQuery操作元素节点

2024-04-02 19:55

关注

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

阅读原文内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     801人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     432人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

jQuery操作元素节点

前端开发2024-04-02

jQuery操作元素节点的方法

前端开发2023-06-29

jquery如何创建元素节点

前端开发2023-06-06

jQuery遍历节点元素方法介绍

前端开发2024-04-02

jquery如何查询节点内的元素

前端开发2023-07-05

jquery怎么查询节点内的元素

前端开发2023-05-14

jquery如何操作元素属性

前端开发2024-04-02

jquery如何删除第一个节点元素

前端开发2024-04-02

jquery如何删除节点下所有元素

前端开发2024-04-02

jQuery如何操作第N个元素

前端开发2024-04-02

jquery中怎么操作元素内容

前端开发2023-07-05

JQuery怎么操作IFRAME里的元素

前端开发2024-04-02

Jquery操作DOM元素方法详解

前端开发2024-04-02

jquery如何判断元素是否有子节点

前端开发2024-04-02

vue动态添加/删除dom元素节点的操作代码

前端开发2022-12-08

事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流的示例分析

前端开发2024-04-02

jQuery中操作元素的样式是什么

前端开发2024-04-02

jquery如何删除指定元素后的兄弟节点

前端开发2024-04-02

jquery对元素的基本操作有哪些

前端开发2024-04-02

jQuery中DOM节点操作方法有哪些

前端开发2024-04-02
位置：首页-资讯-前端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯