JQ DOM节点篇

嗯，今天呢还是跟着李炎恢老师的视频进行下一篇，有关节点的操作，主要包含以下几种方法！
创建，克隆，删除，下面就一个一个举例子！！

创建呢很简单

 var box=$('<div id="box"></div>')

创建完之后并不是直接显示到页面中，需要我们手动的插入到页面中！
那我们就需要一个插入的方法

//首先是append方法
$('body').append(box)            //插入到body内部后面插入
//可以用传入function
$('body').append(function(index,html){//索引和原本里面的内容
    return '<p>DOM<p>';
})
//appendTo将指定元素移到指定元素内容的后面
$('strong').appendTo('div')//将原来同级的放进div里，不用创建节点

//prepend方法
$('body').prepend(box)
//这个也可以用function的
$('body').prepend(function(index,html){//索引和原本里面的内容
    return '<p>DOM<p>';
})
//prependTo方法
//跟上面没啥区别，不详细写了


//after方法
$('div').after('<p>DOM<p>')//实在外面的同级后面添加
//他的function方法就不写了，都一样的

//before方法
$('div').before('<p>DOM<p>')//实在外面的同级前面添加
//他的function方法就不写了，都一样的

//insertAfter方法
$('strong').insertAfter('div')//移入是不用创建节点的
//insertBefore方法
$('strong').insertBefore('div')

包裹节点是向元素包裹一层HTML代码或者是包裹一层DOM对象节点

$('div').wrap('<strong><strong>')//在div外层就会多了这个标签
$('div').wrap($('strong').get(0))//里面传入的是原生JS节点
$('div').wrap($(document.createElement('strong'))//也可以使用原生方法
$('div').wrap(function(index){
    return '<strong></strong>';
})
//unwrap是用来移除的
$('div').unwrap()//当然如果你是有两层包裹的话，需要两个
//wrapAll方法
$('div').wrapAll('<strong><strong>')//如果有多个div就会被一对<strong>包裹，而wrap是分别给每一个包裹
$('div').wrapAll($(document.createElement('strong'))
//wrapInner
$('div').wrapInner('<strong><strong>')//是在里面包裹，他也有wrap一样的其他传参，就不多写了

复制节点

$('div').clone().appenTo('body')//如果传入true参数，就会把复制节点的事件处理克隆下来

删除节点

$('div').remove('.box')//可以传参的，删除某些特定的，并且删除后再回复事件处理不存在
$('div').detach('.box')//删除后在添加保留事件处理
$('div').empty()//清空，但div保留

替换

$('div').replaceWith('<span>DOM</span>')
$('<span>DOM</span>').replaceAll('div')//都是将div替换成span