dom节点的操作
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dom节点的操作相关的知识，希望对你有一定的参考价值。
内部插入
1、（结尾）append 方法 、 appendto方法（为了方便链式操作）
（开头）prepend方法
$(‘#div1‘).append($(‘#div2‘)); //将div2 插入到 div1 里面的末尾
?
$(‘#div1‘).appendto($(‘#div2‘)); //将div1 插入到 div2 里面的末尾
?
$(‘#div1‘).prepend($(‘#div2‘)); //将div2 插入到 div1 里面的开头
?
$(‘#div1‘).prependto($(‘#div2‘)); //将div1 插入到 div2 里面的开头
外部操作
（）after方法、before方法
（）insertafter方法、insertbefore方法
$(‘#h2‘).after($(‘#div2‘)); //将div2 插入到 h2 的末尾
?
$(‘#h2‘).before($(‘#div2‘)); //将div2 插入到 h2 的前面
包裹的方法 wrap方法
替换的方法replacewith（）方法 里面可以填入标签
$(‘#div1‘).replaceWith($(‘#div2‘)); //div1被div2替换
$(‘#div2‘).replaceAll($(‘#div1‘)); //div2被div1替换
删除
$(‘#div1‘).empty(); //将div1里面的内容删除
?
复制 clone
筛选
过滤
eq() //选取某一个，结果为jQuery对象 注意与get（）区分，get（），结果为原生对象
first() //获取第一个
last() //获取最后一个
hasClass(‘类名‘) //有的话，返回，true 没有的话，返回false
?
事件处理(冒泡阶段)
on() //绑定事件
function fn(){
console.log(‘hello‘);
}
?
$(‘p‘).on(‘click‘,fn);
?
off() //取消绑定事件
$(‘p‘).off(‘click‘,fn);
?
?
ready() //页面加载完成事件
$(document).ready(function(){
})
事件委托
ul.onclick=function(event){
if(event.taget.nodeName===LI){
console.log(event.taget.innerhtml);
}
}
?
?
$(‘#ul‘).on(‘click‘,‘li‘,function(){
console.log($(this).html());
})
以上是关于dom节点的操作的主要内容，如果未能解决你的问题，请参考以下文章