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. 使用mysqltools配置读写分离环境

    mysqltools 目前自带了cat的的自动化安装功能 一.环境规划: 主机名 ip地址 角色 mtls17 10.186.19.17 master mtls19 10.186.19.19 slav ...

  2. 使用maven生成可执行的jar包

    从pom的xsi中可以打开描述pom的schema: 可以看到pom中,project的结构: 默认的mvn install生成的jar是不带主类入口的,需要在maven-compile-plugin ...

  3. MySql（十四）：MySql架构设计——可扩展性设计之数据切分

    一.前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我们还是会面临到扩展瓶颈.这时候,我 ...

  4. tomcat重启步骤

    tomcat重启步骤1.切换到tomcat目录cd /home/tomcat-home/tomcat-erp/bin2.关闭tomcatsh shutdown.sh3.启动tomcatsh start ...

  5. windows下bash终端--git-bash总汇

    git bash是一个比较好用的终端(win下),但有一些细节需要调整后才好用. 1.比如,登陆后终端的表格,以及个别符号显示为乱码. 解决方法: 1).点击git bash左上角,选择“option ...

  6. python代码制作configure文件

    在lua中,一直用lua作为config文件,或承载数据的文件 - 好处是lua本身就很好阅读,然后无需额外写解析的代码,还支持在configure文件中读环境变量,条件判断等. 在lua中通过loa ...

  7. ActionBar 笔记

    博客地址: http://blog.csdn.net/eclipsexys/article/details/8688538 官方文档: http://developer.android.com/gui ...

  8. NLog自定义字段写入数据库表，示例

    //自定义字段写入NLog日志 private void saveNLog(InvokeLogModel model) { LogEventInfo ei = new LogEventInfo(); ...

  9. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  10. linux命令返回值的妙用

    什么是返回值 在shell终端中,你所输入的一切命令其实都有返回值,而这个返回值默认保存在"$?"中,举例看一下 [root@localhost ~]# touch [root@l ...