主要介绍一下wrap, wrapAll, wrapInner, unwrap方法。

wrapAll

在所有匹配元素外面包一个单独的结构。结构可以是单个元素或 几个嵌套的元素,并且可以是html字符串或者dom元素。

用文字解释一下,就是先把传入的参数转换为dom结构,插入到所选择的包装集的前面,然后将包装集插入到所插入的dom元素的最深层次的第一个子集里面。

逐行解释:

structure = $(structure)是将传入的参数转换为dom元素,再使用before方法插入到所选择的包装集的第一个元素的前面。

这里的this[0]相当于$(selector).get(0)

children = structure.children()就是获取插入的dom结构的子集,利用while循环,判断children是否存在,直到最内存的children,取得第一个dom元素,并赋值给structure。

将所选取的包装集直接插入到$(structure)。

返回$(this),确保可以链式调用。

 

wrap

在每个匹配的元素外层包上一个html元素。参数与wrapAll类似,但是比wrapAll多一种类型,wrap的参数可以为函数类型,通过回调函数返回前面的包裹片段。

如果包装集不为空,并且传入的参数不是函数类型,定义两个变量,举例:如果参数为‘<div class="test1"></div><div class="test2"></div>’,则dom的值为'<div class="test1"></div>',自动忽略后面的。

clone = dom.parentNode || this.length > 1

由于包装集不一定仅有一个元素,如果超过一个元素的话,要实现每一个包装集元素进行包裹的话,就需要对dom进行克隆,而且属于深拷贝。根据当前选择的包装集是否大于1来判断是否需要深拷贝。不理解dom.parentNode的作用是什么,dom是传入的参数所转化的dom结构,怎么会有parentNode?

准备工作完成之后,需要对所选取的包装集遍历,逐个使用wrapAll进行包装。

wrapAll里面的参数,需要依据条件进行判断,如果wrap参数是函数的话,则将执行函数,返回结果作为wrapAll的参数,如果不是函数,就一句clone的值,来判断是不是需要多次使用,如果包装集只有一个元素,则直接将dom传入,如果有多个元素,则将dom深拷贝。

这里需要对三元运算符有一定的理解,能够更容易理解这段。

 

wrapInner

将每个元素中的内容包裹在一个单独的结构中。

可以参照wrap进行理解,区别在于是将wrap需要包裹的元素本身,替换成wrapInner需要包裹其子集,关键点在于contents = self.contents(),然后如果该元素没有子集,则直接将所传入的参数转换的dom结构插入到该元素之内(self.append(dom))

 

unwrap

移除集合中每个元素的直接父节点,并把他们的子元素保留在原来的位置。

目标是移除所有父节点,所以先获取当前包装集的父元素,并进行遍历,对遍历的项利用其子集直接替换replaceWith($(this).children()),这里需要理解的是this,一共有四个this,但是this的指向并不相同,this.parent和 return this中的this,指的是包装集,而两个$(this)中的this指的是获取到的parents进行遍历的每一个parent项。

深入理解this即可。

 

posted on 2016-11-15 09:59  烛火星光  阅读(172)  评论(0编辑  收藏  举报