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>

效果：

二、创建和插入节点

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（七）：节点操作的更多相关文章

  1. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  2. jquery元素节点操作

    jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入 ...

  3. jQuery自学笔记（四）：jQuery DOM节点操作

    获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...

  4. jQuery的节点操作

    1.创建节点 var aa = $("<div id='cccc'>插入的内容</div>") var bb = $("<a href='h ...

  5. jquery 之节点操作

    一.添加节点 [添加内部子节点方法]:内部节点就是儿子节点 append()    在被选元素内部的结尾插入内容 appendTo()  将指定内容插入到被选标签内部的结尾 prepend()   在 ...

  6. jquery——元素节点操作

    插入节点: 1.append()和appendTo():在现存元素的内部,从后面插入元素 <script type="text/javascript"> $(funct ...

  7. jQuery(Dom节点操作)

  8. 解密jQuery内核 DOM操作的核心buildFragment

    文档碎片是什么 http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-B63ED1A3 DocumentFragment is a & ...

  9. 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON

    一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...

随机推荐

  1. mysql在插入或更新的时候对一个字段赋递增值

    在我们有一个需求是更新某个表里面的某个字段,让这个字段变成一个递增的值,或者插入某个表中使得某些字段的值是递增的.下面我们来看看具体的操作: 更改表字段为递增 首先设置一个变量,初始值为任意数值,这里 ...

  2. Caffe搭建：常见问题解决办法和ubuntu使用中遇到问题（持续更新）

    严正声明: 在linux下面使用命令行操作时,一定要懂得命令行的意思,然后再执行,要不然在不知道接下来会发生什么的情况下输入一通命令,linux很有可能崩掉. 因为在linux下面,使用sudo以及r ...

  3. [Contiki系列论文之2]WSN的自适应通信架构

    说明:本系列文章翻译自Contiki之父Adam Dunkels经典论文,版权归原作者全部. Contiki是由Adam Dunkels及其团队开发的系统.研读其论文是对深入理解Contiki系统的最 ...

  4. Spring boot 通用配置文件模板

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  5. Vue 常见问题汇总

    Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...

  6. zabbix 对网卡的流量的监控

    新建Template:Network incoming or outcoming on eth1 新建items:Network incoming on eth1 特别注意:储存值:差量(每秒速率)- ...

  7. 菜鸟学Java（十一）——GET与POST

    相信大家在面试的时候经常会被问到:GET与POST有什么区别吧?你是怎么回答的呢?POST比GEt安全?GET有URL的长度限制而POST没有或者很大?GET通过URL或者Cookie传参数,POST ...

  8. nodejs批量处理图片

    var gm = require('gm');var imageMagick = gm.subClass({ imageMagick : true });var path = require('pat ...

  9. Berkeley Packet Filter (BPF) BCC

    http://www.brendangregg.com/ebpf.html https://qmonnet.github.io/whirl-offload/2016/09/01/dive-into-b ...

  10. angular-resource版本差异问题

    在 AngularJS v1.3.0-beta.14 这个版本里,使用query方法,如果传递进来的数据不是数组,会报错. 在 AngularJS v1.2.18 这个版本里,使用query方法,如果 ...