JavaScript交互式网页设计 • 【第6章初识jQuery】

缺乏、安全感 2022-12-20 11:15 73阅读 0赞

# [全部章节   >>>>][Link 1] #

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

**本章目录**

6.1 jQuery概述

6.1.1 初识 jQuery

6.1.2 jQuery 基本功能

6.1.3 搭建 jQuery 开发环境

6.1.4 编写一个简单的 jQuery 应用

6.1.5 jQuery代码的特点

6.1.6 实践练习

6.2 jQuery 基本选择器

6.2.1 jQuery 选择器概述

6.2.2 基本选择器

6.2.3 实践练习

6.3 过滤选择器

6.3.1 基本过滤选择器

6.3.2 内容过滤选择器

6.3.3 可见性过滤选择器

6.3.4 属性过滤选择器

6.3.5 实践练习

6.4 层次选择器和表单选择器

6.4.1 层次选择器

6.4.2 表单选择器

6.4.3 实践练习

总结:

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

# 6.1 jQuery概述 #

## 6.1.1 初识 jQuery ##

为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS

其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库

*  集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
 *  它的主旨是以更少的代码实现更多的功能（Write less,do more）

## 6.1.2 jQuery 基本功能 ##

**jQuery 基本功能**

*  访问和操作 DOM 元素
 *  对页面事件的处理
 *  大量插件在页面中的运用
 *  与 Ajax 技术的完美结合
 *  大幅提高开发效率

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

## 6.1.3 搭建 jQuery 开发环境 ##

*  下载 jQuery 文件库（http://jquery.com）
 *  引入 jQuery 文件库

在页面<head></head> 标签对中加入如下代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1][]

**示例：单击按钮时，隐藏的 <div> 逐渐放大并显示出来**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2][]

## 6.1.4 编写一个简单的 jQuery 应用 ##

*  $(document).ready(function()\{ \}); 类似JavaScript代码:window.οnlοad=function()\{   \}
 *  $(document).ready 在页面框架下载完毕后就执行；而 window.onload 必须在页面全部加载完毕（包括下载图片）后才能执行
 *  $(document).ready(function()\{   \}) 可以简写成 $(function()\{   \})
 *  $("\#btn").click(function()\{   \});  使用 click() 方法，将函数绑定到指定元素的 click 事件中，单击按钮时，绑定的函数就会执行

## 6.1.5 jQuery代码的特点 ##

**示例：单击 <h3> 标签时，切换属性值，同时后面的兄弟元素会切换其显示或隐藏状态**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4][]

*  **$符号标志：**是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志
 *  **隐式循环：**当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素
 *  **链式书写：**可以将针对于同一个对象多个操作命令写在一个语句中，还可以插入换行和空格

## [6.1.6 实践练习][6.1.6] ##

# 6.2 jQuery 基本选择器 #

## 6.2.1 jQuery 选择器概述 ##

使用jQuery选择器可以选择页面元素，并生成jQuery对象，能够使用jQuery中的方法。jQuery 对页面元素的选择完全继承了 CSS 选择器的语法规则

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5][]

## 6.2.2 基本选择器 ##

基本选择器是由标签 id、class、标签名和多个选择符组成

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>#id</p> </td> 
   <td> <p>根据&nbsp;id&nbsp;属性值选取元素</p> </td> 
   <td> <p>单个元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.class&nbsp;</p> </td> 
   <td> <p>根据&nbsp;class&nbsp;属性值选取元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>element</p> </td> 
   <td> <p>根据给定的标签名选取元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>*</p> </td> 
   <td> <p>选取所有元素，包括&nbsp;html&nbsp;和&nbsp;body&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>selector1,selector2,…,selectorN&nbsp;</p> </td> 
   <td> <p>将每一个选择器匹配到的元素合并后一起返回</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
 </tbody> 
</table>

**示例：使用jQuery 显示元素并设置其样式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6][]

## [6.2.3 实践练习][6.2.3] ##

# 6.3 过滤选择器 #

## 6.3.1 基本过滤选择器 ##

过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（：）开头

**过滤选择器可以分为**

