jquery 常用选择器和方法以及遍历（超详细）

╰+攻爆jí腚メ 2022-10-16 09:40 321阅读 0赞

### jQuery 常用选择器和和方法 ###

*  学习总结
 *   *  一、JQuery 介绍
     *   *  1. 什么是 jQuery
         *  2. jQuery 版本介绍
         *  3. jQuery 文件介绍
     *  二、jQuery 对象
     *   *  1. jQuery 和 DOM 的区别
         *  2. jQuery 对象与 DOM 对象之间转换
         *  3. 自执行函数（三种）
     *  三、jQuery 对象常用方法
     *   *  1. 常用方法
         *  2. jQuery 常用 DOM 节点操作方法（添加、删除、复制节点）
         *  3. jQuery 元素属性操作的方法
         *   *  3.1 操作 class 属性
             *  3.2 操作 value 属性
             *  3.3 操作 css 属性
             *  3.4 操作 prop 属性
             *  3.5 操作 data 属性
             *  3.5 操作 attr 属性
         *  4. jQuery中each的三种遍历方法
     *  四、jQuery 选择器
     *   *  1. 基本选择器
         *  2. 属性选择器
         *  3. 层次选择器
         *  4. 过滤选择器
         *  5. 表单元素获取
     *  五、DOM节点
     *  六、综合小例题
 *  总结

# 学习总结 #

参考博文：  
https://blog.csdn.net/h13783313210/article/details/79832318

## 一、JQuery 介绍 ##

### 1. 什么是 jQuery ###

1）jQuery 是一个 JavaScript 函数库；  
2）jQuery 是轻量级的 JS 库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）；  
3）jQuery 是免费、开源的；  
4）jQuery 是一个兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多）。

### 2. jQuery 版本介绍 ###

1）jQuery1.x：经典版本，兼容 IE6，7，8。  
2）jQuery2.0：改进版本，及后续版本将不再支持 IE6，7，8 浏览器。

### 3. jQuery 文件介绍 ###

1）jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。  
2）jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用。

## 二、jQuery 对象 ##

### 1. jQuery 和 DOM 的区别 ###

*  通过 document.getElementById() 找到的元素和通过 $() 找不到元素不一样：  
    1）通过 jQuery 方法获取的页面元素，都是 jQuery 对象。  
    2）Query 对象其实就是对 DOM 对象进行了包装，增强了相关方法，让开发者使用起来更加便利。  
    3）虽然 jQuery 对象包装了 DOM 对象但是两者不能混用，各位可以理解为 jQuery 对象与 DOM 对象是两个不类型的对象，但是我们调用 jQuery 对象的方法，事实上底层代码还是操作的是 DOM 对象。

### 2. jQuery 对象与 DOM 对象之间转换 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
        // 都是一个函数
        <script> console.log($ === jQuery); window.onload = function () { let btn = document.getElementById("btn"); console.log(btn); // 通过 jQuery 获取 属性值 let $btn = $('#btn'); console.log($btn); // DOM 对象转 jQuery console.log($(btn)); // jQuery 对象转成 DOM 对象，这个很少用，直接获取数组第一个值 console.log($btn.get(0)); // 以后尽量使用 jQuery 方法操作页面元素，绑定事件等 } </script>
    </head>
    <body>
    <button id="btn">按钮</button>
    </body>
    </html>

### 3. 自执行函数（三种） ###

表示文档结构已经加载完成（不包含图片等非文字媒体文件），onload 则指示页面包含图片等文件在内的所有元素都加载完成。

## 三、jQuery 对象常用方法 ##

### 1. 常用方法 ###

1.  **val()**

**作用**：val() 方法返回或设置被选元素的 value 属性。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).val()</td> 
   <td align="center">用于返回值：该方法返回第一个匹配元素的 value 属性的值</td> 
  </tr> 
  <tr> 
   <td>$(selector).val(value)</td> 
   <td align="center">用于设置值：该方法设置所有匹配元素的 value 属性的值\</td> 
  </tr> 
 </tbody> 
</table>

**注意**：val() 方法通常与 HTML 表单元素一起使用。

1.  **text()**

**作用**：text() 方法设置或返回被选元素的文本内容。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).text()</td> 
   <td align="center">用于返回内容：返回所有匹配元素的文本内容（<strong>会删除 HTML 标记</strong>）</td> 
  </tr> 
  <tr> 
   <td>$(selector).text(content)</td> 
   <td align="center">用于设置内容：重写所有匹配元素的内容</td> 
  </tr> 
 </tbody> 
