jquery 包 装 集 可 以 说 是 Dom 对 象 扩 充. 在 jquery 世 界 中 将 所 有 对 象, 无 论 是 一 个 还 是 一 组, 都 封 装 成 一 个 jquery 包 装 集, 比 如 获 取 包 含 一 个 元 jquery 包 装 集 : 1. var jquer

从 零 开 始 学 习 jquery 之 万 能 选 择 器 本 章 讲 解 jquery 最 重 要 选 择 器 部 分 知 识. 有 了 jquery 选 择 器 我 们 几 乎 可 以 获 取 页 面 上 任 意 一 个 或 一 组 对 象, 可 以 明 显 减 轻 开 发 人 员 工 作 量. 编 写 任 何 javascript 程 序 我 们 要 首 先 获 得 对 象, jquery 选 择 器 能 彻 底 改 变 我 们 平 时 获 取 对 象 方 式, 可 以 获 取 几 乎 任 何 语 意 对 象, 比 如 " 拥 有 title 属 性 并 且 值 中 包 含 test 元 ", 完 成 这 些 工 作 只 需 要 编 写 一 个 jquery 选 择 器 字 符 串. 学 习 jquery 选 择 器 是 学 习 jquery 最 重 要 一 步. 一. Dom 对 象 和 jquery 包 装 集 无 论 是 在 写 程 序 还 是 看 API 文 档, 我 们 要 时 刻 注 意 区 分 Dom 对 象 和 jquery 包 装 集. 1.Dom 对 象 在 传 统 javascript 开 发 中, 我 们 都 是 首 先 获 取 Dom 对 象, 比 如 : 1. var div = document.getelementbyid("testdiv"); 2. var divs = document.getelementsbytagname("div"); 我 们 经 常 使 用 document.getelementbyid 方 法 根 据 id 获 取 单 个 Dom 对 象, 或 者 使 用 document.getelementsbytagname 方 法 根 据 HTML 标 签 名 称 获 取 Dom 对 象 集 合. 另 外 在 事 件 函 数 中, 可 以 通 过 在 方 法 函 数 中 使 用 this 引 用 事 件 触 发 对 象 ( 但 是 在 多 播 事 件 函 数 中 IE6 存 在 问 题 ), 或 者 使 用 event 对 象 target(ff) 或 srcelement(iie6) 获 取 到 引 发 事 件 Dom 对 象. 注 意 我 们 这 里 获 取 到 都 是 Dom 对 象, Dom 对 象 也 有 不 同 类 型 比 如 input, div, span 等. Dom 对 象 只 有 有 限 属 性 和 方 法 : 2.jQuery 包 装 集

jquery 包 装 集 可 以 说 是 Dom 对 象 扩 充. 在 jquery 世 界 中 将 所 有 对 象, 无 论 是 一 个 还 是 一 组, 都 封 装 成 一 个 jquery 包 装 集, 比 如 获 取 包 含 一 个 元 jquery 包 装 集 : 1. var jqueryobject = $("#testdiv"); jquery 包 装 集 都 是 作 为 一 个 对 象 一 起 调 用. jquery 包 装 集 拥 有 丰 富 属 性 和 方 法, 这 些 都 是 jquery 特 有 : 3.Dom 对 象 与 jquery 对 象 转 换 (1) Dom 转 jquery 包 装 集 如 果 要 使 用 jquery 提 供 函 数, 就 要 首 先 构 造 jquery 包 装 集. 我 们 可 以 使 用 本 文 即 将 介 绍 jquery 选 择 器 直 接 构 造 jquery 包 装 集, 比 如 : 1. $("#testdiv"); 上 面 语 句 构 造 包 装 集 只 含 有 一 个 id 是 testdiv 元. 或 者 我 们 已 经 获 取 了 一 个 Dom 元, 比 如 : 1. var div = document.getelementbyid("testdiv"); 上 面 代 码 中 div 是 一 个 Dom 元, 我 们 可 以 将 Dom 元 转 换 成 jquery 包 装 集 : 1. var domtojqueryobject = $(div); 小 窍 门 : 因 为 有 了 智 能 感 知, 所 以 我 们 可 以 通 过 智 能 感 知 方 法 列 表 来 判 断 一 个 对 象 啊 是 Dom 对 象 还 是 jquery 包 装 集. (2) jquery 包 装 集 转 Dom 对 象

