jQ DOM操作之增删改

第一部分:创建

1.创建元素节点

$('<div>')
$('<div/>')
$('<div></div>')
$('<div>我是个div节点</div>')
$('<div class="div1">')
$('<div class="div2">我是class="div2"的div</div>')
$('<div><div>我的div内的div</div></div>')```



第二部分:节点插入

1.内部插入

  • .append 给儿子们最后面加个小兄弟 (结合appendTo()来记)
  • .prepend 给儿子们最前面加个私生大兄弟(结合prependTo()来记)

2.外部插入

  • .before 我的前面加个兄弟(结合insertBefore来记)
  • .after 我的后面加个兄弟(结合insertAfter()来记)

第三部分:节点删除

1.empty

  • .empty 身体被掏空

2.remove

  • .remove 自杀

3.detach

  • .detach 隐身


第四部分:节点的复制与替换

1.clone

  • .clone() 只克隆了结构,事件丢失
  • .clone(true) 结构、事件与数据都克隆

2.replace

  • .replaceWith 删除并替换节点(结合.replaceAll()来记)

3.wrap and unwrap

  • .wrap 每个都加个外衣
  • .unwrap 去掉包裹

4.wrapAll

  • .wrapAll() 被包裹成亲兄弟
  • .wrapAll( function ) 被包裹成表兄弟堂兄弟

5.wrapInner

  • .wrapInner( wrappingElement ):给集合中匹配的元素的内部,增加包裹的HTML结构
  • .wrapInner( function ) :允许我们用一个callback函数做参数,每次遇到匹配元素时,该函数被执行,返回一个DOM元素,jQuery对象,或者HTML片段,用来包住匹配元素的内容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 839评论 0 8
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 1,044评论 0 9
  • http://www.imooc.com/static/lib/jquery/1.9.1/jquery.js js...
    再见理想冷雨夜阅读 492评论 0 1
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,370评论 0 8
  • 天刀不是江湖,有你们才有我的江湖。 再不说点什么就真的忘了吧。人和人总是渐渐熟悉,渐渐陌生。为什么突然写这个,...
    企鹅是西瓜霜味阅读 465评论 0 0