jQuery删除节点,克隆,遍历

116 阅读1分钟

删除节点

  • 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()
		});