1.添加子元素
- append()/prepend()：给当前元素添加子元素，子元素可以是jq对象，也可以是Dom对象，还可以是html代码，功能类似原生js的appendChild()
//添加子元素到当前元素的末尾
<script>
$(function(){
var $box = $('.box')
//将jquery对象添加到div中
var $p = $('<p>我是添加的p标签</p>');//创建节点
$box.append($p);//将p节点添加到box元素的末尾
//将创建的dom元素添加到div中
var dom_p = document.createElement('p')
dom_p.innerHTML = '我是创建的dom元素'
$box.append(dom_p)
//直接将html代码字符串添加到div中
$box.append('<p>html代码字符串</p>')
})
</script>
2.添加兄弟元素
- before()/after()：为当前元素添加兄弟元素，参数可以是jQuery创建的节点，也可以是js创建的dom元素，还可以是html代码
<script>
$(function(){
var $box = $('.box')
//将jquery对象添加到div后
var $p = $('<p>我是添加的p标签</p>');//创建节点
$box.after($p);//将p节点添加到box元素的末尾
//将创建的dom元素添加到div后
var dom_p = document.createElement('p')
dom_p.innerHTML = '我是创建的dom元素'
$box.after(dom_p)
//直接将html代码字符串添加到div后
$box.after('<p>html代码字符串</p>')
})
</script>
3.移动元素
- appendTo()：将当前元素移动到其他元素中（变成其他元素的子元素）
var $p = $('<p>我是添加的p标签</p>');
$p.appendTo($('.box'));
4.清空元素内容
- empty()：这个方法可以用清空元素的一切内容，包括子元素和相关事件
$('.box').empty()
- 不推荐使用html()来清除内容，有可能造成内存泄漏
5.移除当前元素
$('.box').remove()
5.批量操作
- 相关方法：add(element,context)，相关参数和jquery获取元素一致
- 作用：当你要同时操作多个元素，但是这些元素有没有办法一次性获取的时候，就可以使用这个方法来添加新的元素到列队中
<body>
<div id="box">我是div</div>
<div class="parent">
<span>我是div中的span</span>
</div>
<span>我是外面的span</span>
<p>我是p</p>
</body>
<script>
$(function(){
$("div").add("span",".parent").add("p").css("color","red")
})
</script>
//等价于
$("div").css("color","red")
$(".parent span").css("color","red")
$("p").css("color","red")
5.克隆节点
- 相关方法：clone()，参数为布尔值，默认false
- false：默认，会克隆元素的本身和他的子节点，不包括js或者jquery代码添加的事件
- true：深克隆，除了克隆元素的本身和他的子节点，还包括js或者jquery代码添加的事件
//基本用法
var $c = $('.box>p').clone();//克隆box下所有的p标签
$('.box').after($c);//将克隆的元素插入到box的后面
- 通过js或者jquery代码添加的事件监听只有true才会被复制
<div class="box">
<p>不关我的事</p>
<p id="p2">我是被复制的p元素</p>
<p>it has nothing to do with me</p>
</div>
$(function() {
$('#btn').click(function() {
$('#pp').click(sayHello);
var $c1 = $('#p2').clone(true);//点击会触发sayHello()
var $c2 = $('#p2').clone(false);//点击无法触发sayHello()
$c1.appendTo($('.box'));
$c2.appendTo($('.box'));
})
})
function sayHello() {
alert('hello');
}
- 与原生cloneNode(布尔值)的方法对比
false：默认，只复制元素本身，而不包含子元素
true：深复制，包括元素本身和他的后代元素
