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. 转：zTree高级入门：如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标（按钮）

    当我们在使用ztree树组件的节点编辑功能时,只要我们引入了ztree相关节点编辑的js脚本文件: <script type="text/javascript" src=”/ ...

  2. 如何打包和生成你的Android应用程序

    原文:http://android.eoe.cn/topic/android_sdk 在生成过程中,你的Android项目的编译和打包成一个apk文件,为您的应用程序二进制的容器.它包含了所有必要的信 ...

  3. Mac 设置环境变量

    前天配置好了SVN,这里赞下Versions,确实好用! CO了淘宝的TAE,跑startServer.sh时报错: JAVA_HOME does not point at a JDK or JRE. ...

  4. jquery JSON的解析方式实例分享

    本文以jquery异步获取的数据类型——json对象和字符串为依据,介绍两种方式获取到的结果处理方式. 这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封 ...

  5. HTML5学习笔记（二）：HTML基础学习之一

    元素.属性和格式化 元素是指开始标签到结束标签之前的所有代码,如: <p>this is my page!</p> <!-- 下面的可以称为空元素 --> < ...

  6. react-scripts的css modules

    用create-react-app创建的项目基于react-scripts内建支持css modules,需要把css文件名改成filename.module.css,导入方式需要改成: import ...

  7. RequestDispatcher.forward和HttpServletResponse.sendRedirect

    (1)RequestDispatcher.forward方法只能将请求转发给同一个WEB应用中的组件:而HttpServletResponse.sendRedirect 方法不仅可以重定向到当前应用程 ...

  8. tornado设置settings

    1.作用 设置应用程序相关参数 2.用法 settings = dict() settings["debug"] = True tornado.web.Application.__ ...

  9. iOS开发如何学习前端(2)

    iOS开发如何学习前端(2) 上一篇成果如下. 实现的效果如下. 实现了一个横放的<ul>,也既iOS中的UITableView. 实现了当鼠标移动到列表中的某一个<li>,也 ...

  10. Docker 构建网络服务后本机不能访问

    Docker 构建网络服务后本机不能访问 起因 使用tornado构建了一个服务,测试都没有问题 使用docker构建镜像,使用docker run image_name启动服务 使用浏览器访问 12 ...