jquery 包 装 集 是 一 个 集 合, 所 以 我 们 可 以 通 过 索 引 器 访 问 其 中 某 一 个 元 : 1. var domobject = $("#testdiv")[0]; 注 意, 通 过 索 引 器 返 回 不 再 是 jquery 包 装 集, 而 是 一 个 Dom 对 象! jquery 包 装 集 某 些 遍 历 方 法, 比 如 each() 中, 可 以 传 递 遍 历 函 数, 在 遍 历 函 数 中 this 也 是 Dom 元, 比 如 : 1. $("#testdiv").each(function() { alert(this) }) 如 果 我 们 要 使 用 jquery 方 法 操 作 Dom 对 象, 怎 么 办? 用 上 面 介 绍 过 转 换 方 法 即 可 : 1. $("#testdiv").each(function() { $(this).html(" 修 改 内 容 ") }) 小 结 : 先 让 大 家 明 确 Dom 对 象 和 jquery 包 装 集 概 念, 将 极 大 加 快 我 们 学 习 速 度. 我 在 学 习 jquery 过 程 中 就 花 了 很 长 时 间 没 有 领 悟 到 两 者 具 体 差 异, 因 为 书 上 并 没 有 专 门 讲 解 两 者 区 别, 所 以 经 常 被 "this 指 针 为 何 不 能 调 用 jquery 方 法 " 等 问 题 迷 惑. 直 到 某 一 天 豁 然 开 朗, 发 现 只 要 能 够 区 分 这 两 者, 就 能 够 在 写 程 序 时 变 得 清 清 楚 楚. 二. 什 么 是 jquery 选 择 器 在 Dom 编 程 中 我 们 只 能 使 用 有 限 函 数 根 据 id 或 者 TagName 获 取 Dom 对 象. 在 jquery 中 则 完 全 不 同,jQuery 提 供 了 异 常 强 大 选 择 器 用 来 帮 助 我 们 获 取 页 面 上 对 象, 并 且 将 对 象 以 jquery 包 装 集 形 式 返 回. 首 先 来 看 看 什 么 是 选 择 器 : 1. // 根 据 ID 获 取 jquery 包 装 集 2. var jqueryobject = $("#testdiv"); 上 例 中 使 用 了 ID 选 择 器, 选 取 id 为 testdiv Dom 对 象 并 将 它 放 入 jquery 包 装 集, 最 后 以 jquery 包 装 集 形 式 返 回. "$" 符 号 在 jquery 中 代 表 对 jquery 对 象 引 用, "jquery" 是 核 心 对 象, 其 中 包 含 下 列 方 法 : jquery( expression, context )

Returns: jquery 这 个 函 数 接 收 一 个 CSS 选 择 器 字 符 串, 然 后 用 这 个 字 符 串 去 匹 配 一 组 元 This function accepts a string containing a CSS selector which is then used to match a set of elements. jquery( html, ownerdocument ) Returns: jquery 根 据 HTML 原 始 字 符 串 动 态 创 建 Dom 元. Create DOM elements on-the-fly from the provided String of raw HTML. jquery( elements ) Returns: jquery 将 一 个 或 多 个 Dom 对 象 封 装 jquery 函 数 功 能 ( 即 封 装 为 jquery 包 装 集 ) Wrap jquery functionality around a single or multiple DOM Element(s). jquery( callback ) Returns: jquery $(document).ready() 简 写 方 式 A shorthand for $(document).ready(). 上 面 摘 选 自 jquery 官 方 手 册.Returns 类 型 为 jquery 即 表 示 返 回 是 jquery 包 装 集. 其 中 第 一 个 方 法 有 些 问 题, 官 方 接 口 写 是 CSS 选 择 器, 但 是 实 际 上 这 个 方 法 不 仅 仅 支 持 CSS 选 择 器, 而 是 所 有 jquery 支 持 选 择 器, 有 些 甚 至 是 jquery 自 义 选 择 器 ( 在 CSS 标 准 中 不 存 在 选 择 器 ). 为 了 能 让 大 家 理 解 更 清 楚, 我 将 方 法 修 改 如 下 : jquery( selector, context )