*  基本过滤选择器
 *  内容过滤选择器
 *  可见性过滤选择器
 *  属性过滤选择器

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>first()&nbsp;或&nbsp;:first</p> </td> 
   <td> <p>获取第一个元素</p> </td> 
   <td> <p>单个元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>last()&nbsp;或&nbsp;:last&nbsp;</p> </td> 
   <td> <p>获取最后一个元素</p> </td> 
   <td> <p>单个元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:not(selector)&nbsp;</p> </td> 
   <td> <p>获取除给定选择器之外的所有元素</p> </td> 
   <td> <p>元&nbsp;素&nbsp;集&nbsp;合，&nbsp;如$("li:not(.title)")&nbsp;获&nbsp;取class&nbsp;不是&nbsp;title&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:even</p> </td> 
   <td> <p>获取索引值为偶数的元素，索引号从&nbsp;0&nbsp;开始</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:odd</p> </td> 
   <td> <p>将每一个选择器匹配到的元素合并后一起返回</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:eq(index)</p> </td> 
   <td> <p>获取索引值等于&nbsp;index&nbsp;的元素，索引号从&nbsp;0&nbsp;开始</p> </td> 
   <td> <p>单个元素，如&nbsp;$(“li:eq(1)”)&nbsp;获取索引等于&nbsp;1&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:gt(index)</p> </td> 
   <td> <p>获取索引值大于&nbsp;index&nbsp;的元素，索引号从&nbsp;0&nbsp;开始</p> </td> 
   <td> <p>元素集合，如&nbsp;$("li:gt(1)")&nbsp;获取索引大</p> <p>于但不包括&nbsp;1&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:lt(index)</p> </td> 
   <td> <p>获取索引值小于&nbsp;index&nbsp;的元素，索引号从&nbsp;0&nbsp;开始</p> </td> 
   <td> <p>元素集合，如&nbsp;$("li:lt(1)")&nbsp;获取索引小</p> <p>于但不包括&nbsp;1&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:header&nbsp;</p> </td> 
   <td> <p>获取所有标题元素，如&nbsp;h1~h6&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:animated</p> </td> 
   <td> <p>获取正在执行动画效果的元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
 </tbody> 
</table>

**示例：使用基本过滤器定位 DOM 元素，改变元素样式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7][]

## 6.3.2 内容过滤选择器 ##

内容过滤选择器根据元素中的文字内容或所包含的子元素特征来获取元素

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:contains(text)</p> </td> 
   <td> <p>获取含有文本内容为&nbsp;text&nbsp;的元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:empty</p> </td> 
   <td> <p>获取不包含后代元素或者文本的空元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:has(selector)</p> </td> 
   <td> <p>获取含有后代元素为&nbsp;selector&nbsp;的元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:parent&nbsp;</p> </td> 
   <td> <p>获取含有后代元素或者文本的非空元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
 </tbody> 
</table>

> 在 :contains(text) 内容过滤选择器中，如果参数 text 内容出现在匹配元素的任何后代元素中，也认为该元素含有文本内容 text。如果参数 text 使用英文字母，则有大小写的区别
> 
> <input>、<img>、<br> 和 <hr> 等标签属于不包含后代元素和文本的空元素

**示例：使用内容过滤选择器查找 DOM 元素，改变元素样式**

$(function() {
          $("#btnContain").click(function() {
    	    // 获取含有文本内容为 A 的 div
            $("div:contains('A')").css("background-color","#f00");
          });
          $("#btnEmpty").click(function() {       
            $("div:empty").css("background-color","#0f0"); //获取不包含后代元素或文本的div
          });
          $("#btnHas").click(function() {       
            $("div:has(span)").css("background-color","#00f"); //获取含有后代元素为span的元素
          });
          $("#btnParent").click(function() {
    	    //获取含有后代元素或者文本的div元素
            $("div:parent").css("background-color","white"); }); });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8][]

## 6.3.3 可见性过滤选择器 ##

可见性过滤选择器根据元素是否可见的特征来获取元素

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:hidden</p> </td> 
   <td> <p>选取不可见元素</p> </td> 
   <td> <p>元素集合，如&nbsp;$(":hidden")&nbsp;选取所有隐藏的元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:visible</p> </td> 
   <td> <p>选取可见元素&nbsp;</p> </td> 
   <td> <p>元素集合，如&nbsp;$(":visible")&nbsp;选取所有可见的元素</p> </td> 
  </tr> 
 </tbody> 
</table>

> 不可见元素包括：css 样式中 display 属性值为 none 的元素、type 属性值为 hidden 的 <input> 元素及宽高设置为 0 的元素

**示例：使用可见性过滤选择器锁定 DOM 元素，改变元素样式**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9][]

## 6.3.4 属性过滤选择器 ##

