zoukankan      html  css  js  c++  java
  • jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤

    一、:contains(text)

    选择器::contains(text)
    描述:匹配包含给定文本的元素
    返回值:元素集合

    示例:

    ?
    1
    2
    $("div.mini:contains('div')")
    //div.mini是DOM元素集合,:contains('div')是过滤条件

    二、:has(selector)

    选择器::has(selector)
    描述:匹配含有选择器所匹配的元素的元素
    返回值:元素集合

    示例:

    ?
    1
    2
    $("div.mini:has(p)")
    //div.mini是DOM元素集合,:has(p)是过滤条件

    三、:empty

    选择器::empty
    描述:匹配所有不包含子元素或者文本的空元素
    返回值:元素集合

    示例:

    ?
    1
    2
    $("div.item:empty")
    //div.item是DON元素集合,:empty是过滤条件

    四、:parent

    选择器::parent
    描述:匹配含有子元素或者文本的元素
    返回值:元素集合

    示例:

    ?
    1
    2
    $("div.item:parent")
    //div.item是DOM元素集合,:parent是过滤条件

    jQuery子元素过滤选择器

    一、:first-child

    选择器::first-child
    描述:匹配第一个子元素
    返回值:元素集合

    示例:

    ?
    1
    2
    3
    4
    $("div.mini:first-child")//如果div.mini是某元素的第一个子元素,那么选中此div.mini
    $("div.mini :first-child")//如果**div.mini**的后代元素A是某元素的第一个子元素,那么选中此后代元素A
    $("div.mini span:first-child")//如果**div.mini**的span后代元素A是某元素的第一个子元素,那么选中此**span后代元素A**
    $("div.mini span :first-child")//如果**div.mini的span后代元素**的后代元素A是某元素的第一个子元素,那么选中此后代元素A

    二、:last-child

    选择器::last-child
    描述:匹配最后一个子元素
    返回值:元素集合

    示例:

    ?
    1
    2
    3
    4
    $("div.mini:last-child")//如果div.mini是某元素的最后一个子元素,那么选中此div.mini
    $("div.mini :last-child")//如果**div.mini**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A
    $("div.mini span:last-child")//如果**div.mini**的span后代元素A是某元素的最后一个子元素,那么选中此**span后代元素A**
    $("div.mini span :last-child")//如果**div.mini的span后代元素**的后代元素A是某元素的最后一个子元素,那么选中此后代元素A

    三、:only-child

    选择器::only-child
    描述:如果某元素A是其父元素中唯一的子元素,那么A将会被匹配
    返回值:单个元素

    示例:

    ?
    1
    2
    3
    4
    $("div.mini:only-child")//如果div.mini是某元素唯一的子元素,那么选中此div.mini
    $("div.mini :only-child")//如果**div.mini**的后代元素A是某元素唯一的子元素,那么选中此后代元素A
    $("div.mini span:only-child")//如果**div.mini**的span后代元素A是某元素唯一的子元素,那么选中此**span后代元素A**
    $("div.mini span :only-child")//如果**div.mini的span后代元素**的后代元素A是某元素唯一的子元素,那么选中此后代元素A

    四、:nth-child

    选择器::nth-child(:eq()索引从0开始,:nth-child()索引从1开始)
    描述:匹配包含给定文本的元素
    返回值:元素集合

    示例:

    ?
    1
    2
    3
    4
    $("div.mini:nth-child(1)")//如果div.mini是某元素的**第一个**子元素,那么选中此div.mini
    $("div.mini :nth-child(1)")//如果**div.mini**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A
    $("div.mini span:nth-child(1)")//如果**div.mini**的span后代元素A是某元素的**第一个**子元素,那么选中此**span后代元素A**
    $("div.mini span :nth-child(1)")//如果**div.mini的span后代元素**的后代元素A是某元素的**第一个**子元素,那么选中此后代元素A

    :nth-child()的索引值除了具体数字值为还可以是表达式:

    ?
    1
    2
    3
    4
    5
    :nth-child(even)
    :nth-child(odd)
    :nth-child(3n)
    :nth-child(3n+1)
    :nth-child(3n+2)
  • 相关阅读:
    家庭记账本开发进度6
    家庭记账本开发进度5
    家庭记账本开发进度4
    家庭记账本开发笔记3
    大道至简阅读笔记01
    个人作业 数组(续)
    二维数组
    个人作业1-数组
    软件工程第一周开课微博
    第一周学习进度条报告
  • 原文地址:https://www.cnblogs.com/good10000/p/10619250.html
Copyright © 2011-2022 走看看