Returns: jquery 包 装 集 根 据 选 择 器 选 取 匹 配 对 象, 以 jquery 包 装 集 形 式 返 回. context 可 以 是 Dom 对 象 集 合 或 jquery 包 装 集, 传 入 则 表 示 要 从 context 中 选 择 匹 配 对 象, 不 传 入 则 表 示 范 围 为 文 档 对 象 ( 即 页 面 全 部 对 象 ). 上 面 这 个 方 法 就 是 我 们 选 择 器 使 用 核 心 方 法. 可 以 用 "$" 代 替 jquery 让 语 法 更 简 介, 比 如 下 面 两 句 话 效 果 相 同 : 1. // 根 据 ID 获 取 jquery 包 装 集 2. var jqueryobject = $("#testdiv"); 3. 4. //$ 是 jquery 对 象 引 用 : 5. var jqueryobject = jquery("#testdiv"); 接 下 来 让 我 们 系 统 学 习 jquery 选 择 器. 三. jquery 选 择 器 全 解 通 俗 讲, Selector 选 择 器 就 是 " 一 个 表 示 特 殊 语 意 字 符 串 ". 只 要 把 选 择 器 字 符 串 传 入 上 面 方 法 中 就 能 够 选 择 不 同 Dom 对 象 并 且 以 jquery 包 装 集 形 式 返 回. 但 是 如 何 将 jquery 选 择 器 分 类 让 我 犯 难. 因 为 书 上 分 类 和 jquery 官 方 分 类 截 然 不 同. 最 后 我 决 以 实 用 为 主, 暂 时 不 去 了 解 CSS3 选 择 器 标 准, 而 按 照 jquery 官 方 分 类 进 行 讲 解. jquery 选 择 器 支 持 CSS3 选 择 器 标 准. 下 面 是 W3C 最 新 CSS3 选 择 器 标 准 : http://www.w3.org/tr/css3-selectors/ 标 准 中 选 择 器 都 可 以 在 jquery 中 使 用. jquery 选 择 器 按 照 功 能 主 要 分 为 " 选 择 " 和 " 过 滤 ". 并 且 是 配 合 使 用. 可 以 同 时 使 用 组 合 成 一 个 选 择 器 字 符 串. 主 要 区 别 是 " 过 滤 " 作 用 选 择 器 是 指 条 件 从 前 面 匹 配 内 容 中 筛 选, " 过 滤 " 选 择 器 也 可 以 单 独 使 用, 表 示 从 全 部 "*" 中 筛 选. 比 如 : $(":[title]") 等 同 于 : $("*:[title]")

而 " 选 择 " 功 能 选 择 器 则 不 会 有 默 认 范 围, 因 为 作 用 是 " 选 择 " 而 不 是 " 过 滤 ". 下 面 选 择 器 分 类 中, 带 有 " 过 滤 器 " 分 类 表 示 是 " 过 滤 " 选 择 器, 否 则 就 是 " 选 择 " 功 能 选 择 器. jquery 选 择 器 分 为 如 下 几 类 : [ 说 明 ] 1. 点 击 " 名 称 " 会 跳 转 到 此 方 法 jquery 官 方 说 明 文 档. 2. 可 以 在 下 节 中 jquery 选 择 器 实 验 室 测 试 各 种 选 择 器 1. 基 础 选 择 器 Basics 名 称 说 明 举 例 #id 根 据 元 Id 选 择 $("divid") 选 择 ID 为 divid 元 element 根 据 元 名 称 选 择, $("a") 选 择 所 有 <a> 元.class 根 据 元 css 类 选 择 $(".bgred") 选 择 所 用 CSS 类 为 bgred 元 * 选 择 所 有 元 $("*") 选 择 页 面 所 有 元 selector1, 可 以 将 几 个 选 择 器 用 "," 分 隔 开 然 后 再 拼 成 selector2, 一 个 选 择 器 字 符 串. 会 同 时 选 中 这 几 个 选 择 selectorn 器 匹 配 内 容. $("#divid, a,.bgred") [ 学 习 建 议 ]: 大 家 暂 时 记 住 基 础 选 择 器 即 可, 可 以 直 接 跳 到 下 一 节 "jquery 选 择 器 实 验 室 " 进 行 动 手 练 习, 以 后 再 回 来 慢 慢 学 习 全 部 选 择 器, 或 者 用 到 时 候 再 回 来 查 询. 2. 层 次 选 择 器 Hierarchy 名 称 说 明 举 例 ancestor descendant 使 用 "form input" 形 式 选 中 form 中 所 有 input 元. 即 ancestor( 祖 先 ) 为 from, descendant( 子 孙 ) 为 input. $(".bgred div") 选 择 CSS 类 为 bgred 元 中 所 有 <div> 元. parent > child 选 择 parent 直 接 子 节 点 child. $(".mylist>li") 选 择 CSS 类 为 child 必 须 包 含 在 parent 中 并 且 mylist 元 中 直 接 子 节 点 <li> 对 父 类 是 parent 元. 象.

