zoukankan      html  css  js  c++  java

  • jQuery 练习[二]: 获取对象(3) 根据属性、内容匹配, 还有表单元素匹配


    指定元素中包含 id 属性的, 如: $("span[id]")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    指定元素中不包含 id 属性的, 如: $("span:not(span[id])") 或 $("span:not([id])")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    包含 id 属性的, 如: $("body [id]")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    符合元素值的, 如: $("span[name='S2']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    不符合元素值的, 如: $("span[name!='S2']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    元素值开头是?, 如: $("span[name^='S']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    元素值结尾是?, 如: $("html [name$='1']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    元素值包含?, 如: $("body [name*='x']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    多个属性条件, 如(有 id 且 name 开始是 "D"): $("body [id][name^='D']")
    <span id="span1" name="S1">AAA</span><br/>
    <span id="span2" name="S2">BBB</span><br/>
    <span name="Sx3">CCC</span><br/>
    <span name="Sx4">DDD</span><br/>
    <div id="div1" name="Dx1">EEE</div>
    <div name="D2">FFF</div>

    查找包含 "AB" 的 span: $("span:contains('AB')")
    <span>ABC</span><br/>
    <span><b>ABC</b></span><br/>
    <span></span>
    <div>
        <span>ABC</span><br/>
        <span><b>ABC</b></span><br/>
        <span></span>
    </div>

    从 div 中查找包含 "AB" 的 span: $("div span:contains('AB')")
    <span>ABC</span><br/>
    <span><b>ABC</b></span><br/>
    <span></span>
    <div>
        <span>ABC</span><br/>
        <span><b>ABC</b></span><br/>
        <span></span>
    </div>

    查找包含 的 span: $("span:has('b')")
    <span>ABC</span><br/>
    <span><b>ABC</b></span><br/>
    <span></span>
    <div>
        <span>ABC</span><br/>
        <span><b>ABC</b></span><br/>
        <span></span>
    </div>

    查找空的 span: $("span:empty")
    <span>ABC</span><br/>
    <span><b>ABC</b></span><br/>
    <span></span>
    <div>
        <span>ABC</span><br/>
        <span><b>ABC</b></span><br/>
        <span></span>
    </div>

    查找非空的(也就是作为父元素的) span: $("span:parent")
    <span>ABC</span><br/>
    <span><b>ABC</b></span><br/>
    <span></span>
    <div>
        <span>ABC</span><br/>
        <span><b>ABC</b></span><br/>
        <span></span>
    </div>

    :hidden 与 :visible 分别对应隐藏与显示的元素; 下例让已显示的变红, 让隐藏的显示为灰色.
    <!doctype html>
    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    </head>
    <body>
        <div>111</div>
        <div>222</div>
        <div style="display:none">333</div>
        <div style="display:none">444</div>
    </body>
    </html>
    <script>
        $("div:visible").css("color", "red");
        $("div:hidden").css("display", "").css("color", "silver");
    </script>

    表单匹配:
    :input 匹配:
        <input ... />
        <select></select>
        <textarea></textarea>
        <button></button>

    :text        匹配 <input type="text" />
    :password    匹配 <input type="password" />
    :radio       匹配 <input type="radio" />
    :checkbox    匹配 <input type="checkbox" />
    :submit      匹配 <input type="submit" />
    :reset       匹配 <input type="reset" />
    :image       匹配 <input type="image" />
    :file        匹配 <input type="" />
    :button      匹配 <button></button>
    :enabled     匹配 所有可用的 input 元素
    :disabled    匹配 所有不可用的 input 元素
    :checked     匹配 所有选中的被选中复选框、单选框
    :selected    匹配 所有选中的 option 元素
  • 相关阅读:
    bzoj3675 [Apio2014]序列分割
    bzoj4010 [HNOI2015]菜肴制作
    bzoj4011 [HNOI2015]落忆枫音
    bzoj100题
    JSP—内置对象
    集合框架—常用的map集合
    集合框架—HashMap
    集合框架—代码—用各种集合进行排序
    集合框架—2种排序比较器
    array
  • 原文地址：https://www.cnblogs.com/del/p/1746514.html
Copyright © 2011-2022 走看看