zoukankan      html  css  js  c++  java
  • jQuery匹配各种条件的选择器用法

    :hidden
    匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
    Matches all elements that are hidden, or input elements of type "hidden".
    返回值

    Array<Element>
    示例

    查找所有不可见的 tr 元素

    HTML 代码:
    <table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
    </table>

    jQuery 代码:
    $("tr:hidden")

    结果:
    [ <tr style="display:none"><td>Value 1</td></tr> ]

    ---------------------------------------------------------------------------------------
    :visible
    匹配所有的可见元素
    Matches all elements that are visible.
    返回值

    Array<Element>
    示例

    查找所有可见的 tr 元素

    HTML 代码:
    <table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
    </table>

    jQuery 代码:
    $("tr:visible")

    结果:
    [ <tr><td>Value 2</td></tr> ]

    ---------------------------------------------------------------------------------------
    [attribute]
    匹配包含给定属性的元素
    Matches elements that have the specified attribute.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名
    示例

    查找所有含有 id 属性的 div 元素

    HTML 代码:
    <div>
    <p>Hello!</p>
    </div>
    <div id="test2"></div>

    jQuery 代码:
    $("div[id]")

    结果:
    [ <div id="test2"></div> ]

    ---------------------------------------------------------------------------------------
    [attribute=value]
    匹配给定的属性是某个特定值的元素
    Matches elements that have the specified attribute with a certain value.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名

    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例

    查找所有 name 属性是 newsletter 的 input 元素

    HTML 代码:
    '<input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />

    jQuery 代码:
    $("input[name='newsletter']").attr("checked", true);

    结果:
    [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

    ---------------------------------------------------------------------------------------
    [attribute!=value]
    匹配给定的属性是不包含某个特定值的元素
    Matches elements that don't have the specified attribute with a certain value.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名

    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例

    查找所有 name 属性不是 newsletter 的 input 元素

    HTML 代码:
    '<input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />

    jQuery 代码:
    $("input[name!='newsletter']").attr("checked", true);

    结果:
    [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

    ---------------------------------------------------------------------------------------
    [attribute^=value]
    匹配给定的属性是以某些值开始的元素
    Matches elements that have the specified attribute and it starts with a certain value.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名

    value ( String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例

    查找所有 name 以 'news' 开始的 input 元素

    HTML 代码:
    <input name="newsletter" />
    <input name="milkman" />
    <input name="newsboy" />

    jQuery 代码:
    $("input[name^='news']")

    结果:
    [ <input name="newsletter" />, <input name="newsboy" /> ]

    ---------------------------------------------------------------------------------------
    [attribute$=value]
    匹配给定的属性是以某些值结尾的元素
    Matches elements that have the specified attribute and it ends with a certain value.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名

    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例

    查找所有 name 以 'letter' 结尾的 input 元素

    HTML 代码:
    <input name="newsletter" />
    <input name="milkman" />
    <input name="jobletter" />

    jQuery 代码:
    $("input[name$='letter']")

    结果:
    [ <input name="newsletter" />, <input name="jobletter" /> ]

    ---------------------------------------------------------------------------------------
    [attribute*=value]
    匹配给定的属性是以包含某些值的元素
    Matches elements that have the specified attribute and it contains a certain value.
    返回值

    Array<Element>
    参数

    attribute (String) : 属性名

    value (String) : 属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时,用以避免冲突。
    示例

    查找所有 name 包含 'man' 的 input 元素

    HTML 代码:
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />

    jQuery 代码:
    $("input[name*='man']")

    结果:
    [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

    ---------------------------------------------------------------------------------------
    [selector1][selector2][selectorN]
    复合属性选择器,需要同时满足多个条件时使用。
    Matches elements that have the specified attribute and it contains a certain value.
    返回值

    Array<Element>
    参数

    selector1 (Selector) : 属性选择器

    selector2 (Selector) : 另一个属性选择器,用以进一步缩小范围

    selectorN (Selector) : 任意多个属性选择器
    示例

    找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的

    HTML 代码:
    <input id="man-news" name="man-news" />
    <input name="milkman" />
    <input id="letterman" name="new-letterman" />
    <input name="newmilk" />

    jQuery 代码:
    $("input[id][name$='man']")

    结果:
    [ <input id="letterman" name="new-letterman" /> ]

    http://www.lzgame.com/zblog/archives/cat_1/2011/04/17.html

    http://www.css88.com/jqapi-1.9/checkbox-selector/

  • 相关阅读:
    linux下使用OpenCV的一些问题
    Google Colab调用cv2.imshow奔溃
    [LeetCode] Word Search
    信号
    信号
    [Leetcode] Subsets
    [LeetCode] Combinations
    [LeetCode] Minimum Window Substring
    [LeetCode] Set Matrix Zeroes
    sigaction 函数
  • 原文地址:https://www.cnblogs.com/zhangchenliang/p/3187822.html
Copyright © 2011-2022 走看看