删除节点
- remove():删除整个节点
$('button').click(function(){
$('li:eq(0)').remove();
})
- detach():删除节点,但是节点绑定的事件,方法还可以用
$('button').click(function(){
$('li:eq(0)').detach();
})
- empty():只清空节点内容,方法事件都还在
$('button').click(function(){
$('li:eq(0)').empty();
})
遍历
each( ) each 回调函数里面的第一个参数表示元素的索引
回调函数里面的第二个参数表示每一个遍历的原生元素❤
/* 点击 标题 祝福东奥 把li所有的内容都变成 我要祝福东奥 使用each方法遍历 */
$('h1').click(function(){
$('li').each(function(i,e){
$(e).text(`我要祝福东奥${i}`)
})
})
filter 过滤 在集合元素中过滤出指定的元素
let lis = $('li').filter('.tt1');
console.log(lis);
parent():获取元素的父级元素
let f = $('.tt1').parent()
console.log(f);
parents():返回元素的所有祖先元素
let fs = $('.tt1').parents();
console.log(fs);
next() 用于获取紧邻匹配元素之后的元素 有多个.tt 会返回一个紧邻匹配元素之后的元素的集合
let d = $('.tt').next()
console.log( d );
children()方法可以用来获取元素的所有子元素
let lis = $('ul').children('.tt')
console.log(lis.length);
用于获取位于匹配元素前面和后面的所有同辈元素 siblings() 除了他自己 前面后面的都被选中了
let lis = $('.tt1').siblings()
console.log(lis);
用于获取紧邻匹配元素之前的元素 prev()
let d = $('.yu').prev()
console.log( d );
克隆
- clone()可以复制元素
- clone(true)里面为true时方法,以及绑定的事件都可以被复制
- clone(flast)或者里面为空时,只可以复制元素,方法和事件不可以被复制
$('.add').click(function () {
let xnz = $('#listbox dl:last').clone(true);
console.log(xnz)
$('#listbox').prepend(xnz)
});
$('.del').click(function () {
let t = $(this).parent().parent();
t.remove()
});