JQuery中的选择器

Myth丶恋晨 2022-11-26 07:37 107阅读 0赞

### JQuery引入与选择器 ###

*  JQuery的引入
 *  JQuery中的$
 *  JQuery选择器
 *   *  1.基本选择器
     *  2.层次选择器
     *  3.过滤选择器
     *   *  3.1 、基本过滤选择器
         *  3.2、内容过滤选择器
         *  3.3 、可见性过滤选择器
         *  3.4 、属性过滤选择器
         *  3.5 、子元素过滤选择器
         *  3.6 、表单对象属性过滤选择器
     *  4、表单选择器

# JQuery的引入 #

**1.本地引入**

**2.远程引入**

# JQuery中的$ #

在jQuery库中，$就是jQuery的一个简写形式。  
如：

$('id') ==>  jQuery('#id')

在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法，  
以免在同时使用JavaScript和jQuery时发生冲突。

# JQuery选择器 #

## 1.基本选择器 ##

*  通配符选择器  
    选择页面内所有元素

$('*')

*  id选择器  
    根据指定id匹配元素

$('#id')

*  类选择器  
    根据类名匹配元素

$('.class')

*  元素名选择器  
    根据元素名匹配元素

$('div')

*  分组选择器  
    分组匹配元素

$('div,span,.hotclass')

## 2.层次选择器 ##

*  选择E1下所有E2

$('E1 E2')

*  选择E1下的直接子元素

$('E1> E2')

*  选择E1后紧邻的一个兄弟元素

$('E1+ E2')
    //等同于
    $(E1).next(E2)

*  选择E1后所有的兄弟元素

$('E1~ E2')
    //等同于
    $(E1).nextAll(E2)

## 3.过滤选择器 ##

主要是通过特定的过滤规则来筛选出需要的DOM  
元素，过滤规则与CSS中的伪类选择器语法相  
同，即过滤选择器都是以冒号(:)开头。

### 3.1 、基本过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>选择第一个元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>选择最后一个元素</td> 
  </tr> 
  <tr> 
   <td>:not(E1)</td> 
   <td>去除所有E1选择器匹配的元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>选择索引是偶数的所有元素，索引从0开始</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>选择索引是奇数的所有元素，索引从0开始</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>选择索引值是index的元素，index从0开始</td> 
  </tr> 
  <tr> 
   <td>:gt(index)</td> 
   <td>选择索引值大于index的元素,index从0开始</td> 
  </tr> 
  <tr> 
   <td>:lt(index)</td> 
   <td>选择索引值小于index的元素,index从0开始</td> 
  </tr> 
  <tr> 
   <td>:header</td> 
   <td>选择所有的标题元素,h1~h6</td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>选择当前正在执行动画的所有元素</td> 
  </tr> 
 </tbody> 
</table>

### 3.2、内容过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:contains(text)</td> 
   <td>选择含有text文本内容的元素</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>选择不包含子元素或文本的空元素</td> 
  </tr> 
  <tr> 
   <td>:has(E1)</td> 
   <td>选择包含有(E1选择器匹配的元素)的所有元素</td> 
  </tr> 
  <tr> 
   <td>:parent</td> 
   <td>选择含有子元素或文本的元素</td> 
  </tr> 
 </tbody> 
</table>

### 3.3 、可见性过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>选择所有不可见元素</td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>选择所有可见元素</td> 
  </tr> 
 </tbody> 
</table>

### 3.4 、属性过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[attribute]</td> 
   <td>选择拥有此属性的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute=value]</td> 
   <td>选择属性值为value的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute!=value]</td> 
   <td>选择属性值不为value的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute^=value]</td> 
   <td>选择属性值以value开始的元素</td> 
  </tr> 
  <tr> 
   <td>[attribute$=value]</td> 
   <td>选择属性以value值结束的元素</td> 
  </tr> 
  <tr> 
   <td>[A1][A2]…A[N]</td> 
   <td>用属性选择器合并成一个复合属性选择器。满足多个条件。</td> 
  </tr> 
 </tbody> 
</table>

### 3.5 、子元素过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:nth-child(index/even/odd)</td> 
   <td>选取每个父元素下的第index素或奇偶元素.(indexc从1开始)</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>选择每个父元素的第1个子元素</td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>选择每个父元素的最后1个子元素</td> 
  </tr> 
  <tr> 
   <td>:only-child</td> 
   <td>如果某个元素是它父元素中惟一的子元素,那么将会被匹配.素中含有其他元素,则不会</td> 
  </tr> 
 </tbody> 
</table>

**:nth-child()选择器详细功能描述:**  
1.:nth-child(even)能选择每个父元素下的索引值是偶数的元素  
2.:nth-child(odd)选择出每个父元素下的索引值是奇数的元素  
3.:nth-child(2)选取每个父元素下的索引值等于2的元素  
4.:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始  
5.:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

### 3.6 、表单对象属性过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:enabled</td> 
   <td>选择所有可用元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>选择所有不可用元素</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>选择所有被选中的元素(单选框,复选框)</td> 
  </tr> 
  <tr> 
   <td>:selected</td> 
   <td>选择所有被选中的选项元素(下拉列表)</td> 
  </tr> 
 </tbody> 
</table>

## 4、表单选择器 ##

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:input</td> 
   <td>匹配所有input、textarea、select、button元素</td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>选择所有单行文本框</td> 
  </tr> 
  <tr> 
   <td>:password</td> 
   <td>选择所有密码框</td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>选择所有单选框</td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>选择所有复选框</td> 
  </tr> 
  <tr> 
   <td>:submit</td> 
   <td>选择所有t提交按钮</td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>选择所有图像按钮</td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>选择所有重置按钮</td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>选择所有按钮</td> 
  </tr> 
  <tr> 
   <td>:file</td> 
   <td>匹配所有文件域</td> 
  </tr> 
  <tr> 
   <td>:hidden</td> 
   <td>匹配所有不可见元素</td> 
  </tr> 
 </tbody> 
</table>

[访问链接获得所有版本JQuery][JQuery]

[JQuery]: http://www.jquery.com