</table>

**注意**：text() 方法返回内容时会删除 HTML 标签

1.  **html()**

**作用**：html() 方法设置或返回被选元素的内容（innerHTML）。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).html()</td> 
   <td align="center">用于返回内容：返回<strong>第一个</strong>匹配元素的内容</td> 
  </tr> 
  <tr> 
   <td>$(selector).html(content)</td> 
   <td align="center">用于设置内容：重写所有匹配元素的内容</td> 
  </tr> 
 </tbody> 
</table>

**注意**：html() 方法返回内容时不会删除 HTML 标签

1.  **css()**

**作用**：css() 方法设置或返回被选元素的**一个或多个**样式属性。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>css(“propertyname”)</td> 
   <td align="center">返回指定的 CSS 属性的值（无指定则返回第一个）</td> 
  </tr> 
  <tr> 
   <td>css(“propertyname”, “value”)</td> 
   <td align="center">设置指定的 CSS 属性值（无指定则设置全部）</td> 
  </tr> 
 </tbody> 
</table>

1.  **get() 非ajax用法**

**作用**：get() 方法获取由选择器指定的 DOM 元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).get( index)</td> 
   <td align="center">index 可选。规定要获取哪个匹配的元素（通过 index 编号）。</td> 
  </tr> 
 </tbody> 
</table>

1.  **parent()**

**作用**：parent() 方法返回被选元素的直接父元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).parent(filter)</td> 
   <td align="center">filter 可选。规定缩小搜索父元素范围的选择器表达式。</td> 
  </tr> 
 </tbody> 
</table>

1.  **children()**

**作用**：children() 方法返回被选元素的所有直接子元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).children(filter)</td> 
   <td align="center">filter 可选。规定缩小搜索子元素范围的选择器表达式。</td> 
  </tr> 
 </tbody> 
</table>

1.  **parents()**

**作用**：parents() 方法返回被选元素的所有祖先元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).parents(filter)</td> 
   <td align="center">filter 可选。规定缩小搜索祖先元素范围的选择器表达式。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如需返回多个祖先，请使用逗号分隔每个表达式。

1.  **find()**

**作用**：方法返回被选元素的后代元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).find(filter)</td> 
   <td align="center">filter 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如需返回多个后代，请使用逗号分隔每个表达式。

1.  **eq()**

**作用**：方法返回带有被选元素的指定索引的元素（索引号从 0 开头）。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).eq(index)</td> 
   <td align="center">index 必需。规定元素的索引。可以是整数或负数。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：使用负数将从被选元素的结尾开始计算索引。

1.  **siblings()**

**作用**：方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).siblings(filter)</td> 
   <td align="center">filter 可选。规定缩小搜索同级元素范围的选择器表达式。</td> 
  </tr> 
 </tbody> 
</table>

1.  **index()**

**作用**：方法返回指定元素相对于其他指定元素的 index 位置，这些元素可通过 jQuery 选择器或 DOM 元素来指定。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).index()</td> 
   <td align="left">获得第一个匹配元素相对于其同胞元素的 index 位置。</td> 
  </tr> 
  <tr> 
   <td>$(selector).index(element)</td> 
   <td align="left">获得元素相对于选择器的 index 位置<br>element，规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如果未找到元素，index() 将返回 -1。

1.  **height()**

**作用**：height() 方法设置或返回被选元素的高度。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).height()</td> 
   <td align="center">用于返回高度：返回第一个匹配元素的高度</td> 
  </tr> 
  <tr> 
   <td>$(selector).height( value)</td> 
   <td align="center">用于设置高度：对于em, pt, etc要使用""，px为默认单位，直接写数值</td> 
  </tr> 
  <tr> 
   <td>$(selector).height(function (index,currentheight))</td> 
   <td align="center">value - 当设置高度时是必需的。规定元素的高度，单位为 px、em、pt 等。<br>function(index,currentheight) - 可选。规定返回被选元素新高度的函数。index - 返回集合中元素的 index 位置。currentheight - 返回被选元素的当前高度。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如果未找到元素，index() 将返回 -1。

1.  **trim()**

**作用**：$.trim() 函数用于去除字符串两端的空白字符。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$.trim( str )</td> 
   <td align="center">str 必选。String 类型，需要去除两端空白字符的字符串。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

