jquery中DOM

节点包裹

wrap()
 (1)$().wrap(html) 将选择的节点用指定的元素包装
$('p').wrap('<div></div>');

 (2)多层包裹
 $('p').wrap('<div><strong></strong></div>');

 (3)带内容
 $('p').wrap('<div>1111</div>');

 (4)使用创建节点的方式
$('<div></div>') 可以使用
document.createElement('div') 可以使用
 $('p').wrap($('<div></div>'));

(5)带内容的json形式
 $('p').wrap(function () {
//  创建一个节点
 // 设置此节点
// 返回此节点

return '<div></div>';
});

$('p').wrap('<div><strong></strong></div>');

}

 去除包裹
 unwrap() 去除元素的直接父节点
 $().unwrap()
 从内往外去除 逐层去除 需要去除多少层 就取消多少次
$('p').unwrap();
$('p').unwrap();

用html将匹配到的所有元素包裹起来

$().wrapAll(html)
 
$('p').wrapAll('<div></div>');

//$().wrapInner()
// 用html将选择的标签中的内容包裹起来
$('p').wrapInner('<div></div>');

(1)标签的创建

console.log($('<li>aa</li>')[0])

(2)父子关系的节点追加:前置/后置 后置追加: 父节点.append(被追加的元素)

 新的节点
 $('#xi').append('<li>小白龙</li>')

追加已有的节点:节点的物理位置会发生改变
 $('#xi').append($('#cc'));

前置追加:被追加的节点.prependTo(父节点)
$('<li>周瑜</li>').prependTo($('#san'));

物理位置的改变
$('#xi li:eq(1)').prependTo($('#san'));

兄弟关系的追加:
兄弟节点.after(被追加的节点) 后置

$('#kong').after(l1);

已存在
$('#kong').after($('#cc'))

前置追加
$('#kong').before(l1);

被追加的节点.insertBefore(兄弟节点); 

l1.insertBefore($('#kong'));

后置
l1.insertAfter($('#kong'));

节点替换:删除原有的节点 将新的节点放在原有的位置上
被替换的节点.replaceWith(新的节点)
$('#kong').replaceWith('<li>大圣</li>');
$('.inner').replaceWith('<li>大圣</li>');

 使用已有的标签替换 

$('.inner').replaceWith($('#cc'));

新的节点.replaceAll(被替换的节点);
$('<li>黄盖</li>').replaceAll($('#cc'));

删除

节点的删除:
(1)empty() :清除选中节点的所有子节点
$('#hu').empty();

 (2)remove() 删除掉选中的元素节点

$('li:last').remove(); //删除自身以及包含的所有子节点

复制节点

选中的节点.clone(布尔值)
布尔值如果为真:不仅复制节点还将节点的所有事件也复制
 如果不传值, 默认只复制节点不包含事件
var copyWu = $('#song').clone(true);
$('#hu').append(copyWu);

查找节点 查找父元素  parent(html)

查找dom结构上的直接父元素
如果多个h3存在多个直接包含关系, 根据传入的html参数进行匹配
$('h3').parent().css('color', 'orange');

 parents(html)
 查找指定元素的所有父元素, 如果有参数, 就根据传入的html参数进行匹配
 $('h3').parents('div').css('color', 'cyan');

 parentsUntil(html) 查找父元素直到指定的标签为止
 不包含until到的元素
 $('h3').parentsUntil('div').css('color','orange');
 console.log($('h3').parentsUntil('i'));

children() 只查找直接的子元素
 $('div').children('span').css('color', 'orange');//等价于$('div>span');

find() 直接&间接
$('div').find('span').css('color','cyan');
 $('div span');

 next() 下一个
$('#bai').next().css('color', 'pink');

siblings() 其他的兄弟关系节点
$('#bai').siblings().css('fontSize', '30px');

prev()上一个
$('#bai').prev().css('background', 'cyan');
}