JQ DOM节点篇

分手后的思念是犯贱 2022-08-01 11:19 140阅读 0赞

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

**创建呢很简单**

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

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

//首先是append方法
 $('body').append(box) //插入到body内部后面插入
 //可以用传入function
 $('body').append(function(index,html){ //索引和原本里面的内容
 return 'DOM';
 })
 //appendTo将指定元素移到指定元素内容的后面
 $('strong').appendTo('div')//将原来同级的放进div里，不用创建节点
 
 //prepend方法
 $('body').prepend(box)
 //这个也可以用function的
 $('body').prepend(function(index,html){ //索引和原本里面的内容
 return 'DOM';
 })
 //prependTo方法
 //跟上面没啥区别，不详细写了
 
 
 //after方法
 $('div').after('DOM')//实在外面的同级后面添加
 //他的function方法就不写了，都一样的
 
 //before方法
 $('div').before('DOM')//实在外面的同级前面添加
 //他的function方法就不写了，都一样的
 
 //insertAfter方法
 $('strong').insertAfter('div')//移入是不用创建节点的
 //insertBefore方法
 $('strong').insertBefore('div')

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

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

**复制节点**

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

**删除节点**

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

**替换**

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