avatar

jQuery的过滤器

1、基本属性过滤器

  • 获取–属性名等于指定值的元素
    $(“选择器[属性名=值]”)

  • 获取–不含指定值的元素
    $(“选择器[属性名!=’值’]”)

  • 获取–指定值开始的元素
    $(“选择器[属性名^=’值’]”)

  • 获取–指定值结束的元素
    $(“选择器[属性名$=’值’]”)

  • 获取–包含指定值的元素
    $(“选择器[属性名*=’值’]”)

复合属性过滤器
$ ([属性过滤器 1] [属性过滤器 2]……[属性过滤器 n])

基本过滤器

  • 获取选择器的第一个元素
    $(“选择器:first”)

  • 获取选择器的最后一个元素
    $(“选择器:last”)

  • $(“选择器:not()”)
    获取not过滤器可以去除所有与给的选择器匹配的元素
    例如:
    $(“div :not([id])”),除去含有id属性的div
    $(“li :not(:first)”),除去第一个li元素

  • $(“选择器:even”)
    获取索引值为偶数的元素

  • $(“选择器:odd”)
    获取索引值为奇数的元素

  • $(“选择器:eq(2)”)
    获取索引值为2的元素

  • $(“选择器:gt(2)”)
    获取索引值大于2的元素

  • $(“选择器:it(3)”)
    获取索引值小于3的元素

  • $(“选择器:header”)
    选择所有 h1、h2、h3 一类的header 标签

内容过滤器:

  • contains()
    使用 :contains() 过滤器可以匹配包含指定文本的元素。
    例如:$(“div:contains(HTML)”) 可以选择内容包含 HTML 的 div 元素。

  • empty()
    例如:使用 $(“td:empty”)可以选择内容为空的表格单元格。

  • has()
    例如: $(“p”).has(“span”)
    返回拥有一个span元素在其内的所有p元素

  • parent()
    $(“p”).parent(“.selected”)
    返回class为selected的p元素

子元素过滤器

  • nth-child(index/even/odd/eq)
    $ (“ul li:nth-child(2)”) 可以匹配 ul 元素中的第2个 li 子元素,
    $ (“ul li:nth-child(even)”) 可以匹配 ul 元素中的第偶数个 li 子元素。

  • first-child
    可以使用 :first-child 过滤器匹配第一个子元素
    $ (“ul li:first-child”) 可以匹配 ul 列表中的第一个 li 子元素。

  • last-child
    :last-child 过滤器匹配最后一个子元素。
    $ (“ul li:last-child”) 可以匹配 ul 列表中的最后一个 li 子元素。

  • only-child
    可以使用 :only-child 过滤器匹配父元素的唯一子元素。

总结

简单总结一下jQuery的过滤器,以后如果用到了又忘记了就翻翻这篇博客

文章作者: Hobo
文章链接: https://hobo-clh.github.io/2020/04/05/jQuery%E8%BF%87%E6%BB%A4%E5%99%A8/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Hobo's blog
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论