一、添加节点

【添加内部子节点方法】：内部节点就是儿子节点

append()    在被选元素内部的结尾插入内容

appendTo()  将指定内容插入到被选标签内部的结尾

prepend()   在被选元素内部的开头插入内容

prependTo() 将指定内容插入到被选标签内部的开头

【添加同级节点方法】：同级就是兄弟关系

after()            在被选元素同级的后面插入内容

insertAfter()     将指定内容添加到被选标签同级的后面

before()           在被选元素同级的前面插入内容

insertBefore()    将指定内容添加到被选标签同级的前面

注意：

1、以上方法作用相同。差异在于语法：内容和选择器的位置，是否能够使用函数来插入内容。

2、append、prepend、after、before能使用函数插入内容。

二、删除节点

remove()  删除被选元素（及其子元素）

empty()   从被选元素中删除子元素

三、克隆节点

clone(true) 方法生成被选元素的副本，包含子节点、文本和属性。

参数：可选。布尔值。规定是否复制元素的所有事件处理。默认false。

四、替换节点

replaceWith()  将指定的内容替换被选元素

replaceAll()

$(selector).replaceWith(content)

$(content).replaceAll(selector)

注意：replaceWith() 能够使用函数进行替换，replaceAll则不能。

五、包裹节点

wrap()       把匹配的元素用指定的内容或元素包裹起来。

wrapAll()   把所有匹配的元素用指定的内容或元素包裹起来。

wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body>

    <input type="button" value="添加">

    <p>你好啊！你喜欢吃什么水果</p>

    <ul>

        <li>葡萄</li>

        <li>香蕉</li>

        <li>榴莲</li>

    </ul>

        <span>span标签的内容1</span>

        <span>span标签的内容2</span>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

     //【添加内部子节点方法】：内部节点就是儿子节点

     //添加在结尾的

     //$('ul').append('<li>苹果1</li>');  //在ul标签内部的结尾添加指定li内容

     //$('ul').append(function(){return "<li>苹果-函数的</li>"});  //在ul标签内部的结尾添加指定li内容

     //$('<li>苹果2</li>').appendTo('ul');//将指定的li内容添加到ul标签内部的结尾

     //添加在开头的

    //$('ul').prepend('<li>梨子1</li>');  //在ul标签内部的开头添加指定li内容

    //$('ul').prepend(function(){return "<li>梨子-函数的</li>"});  //在ul标签内部的开头添加指定li内容

    //$('<li>梨子2</li>').prependTo('ul');//将指定的li内容添加到ul标签内部的开头

    //【添加同级节点方法】：同级就是兄弟关系

    //$('ul').after('<div>以上水果都好吃1</div>');  //在ul标签同级的后面添加div内容

    //$('<div>以上水果都好吃2</div>').insertAfter('ul'); //将div内容添加到ul同级的后面

    //$('ul').before('<div>以下水果你喜欢吃什么1</div>');  //在ul标签同级的前面添加div内容

    //$('<div>以下水果你喜欢吃什么2</div>').insertBefore('ul'); //将div内容添加到ul同级的前面

    //删除节点

    //$('ul li').eq(1).empty();  //清空选中元素的子节点

    //var $li = $('ul li').eq(2).remove();  //删除选中元素（包括自己和子节点）

    //$('ul').append($li); //将删除的li元素在ul内部的后面重新添加

    //克隆（复制）方法

    $('input').click(function(){

        var $p = $('p').clone(true); //克隆p标签，true表示把事件也克隆一份

        $('ul').after($p); //将克隆的p标签插入到ul内部的后面

    });

    //替换节点

    //$('p').replaceWith("<p>你好，请问下面的水果你喜欢吗？</p>");

    //$('p').replaceWith(function(){return "<p>你好，请问下面的水果你喜欢吗？？？？？</p>"});

    //$("<p>你好，请问下面的水果你喜欢吗？？？？？</p>").replaceAll('p');

    //包裹节点

    $('input').click(function(){

        //$('span').wrap('<div></div>'); //用div标签分别包裹每个span标签

        $('span').wrapAll('<div></div>'); //用div标签一起包裹所有span标签

        $('span').wrapInner('<b></b>');  //在span标签内部用b标签包裹内容

    });

</script>

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——元素节点操作

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

  6. jQuery(Dom节点操作)

  7. jQuery（七）：节点操作

    jQuery中节点操作主要分为以下几种: 查找节点. 创建节点. 插入节点. 替换节点. 复制节点. 删除节点. 一.查找节点 示例: <!DOCTYPE html> <html l ...

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

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

  9. 深入学习jQuery节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...

随机推荐

  1. centos7安装多媒体播放器SMPlayer

    转自:https://wiki.centos.org/TipsAndTricks/MultimediaOnCentOS7 http://blog.chinaunix.net/xmlrpc.php?r= ...

  2. 安装CentOS 7.4时服务器出现No Caching mode page found问题的解决方法

    2019-03-27 前提准备条件: 操作系统:centos 7.4:服务器使用U盘安装,U盘使用UltraISO制作启动盘 安装过程出现的问题: [sdb] No Caching mode page ...

  3. (转)CentOS7安装KVM虚拟机详解

    原文:https://github.com/jaywcjlove/handbook/blob/master/CentOS/CentOS7%E5%AE%89%E8%A3%85KVM%E8%99%9A%E ...

  4. Java设计模式-监听器模式

    监听器模式有三个要素——事件源.事件对象.监听器. 事件源:顾名思义,事件发生的源头,比如点击的按钮,属于被监听的对象: 事件对象:这个经常和事件源混淆,它经常被用来包装事件源,切记,它毕竟是个事件, ...

  5. c之指针与数组（1）

    1.指针与地址 一元运算符&可用于取一个对象的地址.例如:int i=1;&i就是计算机地址. 一元运算符*是间接寻址或者间接引用运算符.例如: int x=1,y:int ip*: ...

  6. 使用Symantec代码签名证书对代码进行签名的 5 个理由

    借助 Symantec Code Signing,在更多平台上将您的代码提供给更多客户,我们总结了5大理由告诉软件开发者在发布自己的软件时一定要购买Symantec 代码签名证书签名即将发布的软件. ...

  7. 【OpenCV】邻域滤波：方框、高斯、中值、双边滤波

    原文:http://blog.csdn.net/xiaowei_cqu/article/details/7785365 邻域滤波(卷积)   邻域算子值利用给定像素周围像素的值决定此像素的最终输出.如 ...

  8. 文本框改变之onpropertychange事件

    onpropertychange能够捕获每次输入值的变化. 例如:对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获. 在文本框 ...

  9. del

    Before writing it I spent a fair amount of time on reviewing our chat-log. How silly. asljdfajsodfss ...

  10. Fask中的路由－模版－静态文件引用 及宏定义与表单

    文档: flask: http://docs.jinkan.org/docs/flask/quickstart.html#redirects-and-errors jinja2 http://docs ...