美文网首页
【小结】jQuery过滤器/筛选器

【小结】jQuery过滤器/筛选器

作者: 音无级鹦鹉螺号szhiku | 来源:发表于2019-06-17 10:56 被阅读0次

一般情况下不会单独使用,和其他基本选择器组合使用,在现有的基础上再进行筛选过滤,使得选择更加精准,因此个人认为称作过滤器好一些,主要有两个系列,一个是child系列,一个是type系列,第二个比较常用
child系列主要有以下过滤器:
:first-child
:last-child
:nth-child(n | even | odd | formula)
:nth-last-child(n | even | odd | formula)
:only-child
特点:

  • 语义化,如:first-child 第一个子节点
  • child类型更偏向于先选择子节点,再判断其是什么类型。
  • 可获取参数类型多
    • n 匹配元素序号,必须为整数,从1开始
    • even 匹配所有偶数元素
    • odd匹配所有奇数元素
    • formula 使用特殊公式例如(an+b)进行选择

:first-child

例如:
$('details > p:first-child') //details标签下第一个必须是p标签才会被选择;

:last-child

例如:
$('details > p:last-child') //details标签下最后一个必须是p标签才会被选择;

:nth-child(n | even | odd | formula)

例如:
$('details > p:nth-child(2)') //details标签下第二个必须是p标签才会被选择;

  • ()内的数字是从1开始算的,下同

:nth-last-child(n | even | odd | formula)

例如:
$('details > p:nth-last-child(2)') //details标签下倒数第二个必须为p标签才会被选择;

:only-child

例如:
$('details > p:only-child') //details标签下第一个必须只有一个子标签并且为p标签才会被选择;


type系列主要有以下过滤器:
:first-of-type
:last-of-type
:nth-of-type (n | even | odd | formula)
:nth-of-type (n | even | odd | formula)
:only-of-type
其用法与child一致
特点:

  • 语义化,如:first-of-type 第一个节点类型
  • type类型更偏向于先确定节点类型,再把符合条件的该类型的节点返回。
  • 可获取参数类型多,同child类型

child系列与type系列的区别

  • child系列更偏向于子代,以代为基准,例如details > p:first-child必须是该元素下子节点顺序第一个p标签才能被选择。
  • type类型更偏向于类型,以类型为基准,例如details > p:first-of-type会先将details下的所有p标签获取,再返回其第一个。
  • 相对来说type类型更自由,不需要去考虑其是子代下第几个,因此在使用时更喜欢用。
  • 个人认为child系列偏向广度优先,而type系列偏向深度优先,因为在相同时间内,获取某代第几个节点比type系列全部获取再返回第几个速度要快。

相关文章

  • 【小结】jQuery过滤器/筛选器

    一般情况下不会单独使用,和其他基本选择器组合使用,在现有的基础上再进行筛选过滤,使得选择更加精准,因此个人认为称作...

  • jQuser有选择器

    jQuery基本选择器 jQuery过滤选择器 jQuery层级选择器 jQuery筛选选择器(方法)

  • 前端-4

    jQuery 基本语法: $(selector).action() 选择器 筛选器

  • jQuery入门(2)

    jQuery选择器 属性筛选选择器 子元素筛选选择器 表单元素选择器 表单对象属性筛选选择器 特殊选择器this ...

  • JavaScript学习笔记(三十二)-- jQuery(中)

    jQuery 昨天讲了 jQuery 的基本选择器筛选器和属性操作 今天来说一些 jQuery 别的东西 元素操作...

  • SpringBoot添加过滤器Filter

    1. 拦截器和过滤器 先说一下,过滤器和拦截器的区别和联系。 1.1 相同点 首先过滤器和拦截器都能实现请求的筛选...

  • jquery 选择器

    jQuery层级选择器 基本筛选选择器 注意事项: :eq(), :lt(), :gt(), :even, :od...

  • jQuery笔记(三)-- 使用过滤器

    jQuery选择器能够模仿CSS和XPath语法,提供高效、准确匹配元素的方法,jQuery过滤器是一系列简单,实...

  • jQuery的DOM操作1

    如何筛选jQuery对象 1,DOM对象和jQuery对象的区别 DOM对象(DOM元素)是浏览器的网页页面中渲染...

  • Javaweb基础(九)过滤器监听器

    过滤器(Filter): 能够完成筛选不需要数据的工具(东西). 1.什么是过滤器 生活中:净水器,香烟过滤嘴,滤...

网友评论

      本文标题:【小结】jQuery过滤器/筛选器

      本文链接:https://www.haomeiwen.com/subject/psmgfctx.html