prev + next prev ~ siblings prev 和 next 是 两 个 同 级 别 元 $("#hibiscus+img") 选 在 id 为. 选 中 在 prev 元 后 面 next hibiscus 元 后 面 img 对 象. 元. 选 择 prev 后 面 根 据 siblings 过 $("#somediv~[title]") 选 择 id 为 滤 元 somediv 对 象 后 面 所 有 带 有 title 注 :siblings 是 过 滤 器 属 性 元 3. 基 本 过 滤 器 Basic Filters 名 称 说 明 举 例 :first :last 匹 配 找 到 第 一 个 元 匹 配 找 到 最 后 一 个 元 查 找 表 格 第 一 行 :$("tr:first") 查 找 表 格 最 后 一 行 :$("tr:last") 去 除 所 有 与 给 :not(selector) 选 择 器 匹 配 元 查 找 所 有 未 选 中 input 元 : $("input:not(:checked)") :even :odd :eq(index) :gt(index) 匹 配 所 有 索 引 值 为 偶 数 元, 从 0 开 始 计 数 匹 配 所 有 索 引 值 为 奇 数 元, 从 0 开 始 计 数 匹 配 一 个 给 索 引 值 元 注 :index 从 0 开 始 计 数 匹 配 所 有 大 于 给 索 引 值 元 注 :index 从 0 开 始 计 数 查 找 表 格 1 3 5... 行 :$("tr:even") 查 找 表 格 2 4 6 行 :$("tr:odd") 查 找 第 二 行 :$("tr:eq(1)") 查 找 第 二 第 三 行, 即 索 引 值 是 1 和 2, 也 就 是 比 0 大 :$("tr:gt(0)") :header :animated 选 择 所 有 给 页 面 内 所 有 标 题 加 上 背 景 色 : h1,h2,h3 一 类 $(":header").css("background", "#EEE"); header 标 签. 只 有 对 不 在 执 行 动 画 效 果 元 执 行 一 个 动 画 特 效 : 匹 配 所 有 正 在 执 $("#run").click(function(){ 行 动 画 效 果 元 $("div:not(:animated)").animate({ left: "+=20" }, 1000); });

4. 内 容 过 滤 器 Content Filters 名 称 说 明 举 例 匹 配 包 含 给 :contains(text) 文 本 元 查 找 所 有 包 含 "John" div 元 :$("div:contains('john')") :empty :has(selector) :parent 匹 配 所 有 不 包 含 子 元 或 者 文 本 空 元 匹 配 含 有 选 择 器 所 匹 配 元 元 匹 配 含 有 子 元 或 者 文 本 元 查 找 所 有 不 包 含 子 元 或 者 文 本 空 元 :$("td:empty") 给 所 有 包 含 p 元 div 元 添 加 一 个 text 类 : $("div:has(p)").addclass("test"); 查 找 所 有 含 有 子 元 或 者 文 本 td 元 :$("td:parent") 5. 可 见 性 过 滤 器 Visibility Filters 名 称 说 明 举 例 :hidden 匹 配 所 有 不 可 见 元 注 : 在 1.3.2 版 本 中, hidden 匹 配 自 身 或 者 父 类 在 文 档 中 不 占 用 空 间 元. 如 果 使 用 CSS visibility 属 性 让 其 不 显 示 但 是 占 位, 则 不 输 入 hidden. 查 找 所 有 不 可 见 tr 元 :$("tr:hidden") :visible 匹 配 所 有 可 见 元 查 找 所 有 可 见 tr 元 :$("tr:visible") 6. 属 性 过 滤 器 Attribute Filters 名 称 [attribute] 说 明 匹 配 包 含 给 属 性 举 例 查 找 所 有 含 有 id 属 性 div 元 : $("div[id]")

[attribute=value] [attribute!=value] [attribute^=value] 元 匹 配 给 属 性 是 某 个 特 值 元 匹 配 给 属 性 是 不 包 含 某 个 特 值 元 匹 配 给 查 找 所 有 name 属 性 是 newsletter input 元 : $("input[name='newsletter']").attr("chec ked", true); 查 找 所 有 name 属 性 不 是 newsletter input 元 : $("input[name!='newsletter']").attr("che cked", true); $("input[name^='news']")

属 性 是 以 某 些 值 开 始 元 [attribute$=value] 匹 配 给 属 性 是 以 某 些 值 结 尾 元 查 找 所 有 name 以 'letter' 结 尾 input 元 : $("input[name$='letter']") [attribute*=value] 匹 配 给 属 性 是 以 包 含 某 些 值 查 找 所 有 name 包 含 'man' input 元 : $("input[name*='man']")

