JQuery选择器之CSS选择器

系统管理员 2022-06-03 20:13 266阅读 0赞

## 核心选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>选择所有元素</td> 
  </tr> 
  <tr> 
   <td>&lt;type&gt;</td> 
   <td>选择特定类型的元素</td> 
  </tr> 
  <tr> 
   <td>.&lt;class&gt;</td> 
   <td>选择具有特定class的元素</td> 
  </tr> 
  <tr> 
   <td>&lt;type&gt;.&lt;class&gt;</td> 
   <td>选择具有特定class的某类元素</td> 
  </tr> 
  <tr> 
   <td>‘#id</td> 
   <td>选择具有特定id属性值的元素</td> 
  </tr> 
 </tbody> 
</table>

## 属性选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[attr]</td> 
   <td>选取定义了attr属性的元素，即使这个属性值为空</td> 
  </tr> 
  <tr> 
   <td>[attr=”val”]</td> 
   <td>选择attr属性值等于字符串val的元素</td> 
  </tr> 
  <tr> 
   <td>[attr^=”val”]</td> 
   <td>选择attr属性值以字符串val开头的元素</td> 
  </tr> 
  <tr> 
   <td>[attr$=”val”]</td> 
   <td>选择attr属性值以字符串val结尾的元素</td> 
  </tr> 
  <tr> 
   <td>[attr*=”val”]</td> 
   <td>选择attr属性值包含字符串val的元素</td> 
  </tr> 
  <tr> 
   <td>[attr~=”val”]</td> 
   <td>选择attr属性值包含多个空格分割的多个值，且其中一个值等于字符串val的元素</td> 
  </tr> 
  <tr> 
   <td>[attr1=”val”]</td> 
   <td>选择attr属性值等于字符串val，或属性值为连字符分割的值列表且第一个值是字符串val的元素</td> 
  </tr> 
 </tbody> 
</table>

## 关系选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>语&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&lt;selector&gt; &lt;selector&gt;</td> 
   <td>选择第一个选择器匹配元素内匹配第二个选择器的后代元素</td> 
  </tr> 
  <tr> 
   <td>&lt;selector&gt; &gt; &lt;selector&gt;</td> 
   <td>选择第一个选择器匹配元素内匹配第二个选择器的直接子元素</td> 
  </tr> 
  <tr> 
   <td>&lt;selector&gt; + &lt;selector&gt;</td> 
   <td>选择第一个选择器匹配元素内匹配第二个选择器的下一个兄弟元素</td> 
  </tr> 
  <tr> 
   <td>&lt;selector&gt; ~&lt;selector&gt;</td> 
   <td>选择第一个选择器匹配元素内匹配元素之后的匹配第二个选择器的所有兄弟元素</td> 
  </tr> 
 </tbody> 
</table>

### 示例 ###

*  $(“div”) selects all <div> elements
 *  $(“fieldset a”) selects all <a> elements within <fieldset> elements
 *  $(“li>p”) selects all <p> elements that are direct children of <li> elements
 *  $(“div~p”) selects all <div> elements that are preceded by a <p> element
 *  $(“p:has(b)”) selects all <p> elements that contain a <b> element
 *  $(“div.someClass”) selects all <div> elements with a class name of someClass
 *  $(“.someClass”) selects all elements with class name someClass
 *  $(“\#testButton”) selects the element with the id value of testButton
 *  $(“img\[alt\]”) selects all <img> elements that possess an alt attribute
 *  (“*a*\[*h**r**e**f*$=.pdf\]”) selects all <a> elements that possess an href attribute that ends in .pdf
 *  $(“button\[id\*=test\]”) selects all buttons whose id attributes contain test
    
    [https://dzone.com/refcardz/jquery-selectors][https_dzone.com_refcardz_jquery-selectors]

[https_dzone.com_refcardz_jquery-selectors]: https://dzone.com/refcardz/jquery-selectors