jqeury的节点操作
1.添加节点
添加到父元素内部,内部插入:将节点添加到选中标签内部,包含关系
通过父节点添加:
$父节点.append($(“孩子节点”))
$父节点.prepend$(“孩子节点”))
$(“孩子节点”).appendTo($父节点)
$(“孩子节点”).prependTo($父节点)
通过已存在的子节点增加:
$(已存在的兄弟).after($obj)
$(已存在的兄弟 ).before($obj)
$obj.insertAfter($已存在的兄弟)
$obj.insertBsefore($已存在的兄弟)
//1. append 在父元素末尾插入子元素
$lists.append($("<li>我是append添加的</li>"));
//2. appendTo 将子元素插入到父元素的末尾
$("<li>我是appendTo添加的</li>").appendTo($lists);
//3. prepend 在父元素的头部插入子元素
$lists.prepend($("<li>我是prepend添加的</li>"));
//4. prependTo:将子元素插入到父元素的头部
$("<li>我是prependTo添加的</li>").prependTo($lists);
添加到父元素内部了,外部插入,将节点添加到选中标签外,同级关系
- A.after(B):在A元素后面添加兄弟元素B
$lists.after($("<p>我是通过after添加的</p>"));
2.A.insertAfter(B):将A元素添加到B元素的后面
$("<p>我是通过insertAfter添加的</p>").insertAfter($lists);
- A.before(B):在A元素的前面添加B元素
$lists.before($("<p>我是通过before添加的</p>"));
4.A.insertBefore(B):将A添加到B元素的前面
$("<p>我是通过insertBefore添加的</p>").insertBefore($lists);
dom结构:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
效果图:
2.元素的包裹
dom结构:
<li>a1</li>
<li>a2</li>
<li>a3</li>
1 wrap元素包裹(所有匹配到的li都会被包裹)
$('li').wrap($('<ol></ol>'));
结果:
2.unwrap 解除元素的包裹
$('li').unwrap($('<ol></ol>'));//上面添加的<ol></ol>全部被清除
3.wrapAll 将所有匹配的元素使用一个元素进行包裹
$('li').wrapAll($('<ol></ol>'));
结果:
4.wrapInner 将匹配的元素和子元素之间使用一个元素进行包裹
$('li').wrapInner($('<b></b>'));
结果:
3.元素的替换
1.元素替换 replaceWith
dom结构:
<li>1</li>
<li>1</li>
<li>1</li>
$('li').replaceWith($('<b>2</b>'));//匹配到的li标签都会替换为b标签
结果:
2.元素替换 replaceAll
$('<h1>3</h1>').replaceAll($('li'));
4.元素的删除
dom结构;
<li>香蕉</li>
<p>榴莲</p>
1.empty:移除元素内的所有节点,不会删除元素节点本身
$('li').empty();
结果:
2.remove:移除元素内部的所有子节点,包括自己本身
$('p').remove();//p标签本身也被移除
结果:
5.克隆
clone(布尔值)说明:js的克隆不能克隆事件,jQuery可以克隆事件
true:会克隆事件
false:不会克隆事件,默认false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">点我</button>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
// 绑定事件
$('#btn').click(function() {
console.log('人不狠站不稳');
});
// 克隆btn
$('#btn').clone().css('color', 'red').appendTo($(document.body));
$('#btn').clone(true).css('color', 'blue').appendTo($(document.body));
</script>
</body>
</html>