jQuery中的DOM操作(三)

一、查找节点    【返回jQuery对象】
$(选择器字符串);    
使用jQuery函数，里面参数为选择器字符串，查询符合条件的BOM对象并返回jQuery对象
eg：

    $('div.one span:first');    //查询所有类名为one的div里面的所有后代span里面的第一个span元素

二、创建节点
$(HTML文本字符串);
使用jQuery函数，里面参数为要创建的节点字符串，返回jQuery对象
eg:

    var $newNode = $("<span>hello<span>");    //创建一个span节点，里面内容为hello

三、插入节点    
对于下面这些方法的一些相关说明：
a、参数：一个或多个DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象
b、如果将页面上的元素插入到某元素内，则该插入的元素会从页面上移动过去，原来页面上的元素则会不存在【同一元素节点在页面上是唯一的】

1、插入节点作为最后孩子
append()    【在自身内部插入其它节点作为最后孩子】
向调用该函数的jQuery对象中所有DOM节点内容最后面插入该节点，即将该节点作为他们的最后孩子插入
eg：

    var $node = $("<span>hello</span>");
    $('div').append($node);        //将$node插入到所选取的div内容最后，作为div的最后一个孩子

appendTo()    【将自身插入到其它节点内容中作为最后孩子】
调用方法者与需要插入的节点和append()恰好相反
eg：

    $("<span>hello</span>").appendTo($('div'));    //将span节点插入到所有匹配的div中并作为div的最后孩子

2、插入节点作为开始孩子
prepend()    【在自身内部插入其它节点作为开始孩子】    
向调用该函数的jQuery对象中所有DOM节点内容最前面插入该节点，即将该节点作为他们的最开始的孩子插入
eg：

    $('div').appendTo($("<span>hello</span>"));    //将span节点插入到所有匹配的div中并作为div的开始孩子

prependTo()    【将自身插入到其它节点内容中作为开始孩子】    
调用方法者与需要插入的节点和prependTo()恰好相反
eg:

    $("<span>hello</span>").prependTo($('div'));    //将span节点插入到所有匹配的div中并作为div的开始孩子

3、插入节点作为兄弟元素
after()    【将节点插入到自身后面作为自己后面的兄弟元素】
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点插在每个匹配元素的后面。

insertAfter()   【将自身插入到节点后面作为节点后面的兄弟元素】
调用方法者与需要插入的节点和after()恰好相反

before()    【将节点插入到自身前面作为自己前面的兄弟元素】
在匹配元素的前面插入内容（外部插入）作为其兄弟节点插在集合中每个匹配元    素前面。

insertBefore() 【将自身插入到节点前面作为节点前面的兄弟元素】
调用方法者与需要插入的节点和before()恰好相反

四、删除节点
remove([selector]) 【返回被删除的节点对象】
删除指定元素并删除其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中不包含有原来的事件及相关的jQuery数据)
eg：

    $('div').remove('.one');    //删除类名为one的div
    $('div.one').remove();    //删除类名为one的div

detach([selector])    【返回被删除的节点对象】
删除指定元素但会保留其绑定的事件及与该元素相关的jQuery数据(即其返回的删除节点对象中包含有原来的事件及相关的jQuery数据)
eg：

    $('div:not(".one")').remove(':first');    //删除类名不为one的div中的第一个div
    $('div.one').remove();    //删除类名为one的div

empty()  【清空元素内容】
无参数，移除匹配元素的所有子节点
eg：

    $('div:contains("one")').empty();    //清空的div内容中包含文本one的div元素内容