专栏首页全沾开发(huā)学习zepto.js(对象方法)[6]

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

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

first:

获取当前对象集合中的第一个dom元素。

$("div").first();// 返回第一个div对象(zepto对象)
//相当于
$("div").eq(0);

与之对应的是last

last:

获取当前对象集合中的最后一个dom元素。

$("div").last();// 返回最后一个div对象(zepto对象)
//相当于
$("div").eq(-1);

两方法不接收任何参数。

个人认为调用isObject方法没什么用,因为zepto对象集合里存放的都是dom元素。//也许是我无知吧- -

被大神点醒了。这样做也许是为了这种场景

get:

获取当前对象集合对应下标的某元素,传入参数为一个int下标,如果不传入参数,则将对象转换为一个普通数组并返回;

$("div").get(0);     // 第0个。(dom对象,不是zepto对象)
$("div").get();      //所有div对象组成的一个数组

该方法与eq方法的区别在于,eq返回的是zepto对象,而get返回的是dom对象,$().get(0)相当于$()[0];

slice就是[].slice();

使用get并且不传入参数的对象前后变化图:

has:

传入参数为一个选择器字符串或者一个节点,返回的是对象集合中子节点包含参数的对象。

$("div").has("a");// 会返回集合中所有包含a标签的对象

上述是传入一个选择器,也可以传入一个node节点作为参数

$(“div”).has(document.getElementById(“link”));//返回集合中有子项为#link的对象

首先,filter方法会将返回值为true的子项装入一个集合。

在filter方法内,我们通过判断选择器是否为object来进行区分,如果是object,则调用contains方法,判断selector是否属于this。

否则通过当前对象来调用find方法并将selector传入,并调用size方法获取count(filter会自动将返回值转换为bool类型)。

parent:

获取对象集合所有的直接父节点。可以传入一个选择器,只留下符合选择器的父节点。

$("p").parent();       // 获取所有p标签的父节点
$("p").parent(".ads");    // 获取所有p标签的父节点className包含.ads的节点

pluck方法返回一个数组,参数是一个字符串,为属性名,返回的值是调用对象所对应的属性的值;

然后传入uniq方法,方法做了一个去重处理;

最外层的方法filtered,如果第二个参数selector不为空,则通过第一个参数调用filter方法并将第二个参数传入filter方法,否则直接返回第一个参数。

parents:

获取所有对象的所有父节点。直至html标签结束。可以传入一个参数,作为选择器筛选;

参数只能是一个选择器字符串;

返回的集合不会出现重复的元素;

如果想取出元素的直接父节点,使用parent;

如果想取出第一个符合筛选条件的父节点,使用closest。

$("p").parents();        // 获取所有p标签的所有父节点
$("p").parents(".ads");   // 获取所有p标签的所有父节点className包含ads的节点

//使用parents如果不传入参数,则始终会包含一个body以及html元素;

方法首先声明一个数组用于存放dom元素,将this赋值给nodes变量;

使用一个while循环,条件为nodes.length > 0;

在循环内部,通过$.map给nodes进行赋值,map方法内部将node赋值为node的父节点,

然后判断,如果节点不是document并且该节点不存在于ancestors数组中,则将节点push至数组,并返回node。

所以说循环停止的条件就是node节点为document时。

最后调用filtered方法并返回。

siblings:

获取对象所有的兄弟节点。参数可以是一个选择器字符串,如传入参数则根据选择器过滤。

$("p").siblings();      // 获取所有p标签的同级标签
$("p").siblings(".ad");   // 所有的p标签的同级的className包含ad的元素

通过siblings获取到的dom元素会重复。

方法内部用到了一个children方法。

方法内部取出元素的父节点并传入children方法,返回元素的父节点的子节点,相当于自己的所有兄弟节点以及自身。

通过该返回集合call一下filter方法。

并将除了自身以外的所有节点返回。

最后通过filtered方法进行筛选,返回;

注意,siblings获取的元素会重复,会重复,会重复(重说三);

就像这样,script标签出现了两次;

ok,先说到这里了。写写博客练习一下语言表达能力,感觉自己能理解了,还是说不好,纠结ing…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习zepto.js(原型方法)[1]

    学习zepto.js(原型方法)[1] 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可...

    贾顺名
  • 学习zepto.js(对象方法)[2]

    学习zepto.js(对象方法)[2] 今天来说下zepto那一套dom操作方法, ['prepend', 'append', 'pr...

    贾顺名
  • 使用TS+Sequelize实现更简洁的CRUD

    如果是经常使用Node来做服务端开发的童鞋,肯定不可避免的会操作数据库,做一些增删改查(CRUD,Create Read Update Delete)的操作,如...

    贾顺名
  • muduo网络库学习之muduo_inspect 库涉及到的类

    muduo inspect 库通过HTTP方式为服务器提供监控接口, 现在只实现进程相关信息的监控,通过成员ProcessInspector 实现。 Pro...

    s1mba
  • 从头搭建一个在线聊天室(一)

    今天从头开始做一个在线聊天网站,网上各种各样的聊天工具已经很多了,为啥还要做这么一个聊天工具呢,无他,兴趣耳!

    周萝卜
  • 文件上传之Apache commons fileupload使用

      文件上传的方法主要目前有两个常用的,一个是SmartUpload,一个是Apache的Commons fileupload.   我们这里主要介绍下第二个的...

    用户1154259
  • 64.如何为爬虫程序增加限速功能

    爬虫程序,在爬取网站速度过快时,就会面临封禁的风险。因此,为了降低这样的风险,我们可以在两次爬取之间,添加一定的延时,从而起到限速的作用。下面我们先来编写一个具...

    TalkPython
  • ElasticSearch 内部原理之分布式文档搜索

    这个要比基本的创建-读取-更新-删除(CRUD)请求要难一些。CRUD操作是处理的单个文档。这就意味着我们明确的知道集群中的哪个分片存储我们想要的文档。

    smartsi
  • 阻止某个 NuGet 包意外升级

    2018-06-29 09:59

    walterlv
  • 5天被迫喊停!Win 10史上最短命系统升级:删文件、无法联网,误报CPU使用率

    此次更新的版本号为1809,遍地是坑:删除私人文件、CPU使用情况算错、微软App连不上网……很多抢先更新的用户,现在还没爬上来。

    量子位

扫码关注云+社区

领取腾讯云代金券