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

深藏阁楼爱情的钟 2021-06-26 16:06 427阅读 0赞

**指定元素中包含 `id` 属性的, 如: `$("span[id]")`**

**指定元素中不包含 `id` 属性的, 如: `$("span:not(span[id])")` 或 `$("span:not([id])")`**

**包含 `id` 属性的, 如: `$("body [id]")`**

**符合元素值的, 如: `$("span[name='S2']")`**

**不符合元素值的, 如: `$("span[name!='S2']")`**

**元素值开头是`?`, 如: `$("span[name^='S']")`**

**元素值结尾是`?`, 如: `$("html [name$='1']")`**

**元素值包含`?`, 如: `$("body [name*='x']")`**

**多个属性条件, 如(有 id 且 name 开始是 “D”): `$("body [id][name^='D']")`**

**查找包含 “AB” 的 span: `$("span:contains('AB')")`**

**从 div 中查找包含 “AB” 的 span: `$("div span:contains('AB')")`**

**查找包含 的 `span`: `$("span:has('b')")`**

**查找空的 span: `$("span:empty")`**

**查找非空的(也就是作为父元素的) span: `$("span:parent")`**

**`: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` 匹配:**

`: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` 元素

--------------------

## `jquery`内容选择器（根据内容匹配元素） ##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>内容选择器</title>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <style type="text/css"> .yang{ border-collapse: collapse; width:500px;height:30px;border:1px solid red;"} </style>
      <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
      <script type="text/javascript"> /* :contains(text) //根据内容匹配元素 :empty //匹配内容为空的元素 :has(selector) //匹配包含指定选择器的元素 :parent //匹配内容不为空的元素 */ window.onload=function(){ $('#btnOk').click(function(){ //根据内容匹配元素 $("li:contains('国')").html('水浒传'); }); }; </script>
     </head>
     <body>
    
         <ol>
                <li>三国演义</li>
                <li>西游记</li>
                <li></li>
                <li>红楼梦</li>
         </ol>
    
        <hr/>
      <input type="button" id='btnOk' value='确定' />
     </body>
    </html>

![在这里插入图片描述][20190806225344330.png]

[20190806225344330.png]: /images/20210626/733e645624934106879c54d2a20d1f9a.png