zoukankan      html  css  js  c++  java

  • jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 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 元素
  • 相关阅读:
    flex 弹性盒布局 移动端首页
    less+rem基础使用
    github 本地操作
    git 码云
    react基础知识
    css样式
    uni-app 知识点
    web app
    2019年一半已过，这些大前端技术你都GET了吗？- 下篇
    2019年大前端技术周刊-#31周
  • 原文地址：https://www.cnblogs.com/smiler/p/4921583.html
Copyright © 2011-2022 走看看