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. Linux创建系统用户

    #!/bin/bash users_home_front_dir="/data/users/" ssh_user=$1 user_group=$2 server_user_path ...

  2. （电工基地笔记）Vivado固化至SPI Flash

    如果从头开始做SPI Flash固化是有一些麻烦的,要在完成综合之后,打开 synthesized Design (图) (图) 然后在synthesized Design打开状态下,选择Tools- ...

  3. calcite 理论

    https://blog.csdn.net/yunlong34574/article/details/46375733 https://cloud.tencent.com/developer/arti ...

  4. 沐雪多用户微信公众平台开发源码，商城小程序源码（2018年最新的asp.net C# 微信源码，小程序源码）

    现售价5400元,就可以搭建自己的微信平台啦 购买地址:https://item.taobao.com/item.htm?id=539102325336 该系统是由[上海沐雪网络]独家授权销售,其他地 ...

  5. Implementation Notes: Runtime Environment Map Filtering for Image Based Lighting

    https://placeholderart.wordpress.com/2015/07/28/implementation-notes-runtime-environment-map-filteri ...

  6. 死亡之Makefile。。。

    A=Nothing build: @rm -rf build/$(A)/* > /dev/null .PHONY: build 这是一个Makefile..只需要打开终端,在这个Makefile ...

  7. VS调试dll

    (ps:编译dll的工程最好配置一下预编译宏:“配置属性”/“C或C++”/“预处理器”/“预处理器定义”,选择编辑,在最下面加一行“_CRT_SECURE_NO_WARNINGS”) 1. 右键dl ...

  8. js判断网页是真静态还是伪静态的方法

    现在很多网站都是使用以“.html“为扩展名的网页,这样做的好处是有利于搜索引擎收录和排名,或者是其他目的,如可以缩短网址使人容易记住.不过有意思的是并不是所有的以“.html”扩展名的网页都是静态的 ...

  9. 邮箱登录form表单样例

    index.html <!doctype html> <html lang="en"> <head> <meta charset=&quo ...

  10. idea 换主题

    换背景 . 选中行变色