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');
}
