学习zepto.js(对象方法)[2]

今天来说下zepto那一套dom操作方法,

prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter;

按着从内到外,从主到从,从前到后的顺序来说这八个方法.

这些方法的参数可以是一个dom节点,也可是是一个html片段,或者Zepto对象;

prepend():

将参数插入对象内部的头部;

append():

将参数插入对象内部的尾部;

 prependTo():

将对象插入到参数内部的头部(可以理解为将prepend的参数变为调用方法的对象,将对象变为方法的参数);

appendTo():

将对象插入到参数内部的尾部;

以上四个全都是元素内部的插入,接下来的四个全部是元素外部插入的.

before():

将参数插入到对象的前边;

after():

将参数插入到对象的后边;

insertBefore():

将对象插入到参数的前边;

insertAfter():

将对象插入到参数的后边;

之所以将这八个方法放在一块说,是因为这八个方法是通过循环动态生成的.首先要先会用,才可以去试着了解内部结构.了解完了以后,你会发现,你会很熟练的使用它;

上边那个数组是储存的几个操作的名称,下边的forEach循环是在zepto自执行函数中执行的,就是说,在构件zepto原型的是否就创建了这几个方法;

forEach方法回调返回的参数,第一个是值,第二个是值的下标;

map方法回调返回的参数同上,在方法内部第一个参数名使用了_(下划线),表示在该函数中并未使用到,但必须要占位(某群某大神就是这么干的),注意数组中存储的,

只有四个值(四个将参数插入至对象中的方法名[就叫它主动方法吧,原创名字,可以随意使用,不受任何版权约束]),还有数组的顺序也是很重要(根据数组顺序决定插入的位置);

inside变量存储了该方法是否为内部插入的bool值,这也是为什么上边说数组的顺序很重要;

跳过map方法中的处理,不多做解释,因为这个是转换参数为DOm节点的;

在方法返回时执行的each方法,

方法首先会判断该方法是否为对象内部的操作,如果是,将parent变量赋值为当前对象,如果不是,就说明是对象外部操作,就将parent赋值为对象的parentNode;

然后根据方法名字在操作集合中的下标来判断去什么dom节点,

把八个操作带进去,因为这八个方法最后使用的都是insertBefore方法,

顺便说一下原生的insertBefore方法使用方式.

首先调用该方法的为要**入的对象,接收两个参数,第一个是要插入的对象,第二个是要插谁的前边;

售票处.insertBefore(李四,张三);

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：学习zepto.js(对象方法)[2]

关键词：JS