属性过滤选择器根据元素的某个属性获取元素，以“\[”号开始、以“\]”号结束

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>说明</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute]</p> </td> 
   <td> <p>获取拥有该属性的所有元素，如&nbsp;$('li[title]')&nbsp;表示获取所有包含title&nbsp;属性的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute=value]</p> </td> 
   <td> <p>获取某属性值为&nbsp;value&nbsp;的所有元素，如&nbsp;$('li[title=test2]')&nbsp;表示获取所有包含&nbsp;title&nbsp;属性且属性值等于&nbsp;test2&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute!=value]</p> </td> 
   <td> <p>获取某属性值不等于&nbsp;value&nbsp;的所有元素，如&nbsp;$('li[title!=test2]')&nbsp;表示获取所有包含&nbsp;title&nbsp;属性且属性值不等于&nbsp;test2&nbsp;的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute^=value]</p> </td> 
   <td> <p>选取属性值以&nbsp;value&nbsp;开头的所有元素，如&nbsp;$('a[href^="mailto:"]')&nbsp;表示获取所有包含&nbsp;href&nbsp;属性，且属性值以&nbsp;mailto:&nbsp;开头的&nbsp;&lt;a&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute$=value]</p> </td> 
   <td> <p>选取属性值以&nbsp;value&nbsp;结束的所有元素，如&nbsp;$('a[href$=".zip"]')&nbsp;表示获取所有包含&nbsp;href&nbsp;属性，且属性值以&nbsp;.zip&nbsp;结尾的&nbsp;&lt;a&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[attribute*=value]</p> </td> 
   <td> <p>选&nbsp;取&nbsp;属&nbsp;性&nbsp;值&nbsp;中&nbsp;包&nbsp;含&nbsp;value&nbsp;的&nbsp;所&nbsp;有&nbsp;元&nbsp;素，&nbsp;如&nbsp;$('a[href*="jquery.com"]')&nbsp;表示获取所有包含&nbsp;href&nbsp;属性且属性值中包含&nbsp;jquery.com的&nbsp;&lt;a&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>[selector1][selector2]…[selectorN]</p> </td> 
   <td> <p>合并多个选择器，满足多个条件，每选择一次将缩小一次范围，如&nbsp;$('li[id][title^=test]')&nbsp;选取所有拥有属性&nbsp;id&nbsp;且属性&nbsp;title&nbsp;以&nbsp;test开头的&nbsp;&lt;li&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
 </tbody> 
</table>

**示例：使用属性过滤选择器锁定 DOM 元素，全选筛选框**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 10][]

## [6.3.5 实践练习][6.3.5] ##

# 6.4 层次选择器和表单选择器 #

## 6.4.1 层次选择器 ##

层次选择器通过 DOM 元素之间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成

<table> 
 <tbody> 
  <tr> 
   <td> <p>名称</p> </td> 
   <td> <p>语法</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>后代选择器</p> </td> 
   <td> <p>selector1&nbsp;&nbsp;selector2</p> </td> 
   <td> <p>从&nbsp;selector1&nbsp;的后代元素里选取&nbsp;selector2</p> </td> 
   <td> <p>元素集合，如&nbsp;$(“#nav span”)&nbsp;表示选取&nbsp;#nav下所有的&lt;span&gt;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>子选择器</p> </td> 
   <td> <p>selector1&gt;selector2</p> </td> 
   <td> <p>从&nbsp;selector1&nbsp;的子元素里选取&nbsp;selector2</p> </td> 
   <td> <p>元素集合，如("#nav&gt;span")表示选取&nbsp;#nav&nbsp;的子元素&lt;span&gt;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>相邻元素选择器</p> </td> 
   <td> <p>selector1+selector2</p> </td> 
   <td> <p>从&nbsp;selector1&nbsp;后面的第一个</p> <p>兄弟元素里选取&nbsp;selector2</p> </td> 
   <td> <p>元素集合，如&nbsp;$("h2+dl")&nbsp;表示选取紧邻&lt;h2&gt;元素之后的同辈元素&nbsp;&lt;dl&gt;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>同辈元素选择器</p> </td> 
   <td> <p>selector1~selector2</p> </td> 
   <td> <p>从&nbsp;selector1&nbsp;后面的所有兄</p> <p>弟元素里选取&nbsp;selector2</p> </td> 
   <td> <p>元&nbsp;素&nbsp;集&nbsp;合，&nbsp;如&nbsp;$("h2~dl")&nbsp;表&nbsp;示&nbsp;选&nbsp;取&lt;h2&gt;&nbsp;元素之后所有的同辈元素&lt;dl&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

> **selector1 selector2** 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
> 
> **selector1+selector2** 可以使用 jQuery 对象的 next() 方法代替
> 
> **selector1~selector2** 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后
> 
> **selector1 selector2 **与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素

**示例：使用层次选择器锁定 DOM 元素**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 11][]

