专栏首页微光点亮星辰锋利的jQuery第四期

锋利的jQuery第四期

经过了十一长假,大家学习的状态怎么样呢?有没有一如既往的保持学习劲头呢?小编在假期去SAE和BAE上面逛了逛,研究了一下微信公众号服务器配置,无奈的是如果启用服务器原来自定义的菜单等应该就暂时报销了。。。所以小编没有下手,所以又花时间去网罗了一些微信小程序的相关教程和资料,说白了就是前端的教程了,然后我们的鹏宇大校长又分享了虚拟机装黑苹果的方法,感觉收益颇丰啊。(如果对C/C++感兴趣的同学可以找鹏宇校长进行业内顶级特训哦)

好啦,转眼间假期嗖嗖嗖的就结束了,大家还是要劳逸结合的,现在开始我们的第四期,前两期介绍了基本选择器和层次选择器中的一些常用用法,本期向大家介绍基本过滤选择器,所谓过滤就是按条件选择出自己所需的元素,用法更为灵活,也增加了一定的复杂度,下面一起来看看吧。

第一发:首尾元素

原始效果图如下:

当我们想获得第一个div元素时可使用如下代码$("div:first").css("background","#bbffaa");执行效果如下:

需要注意的一点是前面的div为标签选择器,大家可以用之前学过的知识组合使用,通过和冒号后的first搭配使用得到想要的效果。获得末尾元素的代码如下$("div:last").css("background","#bbffaa");执行效果如下:

第二发:奇偶元素

在某些情境下,我们需要交替选取元素,这就可以用到奇偶的选择器,原始效果图如下:

选取索引为奇数的元素$("div:odd").css("background","#bbffaa");执行效果如下:

这里要注意一点,如果前面的选择器写的不好或范围过大,可能会造成子父级元素都被选择的情况,如上例中所示,但是元素会按照由上到下的顺序(即文档加载顺序)进行索引的排列,使用时应注意。

选取索引为偶数的元素$("div:even").css("background","#bbffaa");执行效果图如下:

索引为0的元素自然是包含在偶数当中,今天所讲的都是在冒号后面的进一步筛选,希望大家集合前面的知识搭配使用才能发挥真正的作用。最后小编祝大家学业有成,工作顺利!

本文分享自微信公众号 - 微光点亮星辰(SandTower),作者:朱晏辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-10-07

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 锋利的jQuery第八期

    上一期介绍了属性过滤选择器,提到了正则,那这次还是稍微说说吧,首先是不等于,开头以及结尾。原效果图如下:

    聚沙成塔
  • 锋利的jQuery第三期

    经过了前两期的基础铺垫,相信大家对jQuery也有了一定的了解,那么以后的几期将逐个介绍jQuery中的常见用法。

    聚沙成塔
  • Oracle 与 MySQL 的差异分析(6):数值函数

    trunc (x, y),y 为返回的小数位数,如果不传y,则默认为0,返回整数。

    聚沙成塔
  • Ionic3 本地消息推送

    spilledyear
  • BigTransfer (BiT):计算机视觉领域最前沿迁移学习模型

    我们将在本文中为您介绍如何使用 BigTransfer (BiT)。BiT 是一组预训练的图像模型:即便每个类只有少量样本,经迁移后也能够在新数据集上实现出色的...

    磐创AI
  • 使用 Sublime-snippet 来快速做前端页面

    在 Sublime 中,可以通过 Sublime-snippet 来快速补全代码。 举个栗子,如果在 Sublime 的存放 Submlime-snippet...

    Joel
  • 使用IAPIExplorer列举ASP.NET Web API

    IApiExplorer是一个新的抽象层,它可以帮助获取ASP.NET Web API的结构描述。伴随该接口的还有一个默认实现——APIExplorer。 使用...

    张善友
  • 《机器学习》笔记-概率图模型(14)

    如今机器学习和深度学习如此火热,相信很多像我一样的普通程序猿或者还在大学校园中的同学,一定也想参与其中。不管是出于好奇,还是自身充电,跟上潮流,我觉得都值得试...

    机器学习算法工程师
  • 小样,加张图你就不认识我了?“补丁”模型骗你没商量!| 技术头条

    【导语】本文介绍了一个可以生成欺骗性补丁的系统模型,通过将该补丁放置在固定位置,人们能够使自己在行人检测器中获得“隐身”的效果。作者对比了三个不同的生成补丁的方...

    AI科技大本营
  • 小心你的网站被劫持,偷偷为他人挖矿

    腾讯云安全

扫码关注云+社区

领取腾讯云代金券