元 [attributefilter1][attributefilter2][attributef iltern] 复 合 属 性 选 择 器, 需 要 同 时 满 足 多 个 条 件 时 使 用 找 到 所 有 含 有 id 属 性, 并 且 它 name 属 性 是 以 man 结 尾 : $("input[id][name$='man']") 7. 子 元 过 滤 器 Child Filters 名 称 说 明 举 例 匹 配 其 父 元 下 第 N 个 子 或 奇 偶 元 ':eq(index)' 只 匹 配 一 个 元, 而 这 个 将 为 每 一 个 父 元 匹 配 子 元 :nth-child 从 1 开 在 每 个 ul 查 找 第 始, 而 :eq() 是 从 0 2 个 li: :nth-child(index/even/odd/equation) 算 起! $("ul 可 以 使 用 : li:nth-child(2)") nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(2) :nth-child(3n+1) :nth-child(3n+2) :first-child 匹 配 第 一 个 子 元 在 每 个 ul 中 查 找

:last-child ':first' 只 匹 配 一 个 元, 而 此 选 择 符 将 为 每 个 父 元 匹 配 一 个 子 元 匹 配 最 后 一 个 子 元 ':last' 只 匹 配 一 个 元, 而 此 选 择 符 将 为 每 个 父 元 匹 配 一 个 子 元 第 一 个 li: $("ul li:first-child") 在 每 个 ul 中 查 找 最 后 一 个 li: $("ul li:last-child") :only-child 如 果 某 个 元 是 父 元 在 ul 中 查 找 是 唯 中 唯 一 子 元, 那 将 一 子 元 li: 会 被 匹 配 $("ul 如 果 父 元 中 含 有 其 他 li:only-child") 元, 那 将 不 会 被 匹 配 8. 表 单 选 择 器 Forms 名 称 说 明 解 释 :input :text 匹 配 所 有 input, textarea, select 和 button 元 匹 配 所 有 文 本 框 查 找 所 有 input 元 : $(":input") 查 找 所 有 文 本 框 : $(":text") :password 匹 配 所 有 密 码 框 查 找 所 有 密 码 框 : $(":password") :radio 匹 配 所 有 单 选 按 钮 查 找 所 有 单 选 按 钮 :checkbox 匹 配 所 有 复 选 框 查 找 所 有 复 选 框 : $(":checkbox") :submit :image :reset :button :file 匹 配 所 有 提 交 按 钮 匹 配 所 有 图 像 域 匹 配 所 有 重 置 按 钮 匹 配 所 有 按 钮 匹 配 所 有 文 件 域 查 找 所 有 提 交 按 钮 : $(":submit") 匹 配 所 有 图 像 域 : $(":image") 查 找 所 有 重 置 按 钮 : $(":reset") 查 找 所 有 按 钮 : $(":button") 查 找 所 有 文 件 域 : $(":file") 9. 表 单 过 滤 器 Form Filters

名 称 说 明 解 释 :enabled 匹 配 所 有 可 用 元 :disabled 匹 配 所 有 不 可 用 元 查 找 所 有 可 用 input 元 : $("input:enabled") 查 找 所 有 不 可 用 input 元 : $("input:disabled") :checked 匹 配 所 有 选 中 被 选 中 元 ( 复 选 框 单 选 框 等, 不 包 括 select 中 option) 查 找 所 有 选 中 复 选 框 元 : $("input:checked") :selected 匹 配 所 有 选 中 option 元 查 找 所 有 选 中 选 项 元 : $("select option:selected") 四. jquery 选 择 器 实 验 室 jquery 选 择 器 实 验 室 使 用 是 "jquery 实 战 " 一 书 中 代 码, 感 觉 对 于 学 习 选 择 器 很 有 帮 助. 我 们 实 验 对 象 是 一 个 拥 有 很 多 元 页 面 :

在 实 验 室 页 面 "Selector" 输 入 框 中 输 入 jquery 选 择 器 表 达 式, 所 有 匹 配 表 达 式 元 会 显 示 红 框 : 如 上 图 所 示, 在 输 入 ".mylist" 后 点 击 "Apply", 下 面 输 出 框 会 显 示 运 行 结 果, 右 侧 会 将 选 中 元 用 红 框 显 示. 代 码 在 本 章 最 后 可 以 下 载. 五. API 文 档 jquery 官 方 API: http://docs.jquery.com/ 中 文 在 线 API: http://jquery.org.cn/visual/cn/index.xml 中 文 jquery 手 册 下 载 : http://down.51cto.com/data/194115 六. 总 结 本 章 节 讲 解 jquery 依 然 属 于 基 础 支 持, 所 以 没 有 太 多 应 用 实 例. 虽 然 基 础 但 是 很 难 一 次 全 部 记 住, jquery 选 择 器 可 以 说 是 最 考 验 一 个 人 jquery 功 力 地 方. 下 一 章 我 们 讲 解 如 何 操 作 jquery 包 装 集 以 及 动 态 创 建 新 元.