Microsoft Word - 第01章new.doc

Transcription

1 第 章 jquery 简 介 第 章 jquery 简 介 要 完 全 理 解 jquery 和 它 在 现 代 Web 开 发 领 域 中 的 应 用, 就 有 必 要 花 点 时 间 回 顾 一 下 jquery 的 历 史, 了 解 其 设 计 目 标, 以 及 在 jquery 出 现 以 前 JavaScript 编 程 的 情 况 本 章 会 向 你 介 绍 常 用 的 JavaScript 库 和 它 们 的 设 计 目 标, 以 及 为 什 么 大 多 数 Web 开 发 人 员 选 择 使 用 jquery 你 也 将 学 到 jquery 的 基 本 工 作 原 理, 包 括 它 如 何 在 项 目 中 应 用, 以 及 它 的 内 核 ( 强 大 的 选 择 器 引 擎 ) 如 何 工 作. 为 什 么 选 择 jquery 在 Web 应 用 中,JavaScript 以 难 以 驾 驭 闻 名 浏 览 器 兼 容 性 差 难 以 调 试, 又 有 着 使 人 望 而 生 畏 的 语 法, 这 都 让 学 习 JavaScript 成 了 一 件 苦 差 事 公 平 地 说, 虽 然 这 些 特 点 让 JavaScript 难 以 上 手, 但 多 少 也 是 因 为 它 们 才 造 就 了 JavaScript 的 强 大 能 力 不 过 对 于 一 个 打 算 使 用 JavaScript 进 行 Web 开 发 的 新 手 来 说, 这 些 特 点 一 点 都 不 吸 引 人.. 了 解 JavaScript 库 多 年 以 来,JavaScript 难 学 难 用 的 缺 点, 一 直 困 扰 着 开 发 者 们 人 们 对 JavaScript 的 不 满 日 甚, 一 些 有 抱 负 的 开 发 者 为 解 决 此 问 题 开 始 编 写 JavaScript 库, 这 些 库 又 称 为 JavaScript 框 架 这 些 库 致 力 于 降 低 JavaScript 编 程 的 复 杂 程 度, 用 一 些 易 于 使 用 的 控 制 函 数 替 掉 那 些 困 难 吃 力 的 日 常 任 务, 使 已 有 开 发 者 和 新 人 都 容 易 上 手 由 于 用 原 生 JavaScript 进 行 AJAX(Asynchronous JavaScript and XML) 开 发 相 当 复 杂,JavaScript 库 在 这 个 领 域 特 别 有 用 JavaScript 库 用 更 简 单 的 语 法 完 成 常 见 任 务, 这 不 但 提 高 了 老 手 的 开 发 效 率, 也 降 低 了 新 手 的 学 习 难 度 在 跨 浏 览 器 开 发 过 程 中, 可 方 便 地 使 用 库 内 建 的 兼 容 所 有 浏 览 器 的 方 法 而 不 必 手 工 编 码 进 行 浏 览 器 兼 容 性 检 查, 这 极 大 地 节 省 了 编 码 时 间, 解 决 了 跨 浏 览 器 开 发 过 程 中 的 棘 手 问 题 提 示 我 们 将 在 第 章 演 示 使 用 jquery 的 AJAX 工 具 和 使 用 原 生 JavaScript 进 行 AJAX 开 发 有 什 么 异 同