### 2. jQuery 常用 DOM 节点操作方法（添加、删除、复制节点） ###

1.  **添加节点**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).append()</td> 
   <td align="center">指定<strong>元素内部</strong>添加，在<strong>被选元素的结尾</strong>插入内容</td> 
  </tr> 
  <tr> 
   <td>$(selector).prepend()</td> 
   <td align="center">指定<strong>元素内部</strong>添加，在<strong>被选元素的开头</strong>插入内容</td> 
  </tr> 
  <tr> 
   <td>$(selector).after()</td> 
   <td align="center">指定<strong>元素外部</strong>添加，在<strong>被选元素之后</strong>插入内容</td> 
  </tr> 
  <tr> 
   <td>$(selector).before()</td> 
   <td align="center">指定<strong>元素外部</strong>添加，在<strong>被选元素之前</strong>插入内容</td> 
  </tr> 
 </tbody> 
</table>

1.  **删除节点**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">元素所绑定的事件及数据是否也被移除</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).empty()</td> 
   <td align="center">是</td> 
   <td align="left">从被选元素中删除子元素，删除的是子节点，自身不变。empty()函数的返回值为jQuery类型，返回当前jQuery对象本身(以便于进行链式风格的编程)。</td> 
  </tr> 
  <tr> 
   <td>$(selector).remove()</td> 
   <td align="center">是</td> 
   <td align="left">删除被选元素（及其子元素），这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。remove()函数的返回值为jQuery类型，返回当前jQuery对象本身。</td> 
  </tr> 
  <tr> 
   <td>$(selector).detach()</td> 
   <td align="center">否</td> 
   <td align="left">删除被选元素（及其子元素）,事件和附加数据保留。detach()函数的返回值为jQuery类型，返回当前jQuery对象本身。</td> 
  </tr> 
 </tbody> 
</table>

1.  **复制节点**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).clone()</td> 
   <td align="center">复制所匹配的元素</td> 
  </tr> 
 </tbody> 
</table>

1.  **替换节点**

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).replaceWith()</td> 
   <td align="center">将所有匹配的元素用特定内容替换</td> 
  </tr> 
  <tr> 
   <td>$(selector).replaceAll()</td> 
   <td align="center">作用相同,颠倒了主宾关系</td> 
  </tr> 
 </tbody> 
</table>

### 3. jQuery 元素属性操作的方法 ###

#### 3.1 操作 class 属性 ####

1.  **addClass()**

**作用**：addClass() 方法向被选元素添加一个或多个类名。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).addClass(classname)</td> 
   <td align="left">classname - 必需。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。<br><strong>提示</strong>：如需添加多个类，请使用空格分隔类名。</td> 
  </tr> 
  <tr> 
   <td>$(selector).addClass(<br>classname,function(index,oldclass))</td> 
   <td align="left">function() - 可选。规定返回一个或多个待添加类名的函数。<br>index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。</td> 
  </tr> 
 </tbody> 
</table>

1.  **removeClass()**

**作用**：removeClass() 方法从被选元素移除一个或多个类。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).addClass(classname)</td> 
   <td align="left">classname - 可选。规定要移除的一个或多个类名称。如需移除若干个类，请使用空格分隔类名称。<br><strong>注意</strong>： 如果该参数为空，则将移除所有类名称。</td> 
  </tr> 
  <tr> 
   <td>$(selector).removeClass(<br>classname,function(index,currentclass))</td> 
   <td align="left">function() - 可选。规定返回一个或多个待添加类名的函数。<br>index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如果没有规定参数，则该方法将从被选元素中删除所有类。

1.  **hasClass()**

**作用**：hasClass() 方法检查被选元素是否包含指定的类名称。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).hasClass(classname)</td> 
   <td align="left">classname - 必需。规定需要在被选元素中查找的类。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如果没有规定参数，则该方法将从被选元素中删除所有类。

1.  **toggleClass()**

**作用**：toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除。这就是所谓的切换效果。然而，通过使用 “switch” 参数，您能够规定只删除或只添加类。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).toggleClass(classname,<br>function(index,currentclass),switch)</td> 
   <td align="left">classname - 必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。<br>function() 可选。规定返回需要添加/删除的一个或多个类名的函数。<br>index - 返回集合中元素的 index 位置。<br>currentclass - 返回被选元素的当前类名。<br>switch - 可选。布尔值，规定是否仅仅添加（true）或移除（false）类。</td> 
  </tr> 
 </tbody> 
