进阶篇：jQuery DOM操作（20-1）

饥人谷学习进阶第 20 天

创建元素

只需要把DOM对象或者html字符串传入 $ 方法即可返回一个jQuery对象

var obj = $('<div><p>hello jQuery</p></div>')

---

添加元素

.append(content[,content]) / .append(function(index,html))

1.可以一次添加多个内容，内容可以是 DOM对象、HTML string、jQuery对象
2.如果参数是 function，function可以返回 DOM对象、HTML string、jQuery对象，参数是集合中的元素位置与原来的html值

$('body').append("<p>hello</p>","<p>jQuery</p>")

.appendTo(target)

把对象插入到目标元素尾部，目标元素可以是 selector、DOM对象、HTML string、元素集合、jQuery对象

$('h1').appendTo($('.container'))
$("<p>hello jQuery</p>").appendTo(".inner")

.prepend(content[,content]) / .prepend(function(index,html))

向对象头部追加内容，用法和append类似，内容添加到最开始

$('.container').prepend("<p>header</p>")

.prependTo(target)

把对象插入到目标头部，用法和prepend类似

$("<p>header</p>").prependTo(".container")

.before([content][,content]) / .before(function)

在对象前面（不是头部，而是外面，和对象并列同级）插入内容，参数和append类似

$('.child1').before('.child2')

.insertBefore(target)

把对象插入到target之前（同样不是头部，而是同级）

$( "h1" ).insertBefore( $( ".container" ) )

.after([content][,content]) / .after(function(index))

和before相反，在对象后面（不是尾部，而是外面，和对象并列同级）插入内容，参数和append类似

$( ".container" ).after( $( "h1" ) )

.insertAfter(target)

和insertBefore相反，把对象插入到target之后（同样不是尾部，而是同级）

$('footer').insertAfter('main')

---

删除元素

.remove([selector])

删除被选元素（及其子元素）

$('h1').remove()

也可以添加一个可选的选择器参数过来过滤匹配的元素

$('.child').remove('.select')

.empty()

清空被选择元素内所有子元素

$('body').empty()

.detach()

和 .remove() 一样，除了 .detach() 保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又要将该元素插入DOM时适用。

---

包裹元素

wrap(wrappingElement) / .wrap(function(index))

为每个对象包裹一层html结构，可以是 selector、element、HTML string、jQuery对象

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" )

结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement)

把所有匹配对象包裹在同一个HTML结构中

$( ".inner" ).wrapAll( "<div class='new' />");

结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(wrappingElement) / .wrapInner(function(index))

包裹匹配元素内容

$( ".inner" ).wrapInner( "<div class='new'></div>");

结果

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

.unwrap()

把DOM元素的parent移除

pTags = $( "p" ).unwrap(); // 返回的是parent里面的内容

.html([string])

读写两用的方法，用于获取/修改元素的 innerHTML

1. 当没有传递参数的时候，返回元素的 innerHTML
2. 当传递了一个string参数的时候，修改元素的innerHTML为参数值

$('h1').html()   // hello world
$('h1').html("hello jQuery")

后续这种读写两用的方法很多，原理类似

1. 如果结果是多个进行赋值操作的时候给每个结果都赋值
2. 如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

.text()

和html方法类似，操作的是DOM的 innerText 值