jQuery基础（五）—— jQuery选择器

Dear 丶 2022-03-25 02:22 229阅读 0赞

jQuery选择器的写法和CSS选择器的写法类似，我觉得不同的就是CSS是在选择到元素以后为其添加样式， jQuery选择器是在找到元素以后为其添加行为。主要包含以下几种：

### （1）基本选择器 ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:110px;"><strong><span style="color:#3399ea;">选择器</span></strong></td> 
   <td style="width:310px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:76px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:353px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:110px;">#id</td> 
   <td style="width:310px;">根据给定的id匹配一个元素</td> 
   <td style="width:76px;">单个元素</td> 
   <td style="width:353px;">$("#imok")选取id为imok的元素</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">.class</td> 
   <td style="width:310px;">根据给定的class匹配元素</td> 
   <td style="width:76px;">元素集合</td> 
   <td style="width:353px;">$(".imok")选取class值为imok的元素</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">element</td> 
   <td style="width:310px;">根据给定的元素名匹配</td> 
   <td style="width:76px;">元素集合</td> 
   <td style="width:353px;">$("p")选取所有的&lt;p&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:110px;">*</td> 
   <td style="width:310px;">匹配所有元素</td> 
   <td style="width:76px;">元素集合</td> 
   <td style="width:353px;">$("*")选取所有元素</td> 
  </tr> 
 </tbody> 
</table>

### （2）层次选择器 ###

<table> 
 <tbody> 
  <tr> 
   <td style="width:185px;"><strong><span style="color:#3399ea;">选择器</span></strong></td> 
   <td style="width:250px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:83px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:331px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:185px;">$("ancestor&nbsp; descendant")</td> 
   <td style="width:250px;">选择ancestor元素里所有的descendant（后代）元素</td> 
   <td style="width:83px;">元素集合</td> 
   <td style="width:331px;"> <p>$("div span")选择&lt;div&gt;中所有的&lt;span&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:185px;">$("parent &gt; child")</td> 
   <td style="width:250px;">选择parent下的直属child元素，直属就是第一级子元素，不是所有</td> 
   <td style="width:83px;">元素集合</td> 
   <td style="width:331px;">$("div &gt; span")选取&lt;div&gt;下元素名为&lt;span&gt;且是直属关系的元素</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">$("prev + next")</td> 
   <td style="width:250px;">选取紧接在prev后的next元素</td> 
   <td style="width:83px;">元素集合</td> 
   <td style="width:331px;">$(".imok + div")选取class为imok元素的下一个同辈的&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">$("prev + siblings")</td> 
   <td style="width:250px;">选取prev元素之后的所有siblings元素</td> 
   <td style="width:83px;">元素集合</td> 
   <td style="width:331px;">$("#imok ~ div")选取id为imok的元素后面的所有同辈&lt;div&gt;元素</td> 
  </tr> 
 </tbody> 
</table>

还有几点需要注意的，就是后面两种层次选择器和next()和nextAll()的等价关系,以下两种方式是等价的：

<table> 
 <tbody> 
  <tr> 
   <td style="width:185px;">$("#imok + div")</td> 
   <td style="width:250px;">$("#imok").next("div")</td> 
  </tr> 
  <tr> 
   <td style="width:185px;">$("prev + div")</td> 
   <td style="width:250px;">$("#imok").nextAll("div")</td> 
  </tr> 
 </tbody> 
</table>

### （3）过滤选择器 ###

过滤选择器是按照一定的过滤规则来筛选出所要的DOM元素

