jQuery学习（二）——jQuery选择器总结

灰太狼 2021-06-22 15:35 403阅读 0赞

# 选择器总结 #

## 什么是jQuery选择器？ ##

*  jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。  
    注意：jQuery选择器返回的是jQuery对象。
 *  jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
 *  jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。  
    所以我们平时真正能用到的只是少数的最常用的选择器。

## 基本选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id选择器</td> 
   <td><code>$('#id')</code></td> 
   <td>获取指定id的元素</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td><code>#('.class')</code></td> 
   <td>获取同一类class的元素</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td><code>$('div')</code></td> 
   <td>获取同一类标签的所有元素</td> 
  </tr> 
  <tr> 
   <td>并集选择器</td> 
   <td><code>$('div,p,li')</code></td> 
   <td>使用逗号分隔，只要符合条件之一就可</td> 
  </tr> 
  <tr> 
   <td>交集选择器</td> 
   <td><code>$('div.redClass')</code></td> 
   <td>获取class为redClass的div元素</td> 
  </tr> 
 </tbody> 
</table>

> 总结：用法和CSS选择器是一样的。

## 层级选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>子代选择器</td> 
   <td><code>$("ul&gt;li");</code></td> 
   <td align="left">使用&gt;号，获取儿子层级的元素，注意，并不会获取孙子层级的元素</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td><code>$("ul li");</code></td> 
   <td align="left">使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等</td> 
  </tr> 
 </tbody> 
</table>

> 总结：跟css的选择器用法一模一样。

## 过滤选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:eq（index）</td> 
   <td><code>$("li:eq(2)").css("color", "red");</code></td> 
   <td align="left">获取到的li元素中，选择索引号为2的元素，索引号index从0开始。</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td><code>$("li:odd").css("color", "red");</code></td> 
   <td align="left">获取到的li元素中，选择索引号为奇数的元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td><code>$("li:even").css("color", "red");</code></td> 
   <td align="left">获取到的li元素中，选择索引号为偶数的元素</td> 
  </tr> 
 </tbody> 
</table>

> 总结：这类选择器都带冒号

## 筛选选择器(方法) ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>children(selector)</td> 
   <td><code>$("ul").children("li")</code></td> 
   <td>相当于$(“ul&gt;li”)，子类选择器</td> 
  </tr> 
  <tr> 
   <td>find(selector)</td> 
   <td><code>$("ul").find("li");</code></td> 
   <td>相当于$(“ul li”),后代选择器</td> 
  </tr> 
  <tr> 
   <td>siblings(selector)</td> 
   <td><code>$("#first").siblings("li");</code></td> 
   <td>查找兄弟节点，不包括自己本身。</td> 
  </tr> 
  <tr> 
   <td>parent()</td> 
   <td><code>$("#first").parent();</code></td> 
   <td>查找父亲</td> 
  </tr> 
  <tr> 
   <td>eq(index)</td> 
   <td><code>$("li").eq(2);</code></td> 
   <td>相当于$(“li:eq(2)”),index从0开始</td> 
  </tr> 
  <tr> 
   <td>next()</td> 
   <td><code>$("li").next()</code></td> 
   <td>找下一个兄弟</td> 
  </tr> 
  <tr> 
   <td>prev()</td> 
   <td><code>$("li").prev()</code></td> 
   <td>找上一次兄弟</td> 
  </tr> 
 </tbody> 
</table>

> 总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

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

END.  
如果你不沉下心来认真练习，所有的阅读都是白费的。