## 6.4.2 表单选择器 ##

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
   <td> <p>返回值</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:input</p> </td> 
   <td> <p>获取&nbsp;&lt;input&gt;&lt;textarea&gt;&lt;select&gt;&lt;button&gt;&nbsp;元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:text&nbsp;</p> </td> 
   <td> <p>获取符合&nbsp;[type=text]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:password</p> </td> 
   <td> <p>获取符合&nbsp;[type=password]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:radio</p> </td> 
   <td> <p>获取符合&nbsp;[type=radio]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:checkbox</p> </td> 
   <td> <p>获取符合&nbsp;[type=checkbox]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:image</p> </td> 
   <td> <p>获取符合&nbsp;[type=image]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:file</p> </td> 
   <td> <p>获取符合&nbsp;[type=file]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:hidden&nbsp;</p> </td> 
   <td> <p>参考“可见性过滤选择器”&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:button</p> </td> 
   <td> <p>获取&nbsp;&lt;button&gt;&nbsp;元素和符合&nbsp;[type=button]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:submit</p> </td> 
   <td> <p>获取符合&nbsp;[type=submit]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素&nbsp;</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:reset</p> </td> 
   <td> <p>获取符合&nbsp;[type=reset]&nbsp;的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
   <td> <p>元素集合</p> </td> 
  </tr> 
 </tbody> 
</table>

**表单对象属性过滤选择器**

表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤

<table> 
 <tbody> 
  <tr> 
   <td> <p>选择器</p> </td> 
   <td> <p>功能</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:enabled</p> </td> 
   <td> <p>选取可用的表单元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:disabled</p> </td> 
   <td> <p>选取不可用的表单元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:checked</p> </td> 
   <td> <p>选取被选中的&nbsp;&lt;input&gt;&nbsp;元素</p> </td> 
  </tr> 
  <tr> 
   <td> <p>:selected</p> </td> 
   <td> <p>选取被选中的&nbsp;&lt;option&gt;&nbsp;元素</p> </td> 
  </tr> 
 </tbody> 
</table>

**示例：使用表单选择器和表单对象属性过滤选择器锁定 DOM 元素**

$(function() {// 页面加载完毕事件
        $("#pa :button").click(function() {
            // 选择器 #pa 后的空格表示获取后代元素
            $("#pa :text:enabled").css("border","1px solid red");
        });
        $("#pb :button").click(function() {
            $("#pb :radio:checked").parent().css("background-color","#63c");
        });
        $("#pc :button").click(function() {
            $("#pc :checkbox:checked").parent().css("background-color","#63c");
        });
        $("#pd :button").click(function() {
            var info = " 你最喜欢的球星是："
            info += $("#pd :input option:selected").val();
            alert(info);
        }); 
    });

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 12][]

## [6.4.3 实践练习][6.4.3] ##

# 总结: #

*  jQuery代码的特点：”$”标志、隐式循环、链式书写
 *  jQuery中基本选择器有“\#id”、“.class”、“element”和“\*”
 *  基本过滤选择器有“:first”、“:last”、“:not”、“:even”、“：odd”、“:eq”、“:gt”、“:lt”、“:header”和“：animated”
 *  内容过滤选择器有“：contains”、“:empty”、“:has”和“:parent” 可见性过滤选择器有“：hidden”和“:visible”
 *  属性过滤选择器有“\[attribute\]”、“\[attribute=value\]”和“ \[attribute=!value\]”等
 *  层次选择器有“selector1 selector2”、“ selector1> selector2”、“ selector1 +selector2”和“ selector1 ~selector2”
 *  表单选择器有“:input”、“:text”、“:password”、“:radio”和“:checkbox”等

[Link 1]: https://blog.csdn.net/weixin_44893902/article/details/109329380
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/96ce044a268d47c89c4db90ceeab27c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201111221224477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201111221301291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201111221538532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201111221542966.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[6.1.6]: https://blog.csdn.net/weixin_44893902/article/details/109633094
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201111221724254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201111221818907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[6.2.3]: https://blog.csdn.net/weixin_44893902/article/details/109633164
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201111222117813.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201111222250662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201111222401633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201111222535716.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[6.3.5]: https://blog.csdn.net/weixin_44893902/article/details/109633218
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201111223049851.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201111223208835.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg==,size_16,color_FFFFFF,t_70
[6.4.3]: https://blog.csdn.net/weixin_44893902/article/details/109633264