2 . 创 建 测 试 环 境 3 时 至 今 日, 已 有 很 多 的 JavaScript 库 可 用 最 流 行 的 JavaScript 库 有 Prototype( prototypejs.org) MooTools( Yahoo! UI( 和 本 书 最 重 要 的 主 题 之 一 jquery.. jquery 的 优 点 每 个 JavaScript 库 都 有 其 优 点,jQuery 也 不 例 外, 它 拥 有 以 下 优 点 : 体 积 小 (.4 版 约 3 KB); 语 法 极 其 简 单 ; 方 法 可 链 式 调 用 ; 插 件 架 构, 易 于 扩 展 ; 庞 大 的 线 上 社 区 ; 极 为 完 善 的 文 档 ( 可 选 增 强 扩 展 模 块, 比 如 jqueryui jquery 的 历 史 006 年 年 初, 开 发 人 员 John Resig 在 BarCamp NYC( 首 次 公 布 自 己 的 研 究 成 果 jquery 他 在 自 己 的 网 站 上 说, 之 所 以 创 建 jquery 是 因 为 他 对 现 有 的 库 都 不 满 意 他 认 为 这 些 库 很 多 地 方 都 需 要 改 进, 比 如 应 该 删 减 不 必 要 的 语 法, 并 且 应 该 对 常 见 任 务 进 行 特 殊 处 理 等 jquery 在 开 发 社 区 获 得 了 极 大 的 成 功, 很 快 就 占 了 上 风 其 他 的 开 发 者 蜂 拥 而 来, 帮 助 改 进 这 个 框 架 最 终 在 006 年 8 月 6 日,jQuery 的 第 一 个 稳 定 版 本.0 发 布 了 从 那 以 后,jQuery 一 步 一 步 成 长 到.4.( 本 书 写 作 时 ), 拥 有 极 多 的 插 件 ( 大 部 分 来 自 开 发 社 区 ) 插 件 是 jquery 核 心 库 之 外 的 扩 展 组 件 在 第 0 章 你 将 深 入 了 解 并 亲 手 创 建 jquery 插 件. 创 建 测 试 环 境 学 会 一 门 新 语 言 最 好 的 方 式 就 是 亲 自 动 手 你 需 要 一 个 测 试 环 境 来 做 一 些 jquery 的 初 级 练 习 还 好, 创 建 这 样 一 个 测 试 环 境 只 需 简 单 的 两 步 : 先 安 装 Firefox, 再 安 装 Firebug 因 为 Firebug 有 一 个 极 其 出 色 的 JavaScript 测 试 控 制 台, 本 书 从 头 到 尾 所 有 的 练 习 都 假 定 你 使 用 的 是 安 装 了 Firebug 插 件 的 Firefox 浏 览 器.. 安 装 Firefox 打 开 下 载 最 新 版 本 的 Firefox( 在 本 书 编 写 时 是 3.6 版 ), 安 装 程 序 并 运 行 它 (Windows 系 统 是 Firefox Setup x.x.x.exe, Mac OS 系 统 则 是 Firefox x.x.x.dmg),firefox 就 安 装 好 了

3 4 第 章 jquery 简 介.. 安 装 Firebug 用 Firefox 浏 览 器 打 开 然 后 单 击 Install Firebug x.x for Firefox 按 钮 它 会 把 你 带 到 Firefox 附 加 组 件 库 中 的 Firebug 在 那 里 单 击 Add to Firefox 按 钮, 你 会 看 到 浏 览 器 弹 出 一 个 安 装 对 话 框 ( 图 -) 单 击 Install Now, 然 后 等 待 它 安 装 好, 最 后 重 启 Firefox 图 - Firebug 安 装 对 话 框 Firefox 重 启 之 后, 在 它 的 状 态 栏 会 出 现 一 个 类 似 萤 火 虫 的 图 标 单 击 这 个 图 标,Firebug 插 件 就 会 被 激 活, 你 会 看 到 一 个 控 制 台 ( 图 -) 提 示 Firebug 不 仅 仅 对 JavaScript 调 试 极 为 有 用, 对 任 何 Web 开 发 人 员 它 都 是 一 个 无 价 之 宝 要 进 一 步 了 解 Firebug, 请 访 问 由 于 Firebug 已 经 改 版, 所 以 安 装 过 程 与 实 际 情 况 略 有 差 别 译 者 注

4 . 创 建 测 试 环 境 图 - Firebug 控 制 台 创 建 本 地 测 试 环 境 对 本 书 中 的 练 习 来 说, 虽 然 本 地 测 试 环 境 并 不 是 非 有 不 可, 但 我 在 这 里 仍 然 强 烈 建 议 你 搭 建 一 个, 这 是 一 个 好 的 开 发 实 践 与 在 远 程 服 务 器 上 开 发 相 比, 本 地 测 试 环 境 能 让 你 更 快 更 安 全 并 且 通 常 还 会 更 容 易 地 进 行 开 发 安 装 XAMPP 只 需 要 以 下 几 个 步 骤 下 载 并 安 装 XAMPP, 就 能 轻 松 地 在 你 的 计 算 机 上 搭 建 一 个 本 地 开 发 环 境 () 访 问 并 下 载 最 新 版 本 的 XAMPP () 运 行 下 载 好 的 文 件 如 果 是 Windows 系 统, 直 接 运 行 下 载 的 EXE 文 件, 然 后 选 择 一 个 目 录 安 装 它 如 果 是 MAC OS, 先 挂 载 下 载 的 DMG 文 件, 然 后 将 XAMPP 文 件 夹 拖 到 Applications 文 件 夹 (3) 打 开 XAMPP 文 件 夹 中 的 XAMPP 控 制 面 板, 启 动 Apache (4) 访 问 确 认 XAMPP 是 否 正 常 工 作 如 果 你 看 到 XAMPP 的 欢 迎 页 面, 就 说 明 它 工 作 了 除 了 Windows 和 Mac 版 本,XAMPP 还 有 针 对 Linux 和 Solaris 的 版 本 不 同 的 操 作 系 统 安 装 XAMPP 有 不 同 的 讲 究, 如 果 你 在 安 装 XAMPP 时 遇 到 了 麻 烦, 就 去 翻 它 的 帮 助 文 档 吧

5 6 第 章 jquery 简 介.3 加 载 jquery 要 在 一 个 项 目 中 使 用 jquery, 必 须 先 在 HTML 文 件 中 加 载 它, 这 样 你 的 脚 本 才 能 够 访 问 到 它 提 供 的 方 法 建 议 加 载 脚 本 文 件 时 总 是 最 先 加 载 jquery 库, 否 则 那 些 用 到 jquery 语 法 的 脚 本 通 常 都 会 出 错 还 好, 加 载 jquery 非 常 简 单, 而 且 有 好 几 种 方 法 可 供 选 择.3. 加 载 本 地 jquery 第 一 种 方 法, 是 在 项 目 目 录 中 放 一 份 jquery 库 文 件, 然 后 像 加 载 其 他 JavaScript 文 件 一 样 加 载 它 : <script type="text/javascript" src="js/jquery-.4..min.js"></script>.3. 加 载 存 放 在 Google 服 务 器 上 的 jquery 第 二 种 方 法, 是 加 载 Google Code 服 务 器 上 的 jquery 库 文 件 使 用 这 个 方 法 的 好 处 是, 如 果 用 户 在 访 问 你 的 站 点 时, 浏 览 器 有 可 能 已 经 缓 存 了 这 个 库 文 件 ( 用 户 访 问 其 他 站 点 的 时 候 加 载 了 这 一 文 件 ), 那 么 就 能 有 效 地 提 高 你 的 站 点 初 次 访 问 的 响 应 速 度 加 载 远 程 库 文 件 的 方 法 与 加 载 本 地 库 文 件 相 同 : <script type="text/javascript" src=" </script>.3.3 使 用 Google AJAX Libraries API 加 载 jquery 也 可 以 通 过 Google Code 提 供 的 名 为 AJAX Libraries API( 参 考 ajaxlibs) 的 服 务 加 载 jquery 用 Google 的 话 说 : AJAX Libraries API 是 一 个 CDN(Content Distribution Network, 内 容 分 发 网 络 ), 也 是 最 流 行 的 开 源 JavaScript 框 架 的 加 载 方 式 使 用 AJAX Libraries API 加 载 jquery 既 简 单 又 直 接, 本 书 从 头 到 尾 都 只 使 用 这 种 方 式 如 果 你 的 站 点 也 希 望 通 过 这 种 方 式 加 载 jquery, 可 使 用 下 面 的 代 码 片 段 : <script type="text/javascript" src=" <script type="text/javascript"> google.load("jquery", ".4."); </script>.4 建 立 测 试 文 件 现 在 测 试 环 境 已 经 设 置 好 了, 接 下 来 在 你 的 XAMPP 安 装 的 htdocs 目 录 下 创 建 一 个 子 目 录 testing, 然 后 在 testing 目 录 下 创 建 一 个 新 文 件 index.html, 最 后 用 你 喜 欢 的 编 辑 器 在 这 个 文 件 中 添 加 以 下 HTML 标 记 :

6 .4 建 立 测 试 文 件 7 <!DOCTYPE html> <html> <head> <title>testing jquery</title> </head> <body> <p>hello World!</p> <p class="foo">another paragraph, but this one has a class.</p> <p><span>this is a span inside a paragraph.</span></p> <p id="bar">paragraph with an id. <span class="foo">and this sentence is in a span.</span> </p> <script type="text/javascript" src=" <script type="text/javascript"> google.load("jquery", ".4."); </script> </body> </html> 3 4 提 示 选 择 刚 好 在 body 的 结 束 标 记 </body> 之 前 加 载 JavaScript 可 有 效 地 防 止 脚 本 阻 塞 其 他 页 面 元 素 的 加 载, 如 图 片 的 显 示 等 这 样 也 能 防 止 在 页 面 元 素 完 全 加 载 之 前 JavaScript 代 码 就 开 始 运 行, 避 免 页 面 发 生 异 常 或 者 产 生 脚 本 错 误 保 存 这 个 文 件, 然 后 在 Firefox 中 打 开 图 -3) 图 -3 Firefox 中 已 经 加 载 好 的 测 试 文 件 接 下 来 我 们 将 利 用 这 个 文 件, 与 jquery 基 本 操 作 亲 密 接 触.4. jquery 函 数 ($) jquery 函 数 是 jquery 的 核 心, 形 象 地 说 它 是 jquery 的 心 脏 和 灵 魂 任 何 一 个 用 到 jquery 的 地 方, 都 会 用 到 jquery 函 数 为 保 持 代 码 简 洁, 绝 大 多 数 用 到 jquery 函 数 的 地 方, 都 会 用 它 的 别 名 $() 代 替 jquery() 9 0

7 8 第 章 jquery 简 介 我 们 不 必 深 入 到 编 程 理 论 层 面 去 研 究 这 个 函 数 的 工 作 原 理 简 单 地 说, 它 的 工 作 方 式 基 本 上 就 是 : 先 创 建 一 个 jquery 对 象 实 例, 然 后 对 传 递 给 该 实 例 的 参 数 表 达 式 求 值, 最 后 根 据 这 个 值 作 出 相 应 的 响 应 或 者 修 改 自 身 特 别 提 示 有 些 JavaScript 库 也 使 用 $() 函 数, 因 此 若 同 时 使 用 多 个 JavaScript 框 架, 就 可 能 发 生 名 字 冲 突 对 此,jQuery 提 供 了 一 个 解 决 方 案 : 用 jquery.noconflict() 方 法 主 动 让 出 $() 别 名 要 进 一 步 了 解 此 方 法, 可 参 考 用 CSS 语 法 选 择 DOM 元 素 jquery 中 的 一 切 都 围 绕 着 它 那 强 大 到 令 人 难 以 置 信 的 选 择 器 引 擎 运 转 本 章 剩 余 的 部 分 将 教 你 使 用 jquery 提 供 的 各 种 方 法 选 择 DOM(Document Object Model) 元 素 提 示 DOM 是 构 成 HTML XHTML 和 XML 文 档 的 对 象 及 节 点 的 集 合 它 具 有 平 台 无 关 性 和 语 言 无 关 性 这 意 味 着 开 发 者 能 够 在 多 种 平 台 ( 比 如 Web 浏 览 器 ) 通 过 很 多 种 语 言 ( 比 如 JavaScript) 访 问 DOM 而 不 会 遇 到 任 何 兼 容 性 问 题 jquery 最 健 壮 最 迷 人 的 特 性 之 一 就 是 使 用 它 选 择 DOM 元 素 极 其 容 易 CSS 伪 类 选 择 器 的 使 用 更 为 它 增 添 了 惊 人 的 威 力 CSS 伪 指 令 使 开 发 者 能 够 定 位 页 面 中 的 特 殊 元 素, 因 为 有 着 和 CSS 几 乎 完 全 相 同 的 语 法, 那 些 有 CSS 经 验 的 人 很 快 就 能 上 手 基 本 上, 同 样 的 CSS 语 法 既 可 以 用 来 设 置 样 式 规 则, 也 可 以 用 来 ( 通 过 下 面 列 出 的 方 式 ) 选 择 元 素 基 本 选 择 器 层 级 (Hierarchy) 选 择 器 过 滤 器 基 本 过 滤 器 内 容 过 滤 器 可 见 性 过 滤 器 属 性 过 滤 器 子 过 滤 器 表 单 过 滤 器. 基 本 选 择 器 基 本 选 择 器 让 开 发 者 能 够 使 用 标 签 类 型 类 名 ID 或 它 们 的 任 意 组 合 选 择 元 素 打 开 页 面, 点 开 Firebug 会 话 窗 口, 然 后 单 击 控 制 台 (Console) 标 签 ( 图 -4) 如 果 Console 面 板 是 禁 用 状 态, 单 击 Console 标 签 右 侧 的 黑 色 三 角 区 域, 然 后 选 择 Enabled 本 章 所 参 见

8 .4 建 立 测 试 文 件 9 有 的 例 子 都 使 用 这 个 控 制 台 提 示 如 果 你 很 熟 悉 CSS, 则 可 以 快 速 浏 览 本 节, 这 些 选 择 器 的 行 为 与 它 们 在 CSS 中 的 表 现 完 全 相 同 通 过 标 签 类 型 选 择 元 素 要 通 过 标 签 类 型 选 择 元 素, 直 接 使 用 标 签 的 名 字 ( 如 p div 或 者 span) 作 为 选 择 器 : element 假 如 要 在 我 们 的 测 试 页 面 里 选 择 所 有 的 段 落 (<p>) 标 签, 请 在 控 制 台 的 底 部 输 入 以 下 代 码 : 3 $("p"); 然 后 敲 回 车 键 执 行 代 码 控 制 台 显 示 以 下 结 果 ( 图 -4): >>> $("p"); [ p, p.foo, p, p#bar ] 第 行 是 执 行 的 代 码, 第 行 是 代 码 返 回 的 结 果 在 我 们 的 测 试 页 面 中 共 有 4 个 段 落 : 其 中 有 两 个 段 落 既 没 有 class 也 没 有 id, 一 个 段 落 class="foo", 一 个 段 落 id="bar"( 后 面 你 将 学 习 有 关 class 和 id 的 语 法 ) 当 我 们 把 标 签 名 字 ("p") 传 递 给 jquery 函 数, 它 就 找 出 所 有 的 <p> 实 例, 并 将 它 们 添 加 到 jquery 对 象 中 图 -4 执 行 一 个 命 令 后 的 Firebug 控 制 台 通 过 class 选 择 元 素 你 能 用 标 签 类 型 选 择 元 素, 同 样 也 能 用 元 素 的 class 属 性 来 选 择 元 素 通 过 class 选 择 元 素 的 语 法 是 在 class 名 字 之 前 加 一 个 句 点 (.):.class 在 控 制 台 执 行 下 面 的 代 码, 可 选 出 拥 有 class foo 的 全 部 元 素 : 9 0

9 0 第 章 jquery 简 介 $(".foo"); 控 制 台 显 示 的 执 行 结 果 如 下 : >>> $(".foo"); [ p.foo, span.foo ] 返 回 结 果 中 有 一 个 p 标 签 和 一 个 span 标 签, 因 为 它 们 都 拥 有 class foo 通 过 ID 选 择 元 素 要 通 过 一 个 元 素 的 id 属 性 来 选 择 一 个 元 素, 与 CSS 语 法 相 同, 在 id 之 前 加 一 个 井 号 (#) #id 下 面 的 代 码 选 出 所 有 id="bar" 的 元 素 : $("#bar"); 我 们 的 页 面 中 只 有 一 个 段 落 id="bar", 结 果 也 正 是 这 样 : >>> $("#bar"); [ p#bar ] 使 用 联 合 选 择 器 实 现 更 精 准 的 选 择 有 时 候 需 要 匹 配 某 个 class 属 性 的 特 定 标 签, 只 要 联 合 使 用 标 签 类 型 选 择 器 和 class 选 择 器 就 可 轻 松 应 对 这 种 情 况 在 控 制 台 输 入 以 下 代 码, 选 择 只 拥 有 class foo 的 段 落 : $("p.foo"); 控 制 台 输 出 的 结 果 表 明, 虽 然 span 标 签 也 拥 有 class foo, 但 由 于 它 并 不 匹 配 p.foo 选 择 器, 因 此 被 忽 略 掉 : >>> $("p.foo"); [p.foo] 使 用 组 合 选 择 器 如 果 需 要 访 问 多 个 元 素, 组 合 选 择 器 (multiple selector) 能 做 到 一 次 选 择 得 到 所 有 匹 配 元 素 举 例 来 说, 如 果 你 打 算 选 择 任 意 拥 有 class foo 的 段 落 和 id="bar" 的 元 素, 可 使 用 下 面 的 代 码 : $("p.foo,#bar"); 只 要 元 素 匹 配 组 合 选 择 器 中 任 意 一 个 选 择 器, 都 会 被 选 中 并 出 现 在 返 回 结 果 中 : >>> $("p.foo,#bar"); [ p.foo, p#bar ] HTML 规 范 中, 同 一 页 面 中 id 必 须 唯 一, 也 就 是 多 个 元 素 不 允 许 有 相 同 的 id 因 此, 本 页 面 有 且 只 能 有 一 个 段 落 id="bar" 译 者 注 原 文 Multiple 本 义 是 多 重 多 元 的 意 思, 但 因 为 业 内 已 经 普 遍 将 此 选 择 器 翻 译 为 组 合 选 择 器, 故 此 处 从 业 内 惯 例 而 未 从 本 义 译 者 注

10 .4 建 立 测 试 文 件. 层 次 选 择 器 有 时 候 仅 使 用 元 素 标 签 class 或 ID 来 选 择 元 素 不 能 满 足 需 要 在 很 多 场 合 你 需 要 访 问 一 个 元 素 内 部 的 元 素, 一 个 元 素 的 下 一 个 元 素, 或 者 一 个 元 素 之 后 的 元 素 等 比 如 你 要 移 除 所 有 菜 单 项 中 除 当 前 单 击 菜 单 外 的 用 来 标 识 当 前 选 中 项 的 class, 或 者 要 获 取 一 个 无 序 列 表 中 所 有 未 选 中 的 项, 或 者 在 一 个 表 单 项 被 选 中 时 改 变 其 父 元 素 的 属 性 等 选 择 后 代 元 素 要 选 择 一 个 元 素 的 后 代 元 素, 也 就 是 被 该 元 素 包 裹 的 其 他 元 素, 使 用 祖 先 元 素 后 加 空 格 再 加 后 代 元 素 的 格 式 : 祖 先 元 素 后 代 元 素 3 要 选 择 测 试 页 面 中 body 元 素 的 后 代 元 素 span, 在 Firebug 控 制 台 执 行 下 面 的 代 码 : $("body span"); 这 会 找 出 当 前 文 档 body 标 签 (<body>) 内 的 所 有 span, 也 包 括 那 些 被 段 落 (<p>) 标 签 包 裹 的 span >>> $("body span"); [ span, span.foo ] 选 择 子 元 素 子 元 素 选 择 器 是 后 代 选 择 器 的 一 种 特 殊 形 式, 它 只 匹 配 直 接 子 元 素 ( 最 近 一 层 的 子 元 素 ) 要 选 择 一 个 子 元 素, 使 用 父 元 素 加 大 于 号 (>) 再 加 子 元 素 来 匹 配 : 父 元 素 > 子 元 素 在 你 的 测 试 文 件 中, 选 择 body 元 素 的 直 接 子 元 素 span, 在 控 制 台 中 输 入 下 面 的 命 令 : $("body>span"); 由 于 没 有 一 个 span 是 body 元 素 的 直 接 子 元 素, 控 制 台 会 输 出 一 个 空 集 合 如 下 : >>> $("body>span"); [ ] 接 下 来, 过 滤 所 有 的 span 元 素, 找 出 段 落 元 素 所 有 直 接 子 元 素 中 的 span 元 素 : $("p>span"); 7 8 输 出 结 果 显 示 如 下 : >>> $("p>span"); [ span, span.foo ] 选 择 下 一 个 兄 弟 (next) 元 素 有 时 你 需 要 在 DOM 中 选 择 一 个 元 素 之 后 紧 跟 的 下 一 个 兄 弟 元 素, 达 成 目 标 的 选 择 格 式 为 起 通 常 是 一 个 用 来 将 当 前 选 中 菜 单 显 示 为 高 亮 的 class 译 者 注 9 0

11 第 章 jquery 简 介 始 元 素 标 识 ( 可 以 是 任 意 选 择 器 ) 加 一 个 加 号 (+) 再 加 下 一 个 兄 弟 元 素 标 识 : 起 始 元 素 标 识 + 下 一 个 兄 弟 元 素 标 识 在 控 制 台 输 入 以 下 命 令 : $(".foo+p"); 只 有 一 个 元 素 有 class foo, 因 此 只 有 一 个 段 落 元 素 匹 配 被 返 回 : >>> $('.foo+p'); [ p ] 接 下 来, 我 们 使 用 一 个 更 一 般 的 查 询, 选 择 任 意 一 个 段 落 的 下 一 个 兄 弟 元 素 : $('p+p'); 我 们 的 HTML 中 一 共 有 4 个 段 落, 它 们 中 只 有 最 后 一 个 段 落 没 有 下 一 个 兄 弟 段 落, 因 此 控 制 台 会 在 结 果 中 显 示 3 个 段 落 : >>> $('p+p'); [ p.foo, p, p#bar ] 这 个 结 果 集 中 的 元 素 分 别 是 HTML 标 记 中 的 第 个 第 3 个 和 第 4 个 段 落 选 择 兄 弟 元 素 兄 弟 元 素 (sibling element) 是 指 被 同 一 个 元 素 包 裹 的 同 一 级 的 全 部 元 素 选 择 兄 弟 元 素 非 常 类 似 于 选 择 下 一 个 元 素, 只 是 它 返 回 起 始 元 素 之 后 匹 配 的 全 部 兄 弟 元 素, 而 不 是 只 返 回 下 一 个 要 选 择 兄 弟 元 素, 使 用 格 式 为 起 始 元 素 标 识 加 波 浪 字 符 (~) 再 加 匹 配 兄 弟 元 素 : 起 始 元 素 标 识 ~ 匹 配 兄 弟 元 素 要 匹 配 p.foo 之 后 的 所 有 兄 弟 段 落, 在 控 制 台 执 行 下 面 的 代 码 : $(".foo~p"); 结 果 集 显 示 如 下 : >>> $(".foo~p"); [ p, p#bar ] 3. 基 本 过 滤 器 在 DOM 中 访 问 元 素 的 另 一 种 很 强 大 的 方 法 是 过 滤 器 它 不 依 赖 元 素 类 型 元 素 的 class 元 素 的 ID, 而 是 根 据 元 素 的 位 置 元 素 的 当 前 状 态 或 其 他 可 变 参 数 来 匹 配 元 素 过 滤 器 的 基 本 语 法 是 一 个 冒 号 紧 跟 着 过 滤 器 名 字 : : 过 滤 器 名 字 有 些 过 滤 器 支 持 参 数 传 递 ( 用 圆 括 号 封 装 ): : 过 滤 器 名 字 ( 参 数 ) 后 面 几 节 将 介 绍 最 常 用 同 时 也 最 实 用 的 过 滤 器

12 .4 建 立 测 试 文 件 3 提 示 为 尽 快 开 始 实 际 开 发, 本 节 并 没 有 覆 盖 全 部 的 过 滤 器 要 了 解 完 整 的 过 滤 器 列 表, 请 参 阅 jquery 文 档 选 择 第 一 个 或 最 后 一 个 元 素 过 滤 器 最 常 见 的 一 个 用 途, 是 在 集 合 中 判 断 一 个 元 素 是 否 是 第 一 个 或 者 最 后 一 个 使 用 过 滤 器 找 出 第 一 个 或 最 后 一 个 元 素 极 为 简 单, 只 要 在 任 意 选 择 器 之 后 追 加 :first 或 :last 即 可 : $("p:last"); 执 行 以 上 代 码, 控 制 台 输 出 如 下 : >>> $("p:last"); [ p#bar ] 选 择 不 匹 配 某 个 选 择 器 的 元 素 如 果 你 打 算 找 出 所 有 不 匹 配 某 个 选 择 器 的 元 素, 使 用 :not() 过 滤 器 是 最 容 易 的 方 法 将 它 追 加 到 你 的 选 择 器 之 后, 并 为 它 提 供 一 个 选 择 器 参 数, 就 会 得 到 匹 配 原 选 择 器, 但 不 匹 配 :not() 的 参 数 选 择 器 的 结 果 集 举 个 例 子 : $("p:not(.foo)"); 会 返 回 以 下 结 果 集 : >>> $("p:not(.foo)"); [ p, p, p#bar ] 选 择 索 引 为 奇 数 或 偶 数 的 元 素 类 似 于 :first 和 :last,:even 和 :odd 过 滤 器 语 法 也 相 当 简 单, 它 的 返 回 结 果 与 你 的 预 期 一 致, 分 别 返 回 结 果 集 中 索 引 为 奇 数 或 偶 数 的 元 素 $("p:odd"); 6 7 在 控 制 台 中 执 行 前 面 这 行 代 码, 结 果 如 下 : >>> $("p:odd"); [ p.foo, p#bar ] 选 择 特 定 索 引 的 元 素 如 果 需 要 根 据 元 素 索 引 得 到 特 定 元 素, 传 递 一 个 索 引 编 号 给 :eq() 过 滤 器, 就 能 得 到 期 望 的 元 素 : $("p:eq(3)"); 输 出 如 下 : 此 处 的 索 引 与 下 一 小 节 相 同, 从 0 而 不 是 从 开 始, 也 就 是 平 常 经 常 说 的 第 一 个 元 素 ( 索 引 0) 匹 配 偶 数, 请 特 别 注 意 译 者 注 8 9 0

13 4 第 章 jquery 简 介 >>> $("p:eq(3)"); [ p#bar ] 提 示 一 个 元 素 的 索 引 是 指 它 在 结 果 集 中 的 位 置 此 处 的 索 引 遵 守 编 程 约 定, 从 0 开 始, 第 一 个 元 素 的 索 引 是 0, 第 二 个 是, 以 此 类 推 4. 内 容 过 滤 器 还 有 些 过 滤 器 能 根 据 元 素 内 容 匹 配 元 素 这 些 过 滤 器 有 的 负 责 匹 配 包 含 特 定 文 本 的 元 素, 有 的 负 责 匹 配 包 含 特 定 元 素 的 元 素 匹 配 包 含 特 定 文 本 的 元 素 要 匹 配 包 含 特 定 文 本 的 元 素, 使 用 :contains() 过 滤 器, 其 中 匹 配 文 本 被 传 递 给 过 滤 器 作 为 它 的 参 数 : $("p:contains(another)"); 在 控 制 台 中 执 行 这 行 代 码, 结 果 如 下 : >>> $("p:contains(another)"); [ p.foo ] 提 示 :contains() 过 滤 器 是 区 分 大 小 写 的, 这 意 味 着 字 母 的 大 小 写 会 影 响 文 本 匹 配 开 发 社 区 的 一 位 成 员 写 了 一 个 不 区 分 大 小 写 的 :contains() 版 本, 并 将 它 放 到 了 jquery API 文 档 的 :contains() 条 目 的 注 释 当 中 要 更 详 细 的 了 解 此 信 息, 参 阅 contains-selector 匹 配 包 含 特 定 元 素 的 元 素 :has() 过 滤 器 用 来 匹 配 包 含 特 定 元 素 的 元 素 它 的 工 作 方 式 类 似 :contains(), 只 是 它 接 受 的 参 数 是 元 素 名 而 不 是 内 容 文 本 : $("p:has(span)"); 在 控 制 台 执 行 这 个 代 码, 输 出 如 下 : >>> $("p:has(span)"); [ p, p#bar ] 返 回 结 果 中 只 包 含 span 标 签 的 <p> 元 素 选 择 空 元 素 要 找 出 不 包 含 任 何 文 本 也 不 包 含 任 何 其 他 元 素 的 空 元 素,:empty 过 滤 器 正 合 适 一 个 常 见 的 错 误 是 给 匹 配 文 本 加 引 号 和 一 般 程 序 设 计 语 言 中 的 参 数 不 同, 这 里 匹 配 字 符 串 一 定 不 能 加 引 号 译 者 注

14 .4 建 立 测 试 文 件 5 我 们 用 来 测 试 的 HTML 例 子 中, 只 有 一 个 看 不 到 的 空 元 素 找 出 它 : $(":empty"); 输 出 如 下 : >>> $(":empty"); [ script jsapi, script jquery.min.js, div#_firebugconsole ] 你 看 到 的 第 二 个 script 标 签 和 div 标 签 都 是 动 态 生 成 的 ( 不 存 在 于 我 们 的 HTML 标 记 中 ) 其 中 script 标 签 由 Google JSAPI 加 载 jquery 的 时 候 生 成,div 标 签 则 是 Firebug 生 成 的 选 择 父 元 素 与 :empty 相 反,:parent 只 匹 配 那 些 拥 有 子 元 素 的 元 素, 不 管 它 包 含 的 是 其 他 元 素, 还 是 文 本 内 容, 或 者 兼 而 有 之 选 择 所 有 拥 有 子 元 素 的 段 落, 使 用 下 面 的 代 码 : $("p:parent"); 在 测 试 HTML 文 档 中, 因 为 所 有 的 段 落 都 包 含 文 本 ( 某 些 还 包 含 其 他 元 素 ), 所 以 结 果 集 包 含 了 所 有 的 段 落 : >>> $("p:parent"); [ p, p.foo, p, p#bar ] 5. 可 见 性 过 滤 器 可 见 性 过 滤 器, 也 就 是 :hidden 和 :visible, 分 别 用 来 选 择 被 隐 藏 的 元 素 和 可 看 到 的 元 素 选 择 所 有 可 见 段 落 : $("p:visible"); 因 为 你 的 HTML 中 没 有 任 何 段 落 被 隐 藏, 因 此 返 回 下 面 的 结 果 集 : >>> $("p:visible"); [ p, p.foo, p, p#bar ] 6. 属 性 过 滤 器 利 用 元 素 的 属 性 来 选 择 元 素 也 是 一 种 非 常 重 要 的 方 法 属 性 是 位 于 标 签 内 部 用 来 对 标 签 做 进 一 步 描 述 的 东 西 ( 如 class href ID title 等 ) 在 下 面 的 例 子 里 你 会 访 问 class 属 性 7 8 提 示 请 牢 牢 记 住 : 在 正 式 发 布 的 脚 本 中 只 要 可 能 就 尽 量 使 用 ID(#id) 和 类 (.class) 选 择 器, 而 不 使 用 属 性 过 滤 器 优 先 使 用 它 们 不 但 速 度 更 快, 而 且 也 是 好 习 惯 下 面 的 例 子 使 用 属 性 过 滤 器 仅 仅 是 为 了 演 示 过 滤 器 的 能 力 9 根 据 属 性 及 属 性 的 值 选 择 元 素 要 匹 配 拥 有 特 定 属 性 及 属 性 值 的 元 素, 用 下 面 的 格 式 将 属 性 和 值 放 到 方 括 号 当 中 ([]): 0

15 6 第 章 jquery 简 介 [ 属 性 名 = 属 性 值 ] 要 选 择 拥 有 class foo 的 所 有 元 素, 在 控 制 台 执 行 以 下 代 码 : $("[class=foo]"); 结 果 如 下 : >>> $("[class=foo]"); [ p.foo, span.foo ] 选 择 没 有 某 个 属 性 的 元 素 或 属 性 值 不 匹 配 的 元 素 反 之, 要 选 择 不 匹 配 特 定 属 性 及 其 值 的 元 素, 在 属 性 名 和 属 性 值 之 间 的 等 号 前 插 入 一 个 感 叹 号 (!): [ 属 性 名!= 属 性 值 ] 运 行 下 面 的 代 码, 选 出 没 有 foo class 的 全 部 段 落 : $("p[class!=foo]"); 结 果 如 下 : >>> $("p[class!=foo]"); [ p, p, p#bar ] 7. 子 元 素 过 滤 器 子 元 素 过 滤 器 是 :even :odd 和 :eq() 的 一 种 代 用 品 主 要 的 区 别 在 于 这 一 套 选 择 器 起 始 索 引 为 而 不 是 0( 像 :eq() 从 0 开 始 ) 匹 配 奇 数 索 引 值 / 偶 数 索 引 值 / 特 定 索 引 值 的 元 素 :nth-child() 是 最 多 才 多 艺 的 过 滤 器 之 一 在 匹 配 元 素 时 它 提 供 了 4 个 参 数 选 项 :even odd index 和 equation 和 其 他 子 元 素 过 滤 器 相 同, 这 个 过 滤 器 的 索 引 也 是 从 而 不 是 0 开 始, 这 样 第 一 个 元 素 的 索 引 就 是 而 不 是 0, 第 个 元 素 是, 以 此 类 推 使 用 :odd 选 择 元 素, 结 果 集 包 含 p.foo 和 p#foo; 下 面 的 代 码 用 :nth-child(odd) 选 择 奇 数 索 引 的 元 素, 我 们 来 看 下 结 果 ( 与 :odd 相 比 ) 有 无 不 同 : $("p:nth-child(odd)"); 在 控 制 台 中 结 果 显 示 如 下 : >>> $("p:nth-child(odd)"); [ p, p ] 两 个 过 滤 器 的 结 果 不 一 样 这 好 像 有 点 怪, 其 实 不 然, 之 所 以 得 到 这 样 的 结 果 是 因 为 两 个 过 滤 器 索 引 起 始 值 不 同 (:odd 从 0 而 :ntd-child 从 开 始 ) 选 择 第 一 个 或 最 后 一 个 子 元 素 这 两 个 过 滤 器 与 :first 和 :last 极 为 相 似, 不 过 有 一 个 区 别 :first-child

16 .4 建 立 测 试 文 件 7 和 :last-child 返 回 的 元 素 集 合 可 能 含 有 不 止 一 个 匹 配 元 素 举 例 来 说, 要 找 出 段 落 元 素 内 的 最 后 一 个 span 元 素, 可 以 使 用 下 面 的 代 码 : $("p span:last"); 返 回 结 果 如 下 : >>> $("p span:last"); [ span.foo ] 不 过, 如 果 你 想 匹 配 每 个 段 落 的 最 后 一 个 span 子 元 素, 就 应 该 用 :last-child 而 不 是 :last: $("p span:last-child"); 它 会 在 每 个 段 落 而 不 是 整 个 DOM 中 进 行 匹 配, 因 此 返 回 结 果 与 :last 有 所 不 同 : >>> $("p span:last-child"); [ span, span.foo ] 8. 表 单 过 滤 器 表 单 在 现 代 站 点 中 应 用 极 为 广 泛, 受 表 单 元 素 的 分 工 启 发, 我 们 才 有 了 一 整 套 过 滤 器, 特 别 是 面 向 表 单 的 过 滤 器 因 为 测 试 页 面 里 并 没 有 放 任 何 表 单 元 素, 为 了 继 续 下 面 的 例 子, 需 要 在 测 试 文 件 中 追 加 一 些 新 的 HTML 标 记 在 index.html 中 最 后 一 个 <p> 标 签 和 第 一 个 <script> 标 签 之 间 添 加 以 下 HTML: <form action="#" method="post"> <fieldset> <legend>sign Up Form</legend> <label for="name">name</label><br /> <input name="name" id="name" type="text" /><br /> <label for="password">password</label><br /> <input name="password" id="password" type="password" /><br /><br /> <label> <input type="radio" name="loc" /> I'm on my computer </label><br /> <label> <input type="radio" name="loc" checked="checked" /> I'm on a shared computer </label><br /><br /> <input type="submit" value="log In" /><br /> <label> <input type="checkbox" name="notify" disabled="true" /> Keep me signed in on this computer </label><br /> </fieldset> </form>

17 8 第 章 jquery 简 介 保 存 index.html, 然 后 在 浏 览 器 中 重 新 载 入 即 可 看 到 此 表 单 ( 图 -5) 图 -5 修 改 index.html 之 后 表 单 的 样 子 按 表 单 元 素 类 型 匹 配 最 常 见 的 表 单 过 滤 器 按 照 表 单 元 素 的 类 型 匹 配 元 素 目 前 可 用 的 表 单 过 滤 器 有 :button :checkbox :file :image :input :password :radio :submit 和 :text 要 选 择 全 部 单 选 按 钮 (<input type="radio">), 使 用 下 面 的 代 码 : $("input:radio"); 控 制 台 输 出 如 下 : >>> $("input:radio"); [ input on, input on ] 刚 刚 提 到 的 这 些 过 滤 器 特 别 有 用, 因 为 它 们 针 对 的 都 是 input 元 素 在 以 往 没 有 这 些 过 滤 器 的 年 代, 匹 配 特 定 类 型 的 input 要 麻 烦 得 多 匹 配 可 用 或 禁 用 的 表 单 元 素 此 外, 还 有 两 个 过 滤 器 :enabled 和 :disabled 分 别 用 来 匹 配 可 用 的 和 禁 用 的 表 单 元 素 要 选 择 所 有 被 禁 用 的 表 单 元 素, 使 用 下 面 的 代 码 : $(":disabled"); 在 控 制 台 中 的 输 出 如 下 :

18 .5 小 结 9 >>> $(":disabled"); [ input on ] 复 选 框 Keep me signed in on this computer 处 于 禁 用 状 态, 因 此 :disabled 过 滤 器 的 返 回 结 果 就 是 它 匹 配 选 中 或 未 选 中 的 表 单 元 素 单 选 按 钮 和 复 选 框 有 一 个 checked 状 态, 而 下 拉 列 表 (<input type="select">) 有 一 个 selected 状 态 过 滤 器 :checked 和 :selected 分 别 用 于 获 取 checked 为 真 和 selected 为 真 的 表 单 元 素 要 匹 配 测 试 页 面 中 当 前 选 中 的 单 选 按 钮, 在 控 制 台 中 执 行 下 面 的 代 码 : 3 $(":checked"); 控 制 台 显 示 结 果 如 下 : >>> $(":checked"); [ input on ] 4.5 小 结 在 本 章 你 了 解 到 什 么 是 jquery, 以 及 这 个 项 目 的 历 史 由 来, 还 有 它 的 基 本 工 作 原 理 你 还 用 XAMPP Firefox Firebug 插 件 搭 建 了 一 个 开 发 环 境 此 时 此 刻, 我 想 你 能 体 会 到 使 用 jquery 强 大 的 选 择 器 引 擎 从 DOM 中 选 取 元 素 真 是 一 种 享 受 本 章 虽 然 有 一 点 点 枯 燥, 不 过 在 编 写 更 多 代 码 之 前, 彻 底 了 解 jquery 如 何 工 作 是 很 重 要 的 在 下 一 章 里, 你 将 学 习 如 何 用 jquery 内 建 方 法 遍 历 存 取 和 处 理 DOM