一.插入操作

  1.  父元素.append(子元素)

  追加某元素,在父元素中添加新的子元素, 子元素可以为: stirng / element (js对象) / jquery 元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$("ul").append("<li>haha</li>");
$("ul").append("oli");
$("ul").append($("#app"));

  如果追加的是jquery对象那么这些元素将从原位置上消失, 简言之,就是一个移动操作

  2.  子元素.appendTo(父元素)

  追加到某元素 子元素添加到父元素 

  $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

  要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

  3.  父元素.prepend(子元素);

  前置添加, 添加到父元素的第一个位置

  $('ul').prepend('<li>我是第一个</li>')

  4.  子元素.prependTo(父元素)

  前置添加, 添加到父元素的第一个位置

  $('<a href="#">路飞学诚</a>').prependTo('ul')

  5.  兄弟元素.after(要插入的兄弟元素)

     要插入的兄弟元素.inserAfter(兄弟元素);

  在匹配的元素之后插入内容

  $('ul').after('<h4>我是一个h3标题</h4>')
  $('<h5>我是一个h2标题</h5>').insertAfter('ul')

  6.  兄弟元素.before(要插入的兄弟元素)

     要插入的兄弟元素.innserBefore(兄弟元素)

二. 克隆操作

  $(选择器).clone()

  克隆匹配的DOM元素

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

  // 1.clone():克隆匹配的DOM元素
// 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})

三.修改操作

  1.  $(selector).replaceWith(content)

  将所有匹配的元素替换成指定的string, js对象, jquery对象

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

  2.  $("<p>哈哈哈</p>")replaceAll("h2")

  替换所有, 将所有的h2标签替换成p标签.

  $('<br/><hr/><button>按钮</button>').replaceAll('h4')

四,删除操作

  1.  $(select).remove()

  删除节点后, 事件也会删除(删除 了整个标签)

  $('ul').remove();

  2.  $(select).datach()

  删除节点后,事件会保留

 var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)

  3.  $(select).empty()

  清空选中元素中的所有后代节点

  //清空掉ul中的子元素,保留ul
  $('ul').empty()

  4.  $(select).html("")

     $(select).text("")

  用空的内容替换

  

  

  

  

jQuery 文档操作的更多相关文章

  1. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  2. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  3. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  4. jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  5. jQuery 文档操作 - prependTo() ,appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  6. 前端之JQuery:JQuery文档操作

    jquery之文档操作 一.相关知识点总结1.CSS .css() - .css("color") -> 获取color css值 - .css("color&qu ...

  7. jQuery文档操作--append()、prepend()、after()和before()

       append(content|fn)  概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数    content  要追 ...

  8. jQuery文档操作--empty()和remove()

    empty() 概述 删除匹配的元素集合中所有的子节点 <!DOCTYPE html> <html> <head> <meta charset="U ...

  9. jQuery 文档操作 - insertAfter() ,insertBefore(),after(),before() 方法

    这个方法跟prependTo()和appendTo()不一样的地方在于,一个是仍然插入到元素内部,而insertAfter和insertBefore是插入到元素外部. 这里拿insertBefore来 ...

随机推荐

  1. 常见的dos命令(及抒写方式)

    1.dir:列出当前目录下的主体及文件夹. 2.md:创建目录. 3.rd:删除目录.{注意:rd不能删除非空的文件夹,并且只能用于文件夹的删除} 3.cd :进入指定目录. 4.cd . . :退出 ...

  2. anaconda jupyter

    本文主要讲解在Ubuntu系统中,如何在Anaconda下安装TensorFlow以及配置Jupyter Notebook远程访问的过程. 在官方文档中提到,TensorFlow的安装主要有以下五种形 ...

  3. Dict字典的操作

    字典的操作 1.字典新增键值对 已存在内容的字典新增 alient_0 = {"color":"green",position:10} alient_0[&qu ...

  4. mysql修改配置文件

    在Apache, PHP, MySQL的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接影响到论坛的速度和承载量!同 ...

  5. Introduction to CMMI培训总结

     6月3日到5日,用了3天时间,參加了cmmi-dev的简单介绍课程培训,參加培训真的比上班都要累非常多啊!每天早上9点到下午6点.中午吃饭加歇息总共1小时.晚上还有作业要做,每天睡觉都要到11点 ...

  6. 16进制颜色字符串转为UIColor

    //16进制颜色(html颜色值)字符串转为UIColor +(UIColor *) hexStringToColor: (NSString *) stringToConvert {      NSS ...

  7. fgets()函数和sscanf()函数的使用方法

    fgets 百度百科:从文件结构体指针stream中读取数据,每次读取一行.读取的数据保存在buf指向的字符数组中.每次最多读取bufsize-1个字符(第bufsize个字符赋'\0'),假设文件里 ...

  8. fontend-githubs

    https://github.com/dypsilon/frontend-dev-bookmarks

  9. YunOS曙光初现----看好阿里云OS----阿冬专栏!!

    阿里云os - YunOS 阿里云OS(YunOS)是阿里巴巴集团的智能手机操作系统,依托于阿里巴巴集团电子商务领域积累的经验和强大的云计算平台,基于LINUX开发. 魅族4阿里yun OS版已上市. ...

  10. c++中字符输入函数getline、cin.getline区分

    1.cin>>s; s能够是:string  s.char s[]; 这个是ostream中的函数.遇到' '(空格) , '\n'(换行),就会自己主动结束,因此假设用cin读取字符串, ...