jQuery DOM操作插入、删、增、包裹

Go to comments

jQuery DOM操作插入、删、增、包裹

一、插入

插入到指定元素之前

.insertBefore()

.before()

插入到指定元素之后

.insertAfter()

.After()

在父级子元素最后面插入

.appendTo()

.append()

在父级子元素最前面插入

.prependTo()

.prepend()

1、插入到指定元素之前

先回顾 js 原生的 parentNode.insertBefore(A, B)

insert A

Before B

意思插入的 A，在 B 的前面

.insertBefore()

jQuery 简化了一下原生的 insertBefore(A, B)，直接把前面选中 .content 插入到的 .box1 前面（a插入到b前面）

<!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{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');

</script>
</body>
</html>

插入前 .content 原来样式是 height: 50，插入后样式变成 height: 100

<div class="content">content</div>

</div>

.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 元素之后

<div class="wrapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
<div class="content">content</div>

<script>

$('.content').insertAfter('.box1');

</script>

insertAfter 成哥的基础课留过作业

<div class="content">content</div>

</div>

.After()

.after() 与 .insertAfter() 是一样的

$('.box1').after($('.content'));

这些方法都相当于剪切操作，

选中谁以后，让他的位置发生一些变化，减切过去了

3、在父级子元素最后面插入

.appendTo()

$('.content').appendTo('.wrapper') 是让 .content 添加到 .wrapper 里面

<div class="wrapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
<div class="content">content</div>

<script>

$('.content').appendTo('.wrapper');

</script>

<div class="content">content</div>

</div>

.appendTo() 相当于原生的 appendChild

1. appendTo 从英语的叫角度是添加到

2. js 原生的 parendNode.appendChild() 方法前面是父级

.append()

.append() 和原生的 appendChild 一样，但是参数要用 jQuery 对象，不能用字符串

$('.wrapper').append($('.content'));

功能和 appendTo 一样

<div class="content">content</div>

</div>

参数不用 jQeruy 对象写"字符串"，意思就变成了创建一个"字符串"，然后插入进去

$('.wrapper').append('.content');

.content

</div>

<div class="content">content</div>

.appendTo() 和 .append() 是在父级子元素最后加元素

下面的 .prependTo() 和 .prepend() 是在父级子元素前面加

4、在父级子元素最前面插入

.prepend()

在父级子元素最前面插入

<div class="wrapper">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>
<div class="content">content</div>

<script>

$('.wrapper').prepend($('.content'));

</script>

<div class="content">content</div>

</div>

.prependTo()

效果与 .prepend() 是一样的

$('.content').prependTo('.wrapper');

二、删除

这两个方法都是删除元素的意思，但是两个方法的区别在事件上

.remove()

.detach()

.remove()

选中 $('div') 然后 .remove() 删除，删除后返回的是删掉的 div，其实就是剪切掉了

<!DOCTYPE html>
<html>
<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>');

</script>

</div>

参数也可以是创建一个 jQuery 对象的方式

$('.demo').wrap($('<div style="background-color:orange;padding:6px;"></div>'));

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

</script>

</div>

注意，

是复制不是剪切，.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>';
});

</script>

</div>

</div>

参数直接写"字符串标签"也能起到循环包裹的作用，只不过填函数能让包裹更灵活一些

$('.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>');

</script>

在写高级插件的时候可以用

<div>

</div>

两组 .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>');
    
</script>

<div>

</div>

<div>

<p></p>

</div>

参数的形式和 wrap 是一样，填函数也是没问题的

$('.demo').wrapInner(function(index){
  return '<div class="wrapper_' + index + '"></div>';
});

</div>

<p></p>

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

</script>

给选中的.dome统一加上爹（父级）

<div>

</div>

<p></p>

</div>

fullpage 插件会用到 .wrapAll()

<div>

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

</script>

.wrapAll 的内部逻辑是，以第一个选中的 div 为基准，把剩下的 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>');

</script>

<div>

</div>

.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();

</script>
</body>
</html>

</div>

不停的删除父级，到 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>