</table>

**注意**：如果没有规定参数，则该方法将从被选元素中删除所有类。

#### 3.2 操作 value 属性 ####

1.  **val()**

**作用**：val() 方法返回或设置被选元素的 value 属性。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).val()</td> 
   <td align="center">用于返回值：该方法返回第一个匹配元素的 value 属性的值</td> 
  </tr> 
  <tr> 
   <td>$(selector).val()</td> 
   <td align="center">用于设置值：该方法设置所有匹配元素的 value 属性的值\</td> 
  </tr> 
 </tbody> 
</table>

**注意**：val() 方法通常与 HTML 表单元素一起使用。

#### 3.3 操作 css 属性 ####

1.  **css()**

**作用**：css() 方法设置或返回被选元素的**一个或多个**样式属性。

#### 3.4 操作 prop 属性 ####

*  **prop()**

*  **作用**  
    1）prop() 方法设置或返回被选元素的属性和值。  
    2）当该方法用于返回属性值时，则返回第一个匹配元素的值。  
    3）当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
   <th align="left">参数描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).prop(property)</td> 
   <td align="center">返回属性的值</td> 
   <td align="left">property - 规定属性的名称</td> 
  </tr> 
  <tr> 
   <td>$(selector).prop(property,value)</td> 
   <td align="center">设置属性和值</td> 
   <td align="left">property - 规定属性的值</td> 
  </tr> 
  <tr> 
   <td>$(selector).prop(property,<br>function(index,currentvalue))</td> 
   <td align="center">使用函数设置属性和值</td> 
   <td align="left">function(index,currentvalue) - 规定返回要设置的属性值的函数；<br>index - 检索集合中元素的 index 位置；<br>currentvalue - 检索被选元素的当前属性值</td> 
  </tr> 
  <tr> 
   <td>$(selector).prop({property:value, property:value,…})</td> 
   <td align="center">设置多个属性和值</td> 
   <td align="left">property - 规定属性的名称</td> 
  </tr> 
 </tbody> 
</table>

**注意**：prop() 方法应该用于检索属性值，例如（selected、checked）

#### 3.5 操作 data 属性 ####

*  **data()**

**作用**：data 方法，针对 data- 开头的属性的获取，若值是 JSON 格式, 自动转成 JS 对象。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
   <th align="left">参数描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).data(name)</td> 
   <td align="center">从被选元素中返回附加的数据</td> 
   <td align="left">name - 可选，为data-后面的名称。规定要取回的数据的名称；<br>如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。</td> 
  </tr> 
  <tr> 
   <td>$(selector).data(name,value)</td> 
   <td align="center">向被选元素附加数据</td> 
   <td align="left">name - 必需。规定要设置的数据的名称；<br> value - 必需。规定要设置的数据的值。</td> 
  </tr> 
 </tbody> 
</table>

**代码演示**：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
    <script> $(document).ready(function(){ testObj=new Object(); testObj.greetingMorn="Good Morning!"; testObj.greetingEve="Good Evening!"; $("#btn1").click(function(){ $("div").data(testObj); }); $("#btn2").click(function(){ alert($("div").data("greetingEve")); }); }); </script>
    </head>
    <body>
    <button id="btn1">将数据附加到div元素</button><br>
    <button id="btn2">获取数据附加到div元素</button>
    <div></div>
    </body>
    </html>

#### 3.5 操作 attr 属性 ####

*  **attr()**

