开发者社区> 贾顺名> 正文

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

简介: 今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents", "empty", "eq", "filter", "find", "first", "get", "has", "last", "not", "parent", "parents", "siblings"] children: 获取对象的所有匹配的直接子元素.
+关注继续查看

今天说说那一套获取元素集合的一些方法:

["children", "clone", "closest", "contents", "empty", "eq", "filter", "find", "first", "get", "has", "last", "not", "parent", "parents", "siblings"]

children:

获取对象的所有匹配的直接子元素.

参数为可选的一个选择器.如果不填则是所有子节点,否则为匹配的所有子节点;

$("#demo").children();//-->所有的子节点
$("#demo").children("li");//-->所有的li子节点

 返回的是一个zepto对象,里边存储的是匹配的子节点的集合.

上边那个过滤方法用的地方比较多,所以给它放在上边;

children方法调用的filtered传入的是两个参数,第一个是一个集合,将所有对象的所有的子节点取出,并放入一个集合;children方法内部调用的children方法不是自身,而是另有一个children方法;↓

我们调用的是对象方法,而对象方法调用的那个就是一个普通的内部私有函数- -(望理解它们之间的区别);

返回的是做一个兼容处理的获取子元素的实现,如果节点存在children属性就直接取出,不存在的话,就循环childNodes并将nodeType为1的元素筛选出来;

在filtered方法中,第二个参数就是children方法可选的那个选择器,而filtered方法又会牵扯到下边要说的两个方法,这里先把代码贴上

filter与not的作用相反.

从源码来看,能发现一个children的隐藏功能,这是api里边没说的.而我们的确能用的;

也就是说,我们可以在children参数中传入一个function,function有一个实参,就是下标.

var temp = $("li").children(function (index) {
    return (index % 2 === 0);
})

 

返回的是一个boolean值.为true则放入集合;

filter:

filter方法接收一个参数,可以为选择器,也可以为一个function,function返回true则视为匹配.

$(".item").filter(".nav"); // 相当于$(".item.nav");
$(".item").filter(function (index) {
    return index % 2 === 0;  //函数内部 this指向集合中的当前元素
}); //将集合中偶数位的元素取出并放入一个集合

 

直接说实现,省得上边那一大串children白说了.

首先进入方法判断传入选择器是否为一个function类型,如果是,则执行this.not(this.not(function));看起来可能有点乱.但结果是对的.

not方法与filter相反,先简单的说它的作用.下边再介绍它

内层not参数为一个function,not方法内部会执行该function,并将所有不满足的元素返回,

外层not方法的参数就是内层not的返回值,也就是所有不满足的元素的集合,然后再经过筛选,取出所有不存在于参数集合中的元素.

也就变相的取出了所有满足条件的元素;

not:

not方法用法与filter相同,返回值相反.

用法直接pass.

首先函数内部判断传入选择器类型,如果是个functin,妥妥的循环对象并执行它.

否则就判断选择器类型是否为字符串,如果是,则调用filter方法.加个表情;

如果不是一个字符串,就判断是否是一个类数组,并且对象的item是一个方法,(是的,变相的判断为一个zepto对象.)

其余的情况,直接通过参数构建一个zepto对象.

以上操作均为给excludes变量赋值;

在最后,通过循环对象.将对象中不存在于excludes变量中的所有元素取出.并构件为一个zepto对象.

也就是说,not方法传入的参数类型是可以比filter更丰富一些的.

可以传入一个zepto对象,或者一个dom标签数组.一个html片段.等等......

当然最后返回的对象决不会存在于not的参数中.

//indexOf就是数组的原生方法,

 

先发这三个方法的.其余的以后补上.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
『软件工程13』浅谈面向对象方法,统一建模语言UML
在下面的这篇文章中,将讲解我们平常常用的一种面向对象的画图方法,即统一建模语言UML(Unified Modeling Language)。 接下来开始进行讲解。
19 0
学习zepto.js(对象方法)[1]
zepto也是使用的链式操作,链式操作:函数返回调用函数的对象. 但并不是所有的对象方法都可以进行链式操作,举几个例子:.size(),.html()|.text()//不传参数的情况下; 若非特殊说明,下边介绍的方法都会返回zepto对象; add(): 支持一到二个参数,第一个为选择器,...
795 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27781 0
JS学习系列 06 - 变量对象
上一节我们讨论了执行上下文,那么在上下文中到底有什么内容,为什么它会和作用域链扯上关系,JS 解释器又是怎么找到我们声明的函数和变量,看完这一节,相信大家就不会再迷惑了。变量对象就是执行上下文和作用域链中间的桥梁。
1079 0
学习zepto.js(对象方法)[3]
继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法. attr(): 三种用途 get: 返回值为一个string字符串 $("").
869 0
学习zepto.js(Hello World)
Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。     昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用...
961 0
学习zepto.js(对象方法)[4]
今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents", "empty", "eq", "filter", "find", "first", "get", "has", "last", "not", "parent", "parents", "siblings"] children: 获取对象的所有匹配的直接子元素.
764 0
学习zepto.js(原型方法)[2]
接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复); $.grep(): 作用与Array.filter类似(其实就是调用的filter方法- -) 通过传入两个参数,第一个为类数组的对象,第二个为用来执行判断的函数; var array = [1,2,3,4,5]; var even = $.
1034 0
学习zepto.js(对象方法)[2]
今天来说下zepto那一套dom操作方法, prepend,append,prependTo,appendTo,before,after,insertBefore,insertAfter; 按着从内到外,从主到从,从前到后的顺序来说这八个方法.
683 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载