jQuery节点操作

一、添加节点append，after，before，next，appendTo

1. append()
   <div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
</div>
   使用
   $('.a').append($('.c'));
   则会这样：
   <div class='a'> //<---you want div c to append in this
<div class='b'>b</div>
<div class='c'>c</div>
</div>

2. prepend()
   使用
   $('.a').prepend($('.c'));
   则结果这样：
   <div class='a'> //<---you want div c to append in this
<div class='c'>c</div>
<div class='b'>b</div>
</div>

3. after()
   同样的上述代码，使用
   $('.a').after($('.c'));
   结果：
   <div class='a'>
<div class='b'>b</div>
</div>
<div class='c'>c</div>//<—-this will be placed here

4. before()
   使用
   $('.a').before($('.c'));
   结果：
   <div class='c'>c</div> //<----this will be placed here
<div class='a'>
<div class='b'>b</div>
</div>

【总结】
  append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），
  after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）。

二、删除节点remove，empty
 remove() - 删除被选元素（及其子元素）
 empty() - 从被选元素中删除子元素

1. remove()函数用于从文档中移除匹配的元素。
   你还可以使用选择器进一步缩小移除的范围，只移除当前匹配元素中符合指定选择器的部分元素。
   与detach()相比，remove()函数会同时移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(detach()会保留)。
   该函数属于jQuery对象(实例)。

【说明】:remove()方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素，
不过除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除
ex1.
// 移除n6元素
$n6.remove( );
ex2.
// 移除带有类名”mark”的p元素
var $removedP = $p.remove( “.mark” );
ex3.
// 将移除了的n6追加到body元素内的起始位置
// 虽然在前面n6已经从文档中被移除
// 但不会将其从jQuery对象中移除，因此我们还可以使用该jQuery对象，将n6再次放入文档中
$n6.prependTo( “body” );
【注意】：
remove()函数会移除文档中匹配的元素，但不会将匹配元素从jQuery对象中移除，
不过remove()只会保留元素本身，其他的诸如元素所关联的附加数据和绑定事件等都会被移除。

二、遍历

1. next(selector)
   获得匹配元素集合中每个元素紧邻的同辈元素。
2. is(selector)
   据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
   eg1.
   <script>
$("li").click(function() {
var $li = $(this),
isWithTwo = $li.is(function() {
return $('strong', this).length === 2;
});
if ( isWithTwo ) {
$li.css("background-color", "green");
} else {
$li.css("background-color", "red");
}
});
</script>
   【问题？？】 $(‘strong’, this).length === 2，this作用？
3. each(callback)?集合操作
   对 jQuery 对象进行迭代，为每个匹配元素执行函数。
   eg1.
   $("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
4. map()集合操作
   把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
   eg1.
   <script>
var parentEls = $("b").parents()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("b").append("<strong>" + parentEls + "</strong>");
</script>
   parents()方法 ，依次从距离匹配元素最近的父元素向上获得所有父元素
   map()方法，由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
   get()方法，获得由选择器指定的 DOM 元素。
   join()方法，用数组的元素组成字符串