主要介绍一下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即可。

zepto源码--核心方法4(包装)--学习笔记的更多相关文章

  1. zepto源码--核心方法10(位置)--学习笔记

    今天基本上就是zepto学习笔记的最后一篇了,介绍一下有关位置的函数,position, offset, scrollLeft, scrollTop scrollLeft 如果所选取的包装集不存在,则 ...

  2. zepto源码--核心方法(类数组相关)--学习笔记

    从这篇起,在没有介绍到各类插件之前,后面将陆续介绍zepto对外暴露的核心方法.即$.fn={}里面的所有方法的介绍.会配合zepto的API进行介绍. 其实前面已经介绍了几个,如width,heig ...

  3. zepto源码--几个判断函数--学习笔记

    几个需要经常用到的类型判断: 自定义一个类似于typeof的函数,提供更多的类型判断. class2type[toString.call(obj)] 是对class2type的取值 在后面通过循环对c ...

  4. zepto源码--核心方法9(管理包装集)--学习笔记

    今天介绍的是与子元素相关的函数,children, find, contents children 从源码来看,主要是调用过滤函数filtered对遍历整个包装集返回的children进行过滤. 仔细 ...

  5. zepto源码--核心方法7(管理包装集)--学习笔记

    后面应该会有几篇连续介绍关于zepto包装集的文章.涉及的函数较多,就分别介绍,今天介绍几个使用关系获取包装集的方法.prev, next, first, last, siblings, eq pre ...

  6. zepto源码--核心方法8(管理包装集)--学习笔记

    继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent parent 获取对象集合中每个元素的直接父元素. 与上篇文章 ...

  7. zepto源码--核心方法5(文本操作)--学习笔记

    涉及到文本内容的主要有三个函数:html, text, val. 我们已经见过多次,一个函数多种用途的情况,今天这三个函数也不例外,既可以获取内容,也可以设置内容.判断条件就是有没有传入参数,如果没有 ...

  8. zepto源码--核心方法3(属性相关)--学习笔记

    继续$.fn方法 今天主要介绍几个跟属性操作相关的方法attr, removeAttr, prop, data attr 读取或设置dom的属性.如果没有给定value参数,则读取对象集合中第一个元素 ...

  9. zepto源码--核心方法6(显示隐藏)--学习笔记

    在不引入zepto插件模块fx_metho其他ds的情况下,zepto默认的显示隐藏的函数只有show, hide, toggle,这里解释有个前提条件,就是没有引入zepto的fx_methods插 ...

随机推荐

  1. EF框架step by step(2)—Model-First

    这一篇主要说一下EF框架中,Model First做法,仍然采用上一篇的案例.但增加评论功能.首先打开Blog.edmx文件,在空白处右键,添加新实体Comment,如下图示: 点击确定,关闭窗口. ...

  2. BestCoder#15 A-LOVE(暴力)

    Love Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  3. ccc 多点触控2

    经过不断的思考发现,如果是两个sprite都添加触控的时候,往往直接成单点触控, 但是如果是两个node的时候在node上面点击就会变成多点触控的形式 cc.Class({ extends: cc.C ...

  4. webpack入门教程

    注:本文内容比较基础,供初学者快速入门参考. 更多详细信息请参考官方文档. 本文同步发布于我的博客,欢迎关注^_^ 1. 安装 npm install -g webpack 2. 基本使用 假设项目文 ...

  5. Nodejs-搭建Nodejs开发环境

    学习nodejs,需要一个好的开发工具,并不想用无智能提示和不友好格式的记事本编写 1. 从www.nodejs.org下载nodejs并安装到指定的目录. 2. 下载一个开发工具, 可以选择webs ...

  6. BZOJ 2957 & 线段树上的查询

    题意: 小A的楼房外有一大片施工工地,工地上有N栋待建的楼房.每天,这片工地上的房子拆了又建.建了又拆.他经常无聊地看着窗外发呆,数自己能够看到多少栋房子. 为了简化问题,我们考虑这些事件发生在一个二 ...

  7. iPad apple-touch-startup-image实现portrait和landscape

    iPad apple-touch-startup-image实现portrait和landscape 为ipad制作web应用程序的启动画面时发现个问题,只能显示竖屏图,横屏图出不来,网上的朋友都说无 ...

  8. 【BZOJ】1108: [POI2007]天然气管道Gaz

    题意 \(n\)个黑点\(n\)个白点(\(2 \le n \le 50000\)),需要一一配对,使得白点在黑点的右下角,且曼哈顿距离和最小.题目保证有解. 分析 考虑最优解,我们可以交换任意一个配 ...

  9. C程序演示产生僵死进程的过程

    先抄录网上一段对僵死进程的描述: 僵尸进程:一个进程使用fork创建子进程,如果子进程退出,而父进程并没有调用wait或waitpid获取子进程的状态信息,那么子进程的进程描述符仍然保存在系统中.这种 ...

  10. 通过Ajax post Json类型的数据到Controller

    View function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData&quo ...