内部插入
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());
})