<table> 
 <tbody> 
  <tr> 
   <td style="width:133px;"><strong><span style="color:#3399ea;">选择器（基础）</span></strong></td> 
   <td style="width:227px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:100px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:389px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：first</td> 
   <td style="width:227px;">选取第一个元素</td> 
   <td style="width:100px;">单个元素</td> 
   <td style="width:389px;"> <p>$("div:first")选取所有的&lt;div&gt;元素中的第一个&lt;div&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：last</td> 
   <td style="width:227px;">选取最后一个元素</td> 
   <td style="width:100px;">单个元素</td> 
   <td style="width:389px;">$("div:first")选取所有的&lt;div&gt;元素中的最后一个&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：not（selector）</td> 
   <td style="width:227px;">去除selector的其他元素</td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;">$("div:not（.myClass）")选取class不是myClass的&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：even</td> 
   <td style="width:227px;">选取索引是偶数的所有元素，索引从0开始</td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;"> <p>$("input:even")选取索引是偶数的&lt;input&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：odd</td> 
   <td style="width:227px;">选取索引是奇数的所有元素，索引从0开始</td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;">$("input:odd")选取索引是奇数的&lt;input&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:133px;"> <p>：eq（index）</p> <p>：gt（index）</p> <p>：lt（index）</p> </td> 
   <td style="width:227px;">选取索引等于/大于/小于index的元素，索引从0开始</td> 
   <td style="width:100px;">单个元素</td> 
   <td style="width:389px;"> <p>$("input:eq（1）")选取索引等于1的&lt;input&gt;元素</p> <p>$("input:gt（1）")选取索引大于1的&lt;input&gt;元素</p> <p>$("input:lt（1）")选取索引小于1的&lt;input&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：header</td> 
   <td style="width:227px;"> <p>选取所有的标题元素，例如&lt;h1&gt;,&lt;h2&gt;等</p> </td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;">$(":header")选取网页中所有的&lt;h1&gt;,&lt;h2&gt;</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：animated</td> 
   <td style="width:227px;">选择当前正在执行动画的所有元素</td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;">$("div：animated")选取正在执行动画的&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:133px;">：focus</td> 
   <td style="width:227px;">选取当前获得焦点的元素</td> 
   <td style="width:100px;">元素集合</td> 
   <td style="width:389px;">$(':focus')选取当前获取焦点的元素</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="width:142px;"><strong><span style="color:#3399ea;">选择器（内容）</span></strong></td> 
   <td style="width:232px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:86px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:389px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：contains（next）</td> 
   <td style="width:232px;">选取含有文本内容为“text”的元素</td> 
   <td style="width:86px;">集合元素</td> 
   <td style="width:389px;"> <p>$("div:contains（‘我’）")选取含有文本“我”的&lt;div&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：empty</td> 
   <td style="width:232px;">选取不包含子元素或文本的空元素</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;">$("div:empty")选取不包含子元素或文本的空的&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：has（selector）</td> 
   <td style="width:232px;">选取含有selector匹配元素的元素</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;">$("div:has（p）")选取含有&lt;p&gt;的&lt;div&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：parent</td> 
   <td style="width:232px;">选取含有子元素或子文本的元素</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;"> <p>$("div:parent")选取有的子元素或子文本的&lt;div&gt;元素</p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="width:142px;"><strong><span style="color:#3399ea;">选择器（可见性）</span></strong></td> 
   <td style="width:232px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:86px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:389px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：hidden</td> 
   <td style="width:232px;">选取所有不可见的元素</td> 
   <td style="width:86px;">集合元素</td> 
   <td style="width:389px;"> <p>$(":hidden")选取含有文本“我”的&lt;div&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：visible</td> 
   <td style="width:232px;">选取所有可见的元素</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;">$(":visible")选取不包含子元素或文本的空的&lt;div&gt;元素</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="width:142px;"><strong><span style="color:#3399ea;">选择器（表单）</span></strong></td> 
   <td style="width:232px;"><strong><span style="color:#3399ea;">描述</span></strong></td> 
   <td style="width:86px;"><strong><span style="color:#3399ea;">返回</span></strong></td> 
   <td style="width:389px;"><strong><span style="color:#3399ea;">示例</span></strong></td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：enabled</td> 
   <td style="width:232px;">选取所有可用的元素</td> 
   <td style="width:86px;">集合元素</td> 
   <td style="width:389px;"> <p>$("#imok:enabled")选取id为imok的表单内的所有可用元素</p> </td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：disabled</td> 
   <td style="width:232px;">选取所有不可用的元素</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;">$("#imok:disabled")选取id为imok的表单内的所有不可用元素</td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：checked</td> 
   <td style="width:232px;">选取所有被选中的元素（单选框、复选框）</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;">$("input:checked")选取所有被选中的&lt;input&gt;元素</td> 
  </tr> 
  <tr> 
   <td style="width:142px;">：selected</td> 
   <td style="width:232px;">选取所有被选中的选项元素（下拉列表）</td> 
   <td style="width:86px;">元素集合</td> 
   <td style="width:389px;"> <p>$("select option：selected")选取所有被选中的选项元素</p> </td> 
  </tr> 
 </tbody> 
</table>