jQuery DOM操作 增删改
一、插入
1. 插入到指定元素之前
.insertBefore()
.before()
2. 插入到指定元素之后
.insertAfter()
.After()
3. 在父级子元素最后面插入
.appendTo()
.append()
4. 在父级子元素最前面插入
.prependTo()
.prepend()
1、插入到指定元素之前
回顾原生的 parentNode.insertBefore(a, b)
insert A
Before B
意思插入的A，在B的前面
.insertBefore()
jQuery简化了一下，选中 .content 插入到的 .box1 前面（a插入到b前面）
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>插入到指定元素之前</title>
<style>
.wrapper{border:1px solid #ccc;width:200px;padding:10px;}
.wrapper div{width:200px;height:100px;}
.wrapper .box1{background:orange;}
.wrapper .box2{background:red;}
.content{background:yellow;width:200px;height:50px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="content">content</div>
<script>
$('.content').insertBefore('.box1');
// <div class="wrapper">
// <div class="content">content</div>
// <div class="box1">box1</div>
// <div class="box2">box2</div>
// </div>
</script>
</body>
</html>插入前 .content 原来样式是 height:50，插入后样式变成 height:100
.before()
.insertBefore() 另外一种实现形式 .before() 方法，两个方法的功能是一样的，只不过要调换一下，前面是 .box1 后面是 .content
$('.box1').before($('.content'));注意：
.before() 方法的参数不能是"字符串"（css选择器）必须填 jQuery 对象，如果填字符串".content"，会当做"字符串数据"放.box1前面
为什么一个功能要提供两种方法？
这和 jQuery 链式调用这种方式的习惯有关，看谁是主语，想针对谁进行链式操作，就可以把谁放前面
比如像操作谁就把谁放到前面
1. .css()方法操作的 .content
$('.content').insertBefore('.box1').css({color:'red'});
2. css() 操作的是 .box1
$('.box1').before($('.content')).css({color:'red'});
2、插入到指定元素之后
.insertAfter()
$('.content').insertAfter('.box1') 是把 .content 插入到 .box1 元素之后
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>插入到指定元素之后</title>
<style>
.wrapper{border:1px solid #ccc;width:200px;padding:10px;}
.wrapper div{width:200px;height:100px;}
.wrapper .box1{background:orange;}
.wrapper .box2{background:red;}
.content{background:yellow;width:200px;height:50px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="content">content</div>
<script>
$('.content').insertAfter('.box1');
// <div class="wrapper">
// <div class="box1">box1</div>
// <div class="content">content</div>
// <div class="box2">box2</div>
// </div>
</script>
</body>
</html>insertAfter 成哥的基础课留过作业
.After()
.after() 与 .insertAfter() 是一样的
$('.box1').after($('.content'));这些方法都相当于剪切操作，
选中谁以后，让他的位置发生一些变化，减切过去了
3、在父级子元素最后面插入
.appendTo()
$('.content').appendTo('.wrapper') 是让 .content 添加到 .wrapper 里面
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>在父级子元素最后面插入</title>
<style>
.wrapper{border:1px solid #ccc; width:200px; padding:10px;}
.wrapper div{width:200px; height:100px; }
.wrapper .box1{background:orange;}
.wrapper .box2{background:red;}
.content{width:200px;height:50px;background:yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="content">content</div>
<script>
$('.content').appendTo('.wrapper');
// <div class="wrapper">
// <div class="box1">box1</div>
// <div class="box2">box2</div>
// <div class="content">content</div>
// </div>
</script>
</body>
</html>.appendTo() 相当于原生的 appendChild
1. appendTo 从英语的叫角度是添加到
2. js原生的 parendNode.appendChild() 方法前面是父级
.append()
.append() 和原生的 appendChild 一样，但是参数要用jQuery对象，不能用字符串
$('.wrapper').append($('.content'));参数不用jQeruy对象写"字符串"，意思就变成了创建一个"字符串"，然后插入进去
$('.wrapper').append('.content');
// <div class="wrapper">
// <div class="box1">box1</div>
// <div class="box2">box2</div>
// .content
// </div>
// <div class="content">content</div>.appendTo() 和 .append() 是在父级子元素最后加元素
下面的 .prependTo() 和 .prepend() 是在父级子元素前面加
4、在父级子元素最前面插入
.prepend()
在父级子元素最前面插入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>在父级子元素最前面插入</title>
<style>
.wrapper{border:1px solid #ccc; width:200px; padding:10px;}
.wrapper div{width:200px; height:100px;}
.wrapper .box1{background:orange;}
.wrapper .box2{background:red;}
.content{width:200px; height:50px; background:yellow;}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="content">content</div>
<script>
$('.wrapper').prepend($('.content'));
// <div class="wrapper">
// <div class="content">content</div>
// <div class="box1">box1</div>
// <div class="box2">box2</div>
// </div>
</script>
</body>
</html>.prependTo()
效果与 .prepend() 是一样的
$('.content').prependTo('.wrapper');二、删除
这两个方法都是删除元素的意思，但是两个方法的区别在事件上
.remove()
.detach()
.remove()
选中 $('div') 然后 .remove() 删除，删除后返回的是删掉的div，其实就是剪切掉了
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>.remove()</title>
<style>
div{width:100px;height:100px;background:orange;}
</style>
</head>
<body>
<div></div>
<script>
console.log($('div').remove()); // jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
</script>
</body>
</html>归根结底还是链式操作，最后还是返回选中的div
先绑定一个事件，删除后再插回到body，会发现事件没有了
$('div').click(function(){
alert('弹出');
});
$('div').remove().appendTo($('body'));.detach()
detach 删除就不一样，删除后再添加回去事件还在
$('div').click(function(){
alert('弹出');
});
$('div').detach().appendTo($('body'));.remove() 和 .detach()就是这点区别
三、又回到$()
之前 $() 用来选择元素，现在用来创建元素，直接映射原生的 document.createElement() 方法
结构可以写的很复杂有点像 .html()，只不过 .html() 是在什么里面添加，$()是凭空创建
// 创建完的dom对象返回的是包装好的jQuery对象
$('<div></div>').appendTo($('body'));
// 也可以写单标签也不报错
$('<div/>').appendTo($('body'));
// 可以把结构写的很复杂
$('<div><span style="color:red">红色</span></div>').appendTo($('body'));
// 写两个同级的标签也是可以，随心所欲的写
$('<div><span style="color:red">红色</span></div><p>p标签</p>').appendTo($('body'));四、包裹
.wrap()
.wrapInner()
.wrapAll()
.unWrap()
.wrap()
wrap包裹层包装的意思，.wrap() 方法给选中的元素添加一个父级，把标签包起来，参数可以是字符串
<div class="demo" style="background-color:aqua;height:100px;"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrap('<div style="background-color:orange;padding:10px;"></div>');
// <div style="background-color:orange;padding:10px;">
// <div class="demo" style="background-color: aqua;height:100px;"></div>
// </div>
</script>参数也可以是创建一个 jQuery 对象的方式
$('.demo').wrap($('<div style="background-color:orange;padding:6px;"></div>'));
// <div style="background-color:orange;padding:6px;">
// div class="demo" style="background-color: aqua;height:100px;"></div>
// </div>参数还可以用原生dom
<div class="demo" style="background-color: aqua;height:100px;"></div>
<div class="box" style="background-color:orange;padding:6px;"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrap($('.box'));
// <div class="box" style="background-color:orange;padding:6px;">
// <div class="demo" style="background-color: aqua;height:100px;"></div>
// </div>
// <div class="box" style="background-color:orange;padding:6px;"></div>
</script>注意，是复制不是剪切，.box签还在原位置
参数除了jQuery对象、字符串还可以填函数，$('.demo') 前面选一堆，然后函数循环，每次返回值包裹父级
<div class="demo" style="background-color:aqua;height:100px;"></div>
<div class="demo" style="background-color:aqua;height:100px;"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrap(function(index){
// index是索引
return '<div class="wrapper_' + index + '"></div>';
});
// <div class="wrapper_0">
// <div class="demo" style="background-color:aqua;height:100px;"></div>
// </div>
// <div class="wrapper_1">
// <div class="demo" style="background-color:aqua;height:100px;"></div>
// </div>
</script>参数直接写"字符串标签"也能起到循环包裹的作用，只不过填函数能让包裹更灵活一些
$('.demo').wrap('<div style="padding:10px;"></div>');.wrapInner()
.warp()可以理解是warpOuter，.wrapInner()是给内部的标签包裹一层
<div class="demo">
<span></span>
<span></span>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrapInner('<div></div>');
// <div class="demo">
// <div>
// <span></span>
// <span></span>
// </div>
// </div>
</script>在写高级插件的时候可以用
两组.demo元素，$('.demo')选中的是一个集合，还是内置循环，分别把span和p包裹
<div class="demo">
<span></span>
<span></span>
</div>
<div class="demo">
<p></p>
<p></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrapInner('<div></div>');
// <div class="demo">
// <div>
// <span></span>
// <span></span>
// </div>
// </div>
// <div class="demo">
// <div>
// <p></p>
// <p></p>
// </div>
// </div>
</script>参数的形式和wrap是一样，填函数也是没问题的
$('.demo').wrapInner(function(index){
return '<div class="wrapper_' + index + '"></div>';
});
// <div class="demo">
// <div class="wrapper_0">
// <span></span>
// <span></span>
// </div>
// </div>
// <div class="demo">
// <div class="wrapper_1">
// <p></p>
// <p></p>
// </div>
// </div>.wrapAll()
该方法更宏伟壮观一些包裹一堆，如果选中 $('.demo') 用 .wrap() 方法，会分别给两个.demo加父级
使用 .wrapAll() 方法会给选中的 .demo 统一加上一个父级
<div class="demo">
<span></span>
<span></span>
</div>
<div class="demo">
<p></p>
<p></p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrapAll('<div></div>');
// <div>
// <div class="demo">
// <span></span>
// <span></span>
// </div>
// <div class="demo">
// <p></p>
// <p></p>
// </div>
// </div>
</script>给选中的.dome统一加上爹（父级）
fullpage插件会用到 .wrapAll()
<div class="wrapper">
<div class="section"></div>
<div class="section">
<div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="section"></div>
</div>
如果不按规矩写，也不会报错
<div class="wrapper">
<div class="demo"></div>
<div class="demo"></div>
</div>
<div class="demo"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrapAll('<div></div>');
// <div class="wrapper">
// <div class="demo"></div>
// <div class="demo"></div>
// <div class="demo"></div>
// </div>
</script>.wrapAll的内部逻辑是，以第一个选中的div为基准，把剩下的div并到一块去
把第一个选中的div放到前面
<div class="demo"></div>
<div class="wrapper">
<div class="demo"></div>
<div class="demo"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').wrapAll('<div></div>');
// <div>
// <div class="demo"></div>
// <div class="demo"></div>
// <div class="demo"></div>
// </div>
// <div class="wrapper"></div>
</script>.unwrap()
解绑
把直接父级删除
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<meta charset="UTF-8">
<title>.unWrap()</title>
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<div class="demo"></div>
</div>
</div>
</div>
<script>
$('.demo').unwrap();
// <div class="wrapper">
// <div class="box">
// <div class="demo"></div>
// </div>
// </div>
</script>
</body>
</html>不停的删除父级，到body标签就停止了
<div class="wrapper">
<div class="box">
<div class="content">
<div class="demo"></div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('.demo').unwrap();
$('.demo').unwrap();
$('.demo').unwrap();
$('.demo').unwrap();
// <div class="demo"></div>
</script>