jquery总结04-DOM节点操作

Posted 2020-08-20 crystalhuhu

一般js操作节点

①创建节点（元素文本）document.createElement  innerhtml

②添加属性 setAttribute

③加入文档 appendChild

操作繁琐还有兼容性问题

jquery操作节点

①$(‘<div class="a">jquery</div>")  直接在$("")里写元素 文本 属性

②加入文档支持了好多函数

向下添加节点

$(‘.a‘).append(content) 在a元素内的最后添加内容  $(content).appendTo(‘.a‘)只不过换了一种方式

$(‘.a‘).prepend(content) 在a元素内的最开始添加内容  $(content).prependTo(‘.a‘)

同级添加节点

$(‘.a‘).after(content) 在a元素同级后添加内容  $(content).insertAfter(‘.a‘)

$(‘.a‘).before(content) 在a元素同级后添加内容  $(content).insertBefore(‘.a‘)

向上父及包裹节点

$(‘.a‘).wrap("<div></div>") 给匹配的元素每一个外部包一有个html结构  每个都被包裹了 

$(‘.a‘).wrapInner("<div></div>") 给匹配的元素每一个内部包裹一个html结构 

$(‘.a‘).wrapAll("<div></div>") 给匹配的元素集合外层包裹一个html结构 包裹了最外层的

$(‘.a‘).unwrap("<div></div>") 删除父元素

删除节点

$(‘.a‘).empty()删除内容，自己还在， 都可以传残缩小范围 事件也删除

$(‘.a‘).remove()都删除了，自己也不在了，都可以传残缩小范围 事件也删除

var a=$(‘.a‘).detach()  清除结构 事件还在

$(‘body‘).append(a) 恢复清除的结构

复制节点

$(‘.a‘).clone() 复制结构

$(‘.a‘).clone(true) 复制结构+事件

替换节点

$(‘.a‘).replaceWith(newContent) newContent替换a元素

$(newContent).replaceAll(‘.a‘) newContent替换a元素