**作用**：attr() 方法设置或返回被选元素的属性和值。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th align="center">作用</th> 
   <th align="center">参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(selector).attr(attribute)</td> 
   <td align="center">name - 可选。返回第一个匹配元素的值</td> 
   <td align="center">attribute - 规定属性的名称</td> 
  </tr> 
  <tr> 
   <td>$(selector).attr(attribute,value)</td> 
   <td align="center">为匹配元素设置一个或多个属性/值对</td> 
   <td align="center">value - 规定属性的值</td> 
  </tr> 
  <tr> 
   <td>$(selector).attr(attribute,function( index,currentvalue))</td> 
   <td align="center">可选。返回第一个匹配元素的值</td> 
   <td align="center">规定要返回属性值到集合的函数<br>index - 接受集合中元素的 index 位置<br>currentvalue - 接受被选元素的当前属性值</td> 
  </tr> 
  <tr> 
   <td>$(selector).attr({attribute: value,attribute: value,…}</td> 
   <td align="center">为匹配元素设置一个或多个属性/值对</td> 
   <td align="center"></td> 
  </tr> 
 </tbody> 
</table>

**小结**： **下面是每个属性对应方法的选取**

### 4. jQuery中each的三种遍历方法 ###

[jQuery中each的三种遍历方法：博客地址][jQuery_each]

## 四、jQuery 选择器 ##

### 1. 基本选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>实例</th> 
   <th align="center">选取</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("*")</td> 
   <td align="center">所有元素</td> 
  </tr> 
  <tr> 
   <td>$("#lastname")</td> 
   <td align="center">id=“lastname” 的元素</td> 
  </tr> 
  <tr> 
   <td>$(".intro")</td> 
   <td align="center">所有 class=“intro” 的元素</td> 
  </tr> 
  <tr> 
   <td>$(“p”)</td> 
   <td align="center">所有 p 元素</td> 
  </tr> 
  <tr> 
   <td>$(".intro.demo")</td> 
   <td align="center">所有 class=“intro” 且 class=“demo” 的元素</td> 
  </tr> 
 </tbody> 
</table>

### 2. 属性选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>实例</th> 
   <th align="center">选取</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("[href]")</td> 
   <td align="center">所有带有 href 属性的元素</td> 
  </tr> 
  <tr> 
   <td>$("[href=’#’]")</td> 
   <td align="center">所有 href 属性的值等于 “#” 的元素</td> 
  </tr> 
  <tr> 
   <td>$("[href!=’#’]")</td> 
   <td align="center">所有 href 属性的值不等于 “#” 的元素</td> 
  </tr> 
  <tr> 
   <td>$ ("[href$=’.jpg’]")</td> 
   <td align="center">所有 href 属性的值包含以 “.jpg” 结尾的元素</td> 
  </tr> 
  <tr> 
   <td>$(“th,td,.intro”)</td> 
   <td align="center">所有带有匹配选择的元素</td> 
  </tr> 
  <tr> 
   <td>$(":selected")</td> 
   <td align="center">:selected 选择器选取被选择的 option 元素</td> 
  </tr> 
  <tr> 
   <td>$(":checked")</td> 
   <td align="center">:checked 选择器选取被选择的 checkbox/radio 元素</td> 
  </tr> 
 </tbody> 
</table>

案例代码：

### 3. 层次选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>实例</th> 
   <th align="center">选取</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$("#myid a")</td> 
   <td align="center">获取所有子孙后代元素列表</td> 
  </tr> 
  <tr> 
   <td>$("#myid&gt;a")</td> 
   <td align="center">获取一级子元素列表（不包含孙元素）</td> 
  </tr> 
  <tr> 
   <td>$("#myid+a")</td> 
   <td align="center">获取紧接在之后的同辈元素列表，等价于$("#myid&gt;a").next(“a”)</td> 
  </tr> 
  <tr> 
   <td>$("#myid~a")</td> 
   <td align="center">获取之后的所有同辈元素列表，等价于$("#myid").nextAll(“a”)</td> 
  </tr> 
  <tr> 
   <td>$("#myid").siblings(“a”)</td> 
   <td align="center">获取所有同辈元素列表，无论前后</td> 
  </tr> 
  <tr> 
   <td>$("#myid").prev(“a”)</td> 
   <td align="center">获取紧接在之后的同辈元素列表</td> 
  </tr> 
  <tr> 
   <td>$("#myid").find(“a”)</td> 
   <td align="center">获取后代元素中所有的a(包含子孙后代)</td> 
  </tr> 
 </tbody> 
</table>

案例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>jQuery 层次选择器</title>
        <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"> </script>
        <style type="text/css"> .selected{ background-color: gray;}</style>
        <script> $(function () { // 问题 1：获取所有 ul 下的所有 li 元素，并打印分析结果 console.log($('ul li')); // 输出了 8 个 li，中间空格表示获取所有子孙后代 li 元素 // 问题 2：获取 id 为 myul 下的所有一级 li 子元素，并打印分析结果 console.log($('#myul > li')); // 输出了 4 个 li，中间 > 表示获取一级子元素 // 问题 3：获取所有 label 元素后的 input 元素，并打印分析结果 console.log($('label ~ input')); // 输出结果为（text1、text2、text3、text4） // 问题 4：获取紧跟着 label 元素后的 input 元素，并打印分析结果 console.log($('label + input')); // 输出结果为（text1、text3） }); </script>
    </head>
    <body>
    <ul id="myul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul>
        </li>
    </ul>
    <label>LABEL1</label>
    <input type="text" value="text1"/>
    <input type="text" value="text2"/>
    <br/>
    <label>LABEL2</label>
    <input type="text" value="text3"/>
    <input type="text" value="text4"/>
    <br/>
    <label>
        LABEL3
        <input type="text" value="text5"/>
        <input type="text" value="text6"/>
    </label>
    </body>
    </html>

### 4. 过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>实例</th> 
   <th align="center">选取</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(“p:first”)</td> 
   <td align="center">第一个 p 元素</td> 
  </tr> 
  <tr> 
   <td>$(“p:last”)</td> 
   <td align="center">最后一个 p 元素</td> 
  </tr> 
  <tr> 
   <td>$(“tr:even”)</td> 
   <td align="center">所有偶数 tr 元素</td> 
  </tr> 
  <tr> 
   <td>$(“tr:odd”)</td> 
   <td align="center">所有奇数 tr 元素</td> 
  </tr> 
  <tr> 
   <td>$(“ul li:eq(3)”)</td> 
   <td align="center">列表中的第四个元素（index 从 0 开始）</td> 
  </tr> 
  <tr> 
   <td>$(“ul li:gt(3)”)</td> 
   <td align="center">列出 index 大于 3 的元素</td> 
  </tr> 
  <tr> 
   <td>$(“ul li:lt(3)”)</td> 
   <td align="center">列出 index 小于 3 的元素</td> 
  </tr> 
  <tr> 
   <td>$(“input:not(:empty)”)</td> 
   <td align="center">所有不为空的 input 元素</td> 
  </tr> 
  <tr> 
   <td>$(":header")</td> 
   <td align="center">所有标题元素 h1 - h6</td> 
  </tr> 
  <tr> 
   <td>$(":contains(‘W3School’)")</td> 
   <td align="center">包含指定字符串的所有元素</td> 
  </tr> 
  <tr> 
   <td>$(“p:hidden”)</td> 
   <td align="center">所有隐藏的 <p> 元素</p></td> 
  </tr> 
 </tbody> 
</table>

### 5. 表单元素获取 ###

<table> 
 <thead> 
  <tr> 
   <th>实例</th> 
   <th align="center">选取</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(":input")</td> 
   <td align="center">所有 元素</td> 
  </tr> 
  <tr> 
   <td>$(":text")</td> 
   <td align="center">所有 type=“text” 的 元素</td> 
  </tr> 
  <tr> 
   <td>$(":password")</td> 
   <td align="center">所有 type=“password” 的 元素</td> 
  </tr> 
  <tr> 
   <td>$(":radio")</td> 
   <td align="center">所有 type=“radio” 的 元素</td> 
  </tr> 
 </tbody> 
</table>

## 五、DOM节点 ##

博客地址：[DOM节点的使用（常用方法+代码）][DOM]

## 六、综合小例题 ##

例题一：[JS实现列表移动（通过document操作select标签）][JS_document_select]  
例题二：[用 JS（JavaScript ）实现增删改查][JS_JavaScript]  
例题三：[用 JS（JavaScript ）实现多选框的全选、反选、多选][JS_JavaScript 1]  
例题四：[jQuery 实现全选、多选、反选][jQuery]  
例题五：[JS 实现下拉框回显][JS]  
例题六：[JS 实现列表移动][JS 1]  
例题七：[JS 实现下拉框去重][JS 2]

# 总结 #

以上就是对 JavaScript 入门的总结了，代码仅供参考，欢迎讨论交流。  
DOM节点的应用请看这篇博客：[DOM节点的使用（常用方法+代码）][DOM]

[jQuery_each]: https://blog.csdn.net/zzvar/article/details/117392290
[DOM]: https://blog.csdn.net/zzvar/article/details/116106390
[JS_document_select]: https://blog.csdn.net/zzvar/article/details/116105279
[JS_JavaScript]: https://blog.csdn.net/zzvar/article/details/116105103
[JS_JavaScript 1]: https://blog.csdn.net/zzvar/article/details/116073261
[jQuery]: https://blog.csdn.net/zzvar/article/details/117392090
[JS]: https://blog.csdn.net/zzvar/article/details/117391978
[JS 1]: https://blog.csdn.net/zzvar/article/details/117392048
[JS 2]: https://blog.csdn.net/zzvar/article/details/117392072