jQuery 权威指南

nanxin

贡献于2013-04-09

字数:0 关键词: jQuery JavaScript框架

本书由国内资深 Web 技术专家亲自执笔,4 大 Web 开发社区一致鼎力推荐,权威性毋庸置疑。 内容新颖,基于 jQuery 的最新版本撰写,所有新功能和新特性一览无余 ;内容全面,不仅讲解了 jQuery 技术本身的方方面面,而且还包括与 jQuery 相关的扩展知识 ;实战性强,不仅每个知识点都配有 完整的小案例,而且还有两个综合性的案例。本书不仅能满足读者系统学习理论知识的需求,还能满足 需要充分实践的需求。 全书一共分为 11 章,首先以示例的方式对 jQuery 做了全局性的介绍,以便于为读者建立 jQuery 的大局观,这对初学者尤为重要 ;其次详细讲解了 jQuery 的各种选择器、jQuery 操作 DOM 的方法、 jQuery 中的事件与应用、jQuery 中的动画和特效、Ajax 在 jQuery 中的应用,以及各种常用的 jQuery 插 件的使用方法和技巧,所有这些知识点都配有完整的示例(包括需求分析、代码实现和结果展示三部 分);再接着对 jQuery UI 和 jQuery 实用工具函数等扩展知识,以及 jQuery 的开发技巧与性能优化等方 面的重要知识做了详尽的阐述 ;最后以两个具有代表性的综合案例结束全书,希望能帮助读者将前面所 学的理论知识真正贯穿于实践中,迅速进入 jQuery 的殿堂。 封底无防伪标均为盗版 版权所有,侵权必究 本书法律顾问 北京市展达律师事务所 本书版权登记号 :图字 :01-2009-7838 图书在版编目(CIP)数据 jQuery 权威指南 / 陶国荣著 .—北京 :机械工业出版社,2011.1 ISBN 978-7-111-32543-7 Ⅰ . j… Ⅱ . 陶… Ⅲ . JAVA 语言 - 程序设计 Ⅳ . TP312 中国版本图书馆 CIP 数据核字(2010)第 227721 号 机械工业出版社(北京市西城区百万庄大街 22 号 邮政编码 100037) 责任编辑 :陈佳媛 印刷 2011 年 1 月第 1 版第 1 次印刷 186mm×240mm • 24 印张 标准书号 :ISBN 978-7-111-32543-7  定价 :59.00 元 凡购本书,如有缺页、倒页、脱页,由本社发行部调换 客服热线 :(010)88378991 ;88361066 购书热线 :(010)68326294 ;88379649 ;68995259 投稿热线 :(010)88379604 读者信箱 :hzjsj@hzbook.com 文前.indd 2 2010-12-16 15:14:45 前  言 “工欲善其事,必先利其器”。作为一名从事 Web 开发多年的工作者,我对每一种新技术 的出现与应用都充满了渴望与期待,渴望它能解决现存疑难,进一步提高程序开发的效率 ; 期待它能超越旧俗,引领技术未来的发展方向。近年来,Web 开发领域的新技术和新工具层 出不穷,它们的出现极大地推动了 Web 开发技术的发展,其中 jQuery 的诞生在 Web 技术的发 展进程中具有划时代的意义。 jQuery 发布于 2006 年,它因为易于使用、功能强大、展现优雅、兼容性极佳而迅速赢 得了 Web 开发者的钟爱,不断地吸引着全球开发者社区的技术爱好者、精英和专家们加入其 阵营。这也使得它在众多的 JavaScript 框架中脱颖而出,几近成为 Web 开发领域的事实标准。 恰好是在 2006 年,jQuery 也深深地吸引了我,令我从此深陷其中。 随着 Web 开发技术的发展,以及用户对应用体验的要求日益提高,当我们要开发一个 Web 应用时,不仅仅只是要考虑其功能是否足够完备,更重要的是要考虑如何才能提高用户 的体验满意度。这是理性的回归,也是 Web 开发技术发展的必然趋势,而 jQuery 恰恰是满足 这一理性需求的坚实利刃。 虽然 jQuery 使用简单,但它毕竟是一门新的技术,与传统的 JavaScript 在性能与语法上 存在诸多差异,需要相应的书籍来引导开发者们迅速而有效地掌握它,并能真正付诸实践。 综观现在已经出版的中文类 jQuery 图书,不是简单的概念性介绍,就是缺乏真正的实践指导, 而且版本相对陈旧。为了让所有还没有完全掌握 jQuery 技术的开发者能迅速步入 jQuery 的殿 堂,本书诞生了,相信它不会让你失望。 本书特点 与国内目前已经出版的同类书相比较,本书具有以下几个独有的特点 : 文前.indd 3 2010-12-16 15:14:45  IV   基于 jQuery 的最新版本撰写,完美地展现了 jQuery 最新版本的功能和特性。 内容全面、丰富、翔实,不仅由浅入深地讲解了 jQuery 的所有必备基础知识,还介绍 了 jQuery UI 等扩展知识以及 jQuery 开发中的技巧与性能优化方面的高级知识。 本书极其注重实战,因为动手实践才是掌握一门新技术的最有效途径。不仅书中的每 一个小知识点都配有精心选择的小案例(总共 100 多个),而且还有两个非常实用的综 合性案例。所有案例的讲解都非常详细,不仅有功能需求分析和完整实现代码,而且 还有最终效果的展示,更重要的是,将所有理论知识都巧妙地贯穿于其中,非常易于 读者理解。如果读者能在阅读本书的过程中逐一亲手实现这些案例,在实际开发中应 该就具备相当的动手能力了。 本书面向的读者 本书适合所有希望迅速掌握 jQuery 并将之付诸实践的 Web 开发者阅读。 如何阅读本书 由于本书的结构是层进式的,章节之间有一定的关联,因此建议读者按章节的编排顺序 逐章阅读。但在阅读本书的示例时,请尽量不要照抄书中的所有示例,而是重在理解代码的 实现思路,自己动手开发相似功能的应用,并逐步完善其功能,这样才能真正领会示例所反 映出的 jQuery 技术的理论本质。 联系作者 希望这部耗时数月、承载了我近 4 年 jQuery 开发心得和体会的拙著能给每一位阅读过 它的读者带来技术上的提升和思路上的启发。非常希望能借本书出版的机会与国内热衷于 jQuery 技术的开发者交流,如果大家想联系我,欢迎给我发邮件 :tao_guo_rong@163.com。 致谢 本书能顺利出版,首先要感谢机械工业出版社华章分社的编辑们,尤其是杨福川编辑。 正是由于他们在我写作的整个过程中不断地给予专业的指导,才使得我整体的创作思路不断 被提升和改进,使本书能保质保量地完成。同时,我还要感谢我的家人,正是他们的理解与 默默支持,才使得我能全心写作、顺利完成本书的编写。 陶国荣 2010 年 11 月 文前.indd 4 2010-12-16 15:14:46 目  录 前  言 第 1 章 jQuery 开发入门 /1 1.1 jQuery 概述 /2 1.1.1 认识 jQuery /2 1.1.2 jQuery 基本功能 /2 1.1.3 搭建 jQuery 开发环境 /3 1.1.4 编写第一个简单的 jQuery 应用 /3 1.1.5 jQuery 程序的代码风格 /5 1.2 jQuery 的简单应用 /7 1.2.1 jQuery 访问 DOM 对象 /7 1.2.2 jQuery 控制 DOM 对象 /7 1.2.3 jQuery 控制页面 CSS /9 1.3 本章小结 /11 第 2 章 jQuery 选择器 /12 2.1 jQuery 选择器概述 /13 2.1.1 什么是选择器 /13 2.1.2 选择器的优势 /13 文前.indd 5 2010-12-16 15:14:47  VI   2.2 jQuery 选择器详解 /17 2.2.1 基本选择器 /18 2.2.2 层次选择器 /20 2.2.3 简单过滤选择器 /22 2.2.4 内容过滤选择器 /25 2.2.5 可见性过滤选择器 /27 2.2.6 属性过滤选择器 /28 2.2.7 子元素过滤选择器 /30 2.2.8 表单对象属性过滤选择器 /32 2.2.9 表单选择器 /34 2.3 综合案例分析—导航条在项目中的应用 /37 2.3.1 需求分析 /37 2.3.2 效果界面 /38 2.3.3 功能实现 /38 2.3.4 代码分析 /40 2.4 本章小结 /41 第 3 章 jQuery 操作 DOM /42 3.1 DOM 基础 /43 3.2 访问元素 /44 3.2.1 元素属性操作 /45 3.2.2 元素内容操作 /49 3.2.3 获取或设置元素值 /51 3.2.4 元素样式操作 /53 3.3 创建节点元素 /58 3.4 插入节点 /60 3.4.1 内部插入节点方法 /60 3.4.2 外部插入节点方法 /64 3.5 复制节点 /66 3.6 替换节点 /68 3.7 包裹节点 /69 3.8 遍历元素 /71 3.9 删除元素 /73 3.10 综合案例分析—数据删除和图片预览在项目中的应用 /75 3.10.1 需求分析 /75 文前.indd 6 2010-12-16 15:14:47   VII  3.10.2 效果界面 /75 3.10.3 功能实现 /77 3.10.4 代码分析 /80 3.11 本章小结 /81 第 4 章 jQuery 中的事件与应用 /82 4.1 事件机制 /83 4.2 页面载入事件 /85 4.2.1 ready() 方法的工作原理 /85 4.2.2 ready() 方法的几种相同写法 /86 4.3 绑定事件 /86 4.4 切换事件 /90 4.4.1 hover() 方法 /90 4.4.2 toggle() 方法 /93 4.5 移除事件 /94 4.6 其他事件 /96 4.6.1 方法 one() /97 4.6.2 方法 trigger () /98 4.7 表单应用 /100 4.7.1 文本框中的事件应用 /100 4.7.2 下拉列表框中的事件应用 /104 4.8 列表应用 /109 4.9 网页选项卡的应用 /114 4.10  综合案例分析—删除数据时的提示效果在项目中的应用 /116 4.10.1 需求分析 /116 4.10.2 效果界面 /117 4.10.3 功能实现 /118 4.10.4 代码分析 /121 4.11 本章小结 /123 第 5 章 jQuery 的动画与特效 /124 5.1 显示与隐藏 /125 5.1.1 show() 与 hide() 方法 /125 5.1.2 动画效果的 show() 与 hide() 方法 /126 5.1.3 toggle() 方法 /128 文前.indd 7 2010-12-16 15:14:47  VIII   5.2 滑动 /131 5.2.1 slideDown() 与 slideUp 方法 /131 5.2.2 slideToggle() 方法 /134 5.3 淡入淡出 /135 5.3.1 fadeIn() 与 fadeOut() 方法 /135 5.3.2 fadeTo() 方法 /137 5.4 自定义动画 /139 5.4.1 简单的动画 /140 5.4.2 移动位置的动画 /141 5.4.3 队列中的动画 /144 5.4.4 动画停止和延时 /146 5.5 动画效果综述 /148 5.5.1 各种动画方法说明 /148 5.5.2 使用 animate() 方法代替其他动画效果 /148 5.6 综合案例分析—动画效果浏览相册中的图片 /149 5.6.1 需求分析 /149 5.6.2 效果界面 /149 5.6.3 功能实现 /151 5.6.4 代码分析 /155 5.7 本章小结 /158 第 6 章 Ajax 在 jQuery 中的应用 /159 6.1 加载异步数据 /160 6.1.1 传统的 JavaScript 方法 /160 6.1.2 jQuery 中的 load() 方法 /162 6.1.3 jQuery 中的全局函数 getJSON()/164 6.1.4 jQuery 中的全局函数 getScript()/166 6.1.5 jQuery 中异步加载 XML 文档 /168 6.2 请求服务器数据 /170 6.2.1 $.get() 请求数据 /170 6.2.2 $.post() 请求数据 /172 6.2.3 serialize() 序列化表单 /175 6.3 $.ajax() 方法 /177 6.3.1 $.ajax() 的基本概念 /177 6.3.2 $.ajaxSetup() 设置全局 Ajax /181 文前.indd 8 2010-12-16 15:14:47   IX  6.4 Ajax 中的全局事件 /184 6.4.1 Ajax 全局事件的基本概念 /184 6.4.2 ajaxStart 与 ajaxStop 全局事件 /184 6.5 综合案例分析—用 Ajax 实现新闻点评即时更新 /187 6.5.1 需求分析 /187 6.5.2 效果界面 /187 6.5.3 功能实现 /189 6.5.4 代码分析 /193 6.6 本章小结 /196 第 7 章 jQuery 常用插件 /197 7.1 jQuery 插件概述 /198 7.2 验证插件 validate /198 7.3 表单插件 form /202 7.4 Cookie 插件 cookie /205 7.5 搜索插件 AutoComplete /209 7.6 图片灯箱插件 notesforlightbox /213 7.7 右键菜单插件 contextmenu /216 7.8 图片放大镜插件 jqzoom /222 7.9 自定义 jQuery 插件 /224 7.9.1 插件的种类 /225 7.9.2 插件开发要点 /225 7.9.3 开发插件示例 /226 7.10 综合案例分析—使用 uploadify 插件实现文件上传功能 /232 7.10.1  需求分析 /232 7.10.2 效果界面 /233 7.10.3 功能实现 /234 7.10.4 代码分析 /236 7.11 本章小结 /241 第 8 章 jQuery UI 插件 /242 8.1 认识 jQuery UI /243 8.2 jQuery UI 交互性插件 /244 8.2.1 拖曳插件 /244 8.2.2 放置 /247 文前.indd 9 2010-12-16 15:14:47  X   8.2.3 排序插件 /250 8.3 jQuery UI 微型插件 /252 8.3.1 折叠面板插件 /252 8.3.2 日历 /255 8.3.3 选项卡插件 /260 8.3.4 对话框插件 /263 8.4 综合案例分析—使用 jQuery UI 插件以拖动方式管理相册 /269 8.4.1 需求分析 /269 8.4.2 效果界面 /269 8.4.3 功能实现 /270 8.4.4 代码分析 /274 8.5 本章小结 /277 第 9 章 jQuery 实用工具函数 /278 9.1 什么是工具函数 /279 9.2 工具函数的分类 /279 9.2.1 浏览器的检测 /279 9.2.2 数组和对象的操作 /284 9.2.3 字符串操作 /291 9.2.4 测试操作 /293 9.2.5 URL 操作 /297 9.3 工具函数的扩展 /299 9.4 其他工具函数—$.proxy() /302 9.5  综合案例分析—使用 jQuery 扩展工具函数实现对字符串指定类型的检测 /305 9.5.1 需求分析 /305 9.5.2 效果界面 /305 9.5.3 功能实现 /306 9.5.4 代码分析 /309 9.6 本章小结 /311 第 10 章 jQuery 性能优化与最佳实践 /312 10.1 优化选择器执行的速度 /313 10.1.1 优先使用 ID 与标记选择器 /313 10.1.2 使用 jQuery 对象缓存 /314 10.1.3 给选择器一个上下文 /315 文前.indd 10 2010-12-16 15:14:47   XI  10.2 处理选择器中的不规范元素标志 /317 10.2.1 选择器中含有特殊符号 /317 10.2.2 选择器中含有空格符号 /318 10.3 优化事件中的冒泡现象 /319 10.4 使用 data() 方法缓存数据 /321 10.5 解决 jQuery 库与其他库的冲突 /326 10.5.1 jQuery 在其他库前导入 /326 10.5.2 jQuery 在其他库后导入 /328 10.6 使用子查询优化选择器性能 /330 10.7 减少对 DOM 元素直接操作 /332 10.8 正确区分 DOM 对象与 jQuery 对象 /334 10.8.1 DOM 对象与 jQuery 对象的定义 /334 10.8.2 DOM 对象与 jQuery 对象的类型转换 /335 10.9 本章小结 /337 第 11 章 综合案例开发 /338 案例 1 :切割图片 /339 案例 2 :在线聊天室 /349 本章小结 /365 文前.indd 11 2010-12-16 15:14:47 示 例 目 录 第 1 章 jQuery 开发入门 /1 示例 1-1 编写第一个简单的 jQuery 程序 /4 示例 1-2 jQuery 事件的链式写法 /5 示例 1-3 控制 DOM 对象 /7 示例 1-4 jQuery 控制 CSS 样式 /10 第 2 章 jQuery 选择器 /12 示例 2-1 使用 JavaScript 实现隔行变色 /13 示例 2-2 使用 jQuery 选择器实现隔行变色 /15 示例 2-3 使用 JavaScript 输出文字信息 /16 示例 2-4 使用 jQuery 输出文字信息 /17 示例 2-5 使用 jQuery 基本选择器选择元素 /18 示例 2-6 使用 jQuery 层次选择器选择元素 /20 示例 2-7 使用 jQuery 基本过滤选择器选择元素 /22 示例 2-8 使用 jQuery 内容过滤选择器选择元素 /25 示例 2-9 使用 jQuery 可见性过滤选择器选择元素 /27 示例 2-10 使用 jQuery 属性过滤选择器选择元素 /28 示例 2-11 使用 jQuery 子元素过滤选择器选择元素 /30 文前.indd 12 2010-12-16 15:14:48   XIII  示例 2-12 通过表单对象属性过滤选择器获取表单对象 /32 示例 2-13 使用 jQuery 表单过滤选择器获取元素 /35 综合案例分析—导航条在项目中的应用 /37 第 3 章 jQuery 操作 DOM /42 示例 3-1 创建一个 DOM 页面文档 /43 示例 3-2 通过 attr(name) 方法获取元素的属性 /45 示例 3-3 设置元素的属性(一)/46 示例 3-4 设置元素的属性(二)/48 示例 3-5 设置或获取元素的内容 /50 示例 3-6 设置或获取元素的值 /51 示例 3-7 直接设置元素样式值 /54 示例 3-8 增加 CSS 类别 /55 示例 3-9 类别切换 /57 示例 3-10 动态创建节点元素 /59 示例 3-11 插入节点(一)/62 示例 3-12 插入节点(二)/63 示例 3-13 外部插入节点 /65 示例 3-14 复制元素节点 /66 示例 3-15 替换元素节点 /68 示例 3-16 包裹元素节点 /70 示例 3-17 遍历元素 /72 示例 3-18 删除元素 /73 综合案例分析—数据删除和图片预览在项目中的应用 /75 第 4 章 jQuery 中的事件与应用 /82 示例 4-1 事件中的冒泡现象 /83 示例 4-2 用 bind 方法绑定事件 /87 示例 4-3 用映射方式绑定不同的事件 /88 示例 4-4 用 hover 方法绑定事件 /91 示例 4-5 用 toggle 方法绑定事件 /93 示例 4-6 用 unbind 方法移除事件 /94 示例 4-7 用 one 方法绑定事件 /97 示例 4-8 用 trigger 方法绑定事件 /98 示例 4-9 文本框中的事件应用 /100 文前.indd 13 2010-12-16 15:14:48  XIV   示例 4-10 下拉列表框中的事件应用 /104 示例 4-11 列表中的导航菜单应用 /109 示例 4-12 网页选项卡的应用 /114 综合案例分析—删除数据时的提示效果在项目中的应用 /116 第 5 章 jQuery 的动画与特效 /124 示例 5-1 show() 与 hide() 方法简介 125 示例 5-2 动画效果的 show() 与 hide() 方法 127 示例 5-3 toggle() 方法的使用 /129 示例 5-4 slideDown() 与 slideUp() 方法 /132 示例 5-5 slideToggle() 方法 /134 示例 5-6 fadeIn() 和 fadeOut() 方法 /136 示例 5-7 fadeTo() 方法 /138 示例 5-8 简单的动画 /140 示例 5-9 移动位置的动画 /142 示例 5-10 队列中的动画 /144 示例 5-11 动画停止和延时 /146 综合案例分析—动画效果浏览相册中的图片 /149 第 6 章 Ajax 在 jQuery 中的应用 /159 示例 6-1 传统的 JavaScript 方法实现 Ajax 功能 /160 示例 6-2 load() 方法实现异步获取数据 /162 示例 6-3 全局函数 getJSON() 实现异步获取数据 /164 示例 6-4 全局函数 getScript() 实现异步获取数据 /166 示例 6-5 全局函数 get() 实现异步获取 XML 文档数据 /168 示例 6-6 全局函数 get () 向服务器请求数据 /171 示例 6-7 全局函数 post () 向服务器请求数据 /173 示例 6-8 serialize() 序列化表单 /175 示例 6-9 用 $.ajax() 方法发送请求 /178 示例 6-10 $.ajaxSetup() 方法全局设置 Ajax /181 示例 6-11 jQuery 中的全局事件 /185 综合案例分析—用 Ajax 实现新闻点评即时更新 /187 第 7 章 jQuery 常用插件 /197 示例 7-1 验证插件的使用 /199 文前.indd 14 2010-12-16 15:14:48   XV  示例 7-2 表单插件的使用 /203 示例 7-3 cookie 插件的使用 /206 示例 7-4 搜索插件的使用 /209 示例 7-5 图片灯箱插件的使用 /213 示例 7-6 右键菜单插件的使用 /217 示例 7-7 图片放大镜插件的使用 /222 示例 7-8 对象级别插件的开发 /226 示例 7-9 类级别插件的开发 /229 综合案例分析—使用 uploadify 插件实现文件上传功能 /232 第 8 章 jQuery UI 插件 /242 示例 8-1 使用 draggable 插件实现对象的拖曳操作 /245 示例 8-2 使用 droppable 插件实现对象的放置操作 /247 示例 8-3 使用 sortable 插件实现列表中表项的拖曳排序操作 /250 示例 8-4 使用 accordion 插件实现页面中多区域的折叠操作 /253 示例 8-5 使用 datepicker 插件实现日期选择的基本操作 /256 示例 8-6 使用 datepicker 插件实现分段时间的选择 /258 示例 8-7 使用 tabs 插件展示选项卡的基本功能 /261 示例 8-8 使用 dialog 插件弹出提示和确定信息对话框 /264 综合案例分析—使用 jQuery UI 插件以拖动方式管理相册 /269 第 9 章 jQuery 实用工具函数 /278 示例 9-1 browser 对象的使用 /280 示例 9-2 boxModel 对象的使用 /282 示例 9-3 $.each() 函数遍历数组 /284 示例 9-4 $.each() 函数遍历对象 /285 示例 9-5 $. grep() 函数筛选数据 /287 示例 9-6 $. map() 函数变更数据 /288 示例 9-7 $.inArray() 函数搜索数据 /290 示例 9-8 $.trim() 函数除掉字符串左右两边的空格符 /292 示例 9-9 $.isEmptyObject() 函数的使用 /293 示例 9-10 $.isPlainObject () 函数的使用 /295 示例 9-11 $.contains() 函数的使用 /296 示例 9-12 使用函数 $.param() 对数组进行序列化 /298 示例 9-13 使用函数 $.extend() 扩展工具函数 /300 文前.indd 15 2010-12-16 15:14:48  XVI   示例 9-14 使用函数 $.proxy() 改变事件函数的作用域 /302 综合案例分析—使用 jQuery 扩展工具函数实现对字符串指定类型的检测 /305 第 10 章 jQuery 性能优化与最佳实践 /312 示例 10-1 在指定的查找范围内获取 DOM 元素 /315 示例 10-2 选择器中含有空格符与不含空格符的区别 /318 示例 10-3 事件中的 target 方法优化冒泡现象 /320 示例 10-4 使用 data() 方法在元素上存取移除数据 /322 示例 10-5 使用 data() 方法在元素上存取移除 JSON 格式的数据 /323 示例 10-6 解决 jQuery 库先于其他库导入时,变量“$”的使用权问题 /326 示例 10-7 解决 jQuery 库后于其他库导入时,变量“$”的使用权问题 /328 示例 10-8 使用子查询优化选择器性能 /330 示例 10-9 减少对 DOM 元素直接操作 /332 示例 10-10 DOM 对象与 jQuery 对象的类型转换 /335 第 11 章 综合案例开发 /338 案例 1 :切割图片 /339 案例 2 :在线聊天室 /349 文前.indd 16 2010-12-16 15:14:48 第 1 章 jQuery 开发入门 本章内容 jQuery 概述 jQuery 的简单应用 本章小结 正文.indd 1 2010-12-16 15:15:25  2   jQuery 权威指南 随着互联网的迅速发展,Web 页面得到了广泛应用,但人们的需求已不仅限于页面的功 能,而更多地注重页面展示形式和用户体验度。JavaScript 语言可以很好地满足程序开发者的 需求,帮助程序开发者开发出用户体验度很高的页面,因而越来越受到广大程序员的关注。 jQuery 是 JavaScript 库中的优秀一员,代码高效、兼容性强等特点使得它近年来风靡全球,越 来越多的开发者痴迷其中。 1.1 jQuery 概述 1.1.1 认识 jQuery jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目,随着被人们熟知,越来越 多的程序高手加入其中,完善并壮大其项目内容,如今已发展成为集 JavaScript、CSS、DOM、 Ajax 于一体的强大框架体系。它的主旨是 :以更少的代码,实现更多的功能(Write less,do more)。 1.1.2 jQuery 基本功能 1.访问和操作 DOM 元素 使用 jQuery 库,可以很方便地获取和修改页面中的某元素,无论是删除、移动还是复制 某元素,jQuery 都提供了一整套方便、快捷的方法,既减少了代码的编写,又大大提高了用 户对页面的体验度 ;其具体示例,我们将在后面的章节中陆续展示。 2. 控制页面样式 通过引入 jQuery,程序开发人员可以很便捷地控制页面的 CSS 文件。浏览器对页面文件 的兼容性,一直以来都是页面开发者最为头痛的事,而使用 jQuery 操作页面的样式却可以很 好地兼容各种浏览器。 3. 对页面事件的处理 引入 jQuery 库后,可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻 辑与功效 ;页面设计者侧重于页面的优化与用户体验。然后,通过事件绑定机制,可以很轻 松地实现二者的结合。 4. 大量插件在页面中的运用 在引入 jQuery 库后,还可以使用大量的插件来完善页面的功能和效果,如表单插件、UI 插件,这些插件的使用极大地丰富了页的展示效果,使原来使用 JavaScript 代码遥不可及的功 能通过插件的引入而轻松地实现。 5. 与 Ajax 技术的完美结合 Ajax 的异步读取服务器数据的方法,极大地方便了程序的开发,加深了用户的页面体验 正文.indd 2 2010-12-16 15:15:26 第 1 章 jQuery 开发入门   3  度 ;而引入 jQuery 库后,不仅完善了原有的功能,而且减少了代码的书写,通过其内部对象 或函数,加上几行代码就可以实现复杂的功能。 综上所述,jQuery 在页面中的功能还有很多,我们将在接下来的章节中一一介绍。 1.1.3 搭建 jQuery 开发环境 1. 下载 jQuery 文件库 在 jQuery 的官方网站(http:// jquery.com)中,下载最新版本的 jQuery 文件库,其网站页 面如图 1-1 所示。 图 1-1 jQuery 的官方网站 在网站中,选择大小为 24KB 的压缩包,单击 Download(下载)按钮,便可以将最新版 的 jQuery 框架下载到本地。目前(截止到 2010 年 7 月)最新版本为 V1.4.2。 2. 引入 jQuery 文件库 下载完 jQuery 框架文件后,并不需要任何安装,仅需要使用 在页面的头部分,加入上述代码后,便完成了 jQuery 框架的引入,就可以开始我们的 jQuery 之旅了。 1.1.4 编写第一个简单的 jQuery 应用 首先,我们来编写一个简单的程序,参见下面的示例。 正文.indd 3 2010-12-16 15:15:26  4   jQuery 权威指南 示例 1-1 编写第一个简单的 jQuery 程序 (1)功能描述 在页面加载时,弹出一个模式对话框,显示“您好,欢迎来到 jQuery 世界”字样,单击 “确定”按钮后关闭该窗口。 (2)实现代码 新建一个 HTML 文件 1-1.html,加入如代码清单 1-1 所示的代码。 代码清单 1-1 第一个简单的 jQuery 应用 第一个简单的 jQuery 程序 在上述文件的代码中,有一段如下的代码 : $(document).ready(function(){ // 程序段 }) 该段代码类似于传统的 JavaScript 代码 : window.onload=function(){ // 程序段 } 虽然上述两段代码在功能上可以互换,但它们之间又有许多区别 : 执行时间不同 :$(document).ready 在页面框架下载完毕后就执行 ;而 window.onload 必须 在页面全部加载完毕(包含图片下载)后才能执行。很明显,前者的执行效率高于后者。 执行数量不同 :$(document).ready 可以重复写多个,并且每次执行结果不同 ;而 window. onload 尽管可以执行多个,但仅输出最后一个执行结果,无法完成多个结果的输出。 $(document).ready(function(){}) 可以简写成 $(function(){}),因此与下面的代码是等 价的。 正文.indd 4 2010-12-16 15:15:26 第 1 章 jQuery 开发入门   5  $(document).ready(function(){ // 程序段 }) 等价于 $(function(){ // 程序段 }) (3)页面效果 HTML 文件 1-1.html 最后实现的页面效果如图 1-2 所示。 图 1-2 第一个 jQuery 程序运行后的页面效果 1.1.5 jQuery 程序的代码风格 1.“$”美元符的使用 在 jQuery 程序中,使用最多的莫过于“$”美元符了,无论是页面元素的选择、功能函数 的前缀,都必须使用该符号,可以说它是 jQuery 程序的标志。 2. 事件操作链接式书写 在编写页面某元素事件时,jQuery 程序可以使用链接式的方式编写该元素的所有事件。 为了更好地说明该书写方法的使用,我们通过一个示例加以阐述。 示例 1-2 jQuery 事件的链式写法 (1)功能描述 在页面中,有一个
标记,在该标记内,包含二个
标记,一个为主题,另一个 为内容,页面首次加载时,被包含的内容
标记是不可见的,当用户单击主题
标记 时,改变自身的背景色,并将内容
标记显示出来。 (2)实现代码 新建一个 HTML 文件 1-2.html,加入如代码清单 1-2 所示的代码。 代码清单 1-2 jQuery 事件的链式写法 正文.indd 5 2010-12-16 15:15:26  6   jQuery 权威指南 jQuery 事件的链式写法 在上述文件的代码中,加粗的代码是链式写法。 代 码 功 能 说 明 :当 用 户 单 击 Class 名 称 为 "divTitle" 的 元 素 时, 自 身 增 加 名 称 为 "divCurrColor" 的样式 ;同时,将接下来的 Class 名称为 "divContent" 元素显示出来。可以看出, 两个功能的实现通过 "." 符号链接在一起。 (3)页面效果 执行 HTML 文件 1-2.html,实现的页面效果如图 1-3 所示。 图 1-3 DIV 元素单击前后的页面对比效果 正文.indd 6 2010-12-16 15:15:27 第 1 章 jQuery 开发入门   7  1.2 jQuery 的简单应用 1.2.1 jQuery 访问 DOM 对象 1. 什么是 DOM 对象 DOM(Document Object Model,文本对象模型)的每一个页面都是一个 DOM 对象,通 过传统的 JavaScript 方法访问页面中的元素,就是访问 DOM 对象。 例如 :在页面中 2 个
标记元素,其代码如下 :
测试文本
通过下面的 JavaScript 代码可以访问 DOM 对象和获取或设置其内容值 : var tDiv=document.getElementById("divTmp"); // 获取 DOM 对象 var oDiv=document.getElementById("divOut"); // 获取 DOM 对象 var cDiv=tDiv.innerHTML; // 获取 DOM 对象中的内容 oDiv.innerHTML=cDiv; // 设置 DOM 对象中的内容 如果执行上面的 JavaScript 代码,将在 ID 为 "divOut" 的标记中显示 ID 为 "divTmp" 的标 记内容。 2. 什么是 jQuery 对象 在 jQuery 库中,通过本身自带的方法获取页面元素的对象,我们称之为 jQuery 对象 ;为 了同样实现在 ID 为 "divOut" 的标记中显示 ID 为 "divTmp" 的标记内容,采用 jQuery 访问页 面元素的方法,其实现的代码如下 : var tDiv=$("#divTmp"); // 获取 jQuery 对象 var oDiv=$("#divOut"); // 获取 jQuery 对象 var cDiv=tDiv.html(); // 获取 jQuery 对象中的内容 oDiv.html(cDiv); // 设置 jQuery 对象中的内容 通过代码的对比,可以看出 jQuery 对象访问方法比 DOM 对象访问方法更简单、高效, 它们都实现同样的功能。 1.2.2 jQuery 控制 DOM 对象 在介绍使用 jQuery 控制 DOM 对象前,先通过一个简单的示例,说明如何用传统的 JavaScript 方法访问 DOM 对象。 示例 1-3 控制 DOM 对象 (1)功能描述 在页面中,用户输入姓名、性别和婚姻状况,单击“提交”按钮后,将获取到的数据信 息显示在页面
标记中。 正文.indd 7 2010-12-16 15:15:27  8   jQuery 权威指南 (2)实现代码 新建一个 HTML 文件 1-3.html, 加入如代码清单 1-3 所示的代码。 代码清单 1-3 使用传统的 JavaScript 方法访问 DOM 对象 控制 DOM 对象
请输入如下信息
姓名 :
性别 :
婚否 :
在上面的代码中,使用传统的 JavaScript 方法获取用户输入的信息,并保存到变量中,最 后通过 document.getElementById("divTip").innerHTML 方法显示所有的数据信息。下面将示例 1-3 中的 JavaScript 代码进行修改,引入 jQuery 库,通过 jQuery 中的方法获取元素的值,并将 获取的数据显示出来。修改后的 JavaScript 代码如下所示 : ... ... 在修改后的 JavaScript 代码中,$("#Text1").val() 在 jQuery 库中表示获取 ID 号为“Text1” 的值 ;$("#Radio1").is (":checked") 表示 ID 号为“Radio1”的单选按钮是否被选中,如果选中, 则返回“男”,否则,返回“女”。可以看出,通过 jQuery 库中的方法访问或控制页面中的元 素,比使用传统的 JavaScript 代码要简洁得多,并且还兼容各种浏览器。 (3)页面效果 最终实现的页面效果如图 1-4 所示。 1.2.3 jQuery 控制页面 CSS 在 jQuery 框架中,通过自带的 JavaScript 编程,提供全部的 CSS3 下的选择器,开发者可 以首先定义自己的样式文件,然后通过 jQuery 中的 addClass() 方法将该样式轻松地添加到页 面指定的某元素中,而不用考虑浏览器的兼容性。 正文.indd 9 2010-12-16 15:15:27  10   jQuery 权威指南 图 1-4 控制 jQuery 对象 下面通过一个简单的示例来介绍如何使用 jQuery 中的 toggleClass(className) 方法来实现 页面样式的动态切换功能。 示例 1-4 jQuery 控制 CSS 样式 (1)功能描述 在页面中,增加一个
元素标记,当用户单击该元素时,变换其文本内容和背景色, 再次单击时,恢复其初始的内容和背景色。 (2)实现代码 新建一个 HTML 文件 1-4.html,加入如代码清单 1-4 所示的代码。 代码清单 1-4 jQuery 控制 CSS 样式 jQuery 控制 CSS 样式
点击前的样式
(3)页面效果 HTML 文件 1-4.html 执行后,最终实现的页面效果如图 1-5 所示。 图 1-5 jQuery 控制 CSS 在 jQuery 库中,通过简单的几行代码,就可以实现传统 JavaScript 大量代码完成的功能, 节省开发者的时间,提高工作效率。 1.3 本章小结 本章通过循续渐进的方式,先从 jQuery 的基础概念入手,介绍 jQuery 库的下载,引入 简单应用方法 ;后部分侧重于 jQuery 控制 DOM 对象和页面 CSS 样式的介绍,通过一些简单 的小示例,使读者对 jQuery 在页面中的功能应用有一个大致的了解,为下一章节进一步学习 jQuery 库的详细对象和方法奠定基础。 正文.indd 11 2010-12-16 15:15:28 第 2 章 jQuery 选择器 本章内容 jQuery 选择器概述 jQuery 选择器详解 综合案例分析—导航条在项目中的应用 本章小结 正文.indd 12 2010-12-16 15:15:28 第 2 章 jQuery 选择器   13  通过对第 1 章的介绍,相信大家对 jQuery 在前台页面中的应用有了一个初步的了解。在 页面中为某个元素添加属性或事件时,必须先准确地找到该元素—在 jQuery 库中,可以通 过选择器实现这一重要的核心功能。本章将详细介绍在 jQuery 中如何通过选择器快速定位元 素的方法和技巧。 2.1 jQuery 选择器概述 2.1.1 什么是选择器 jQuery 选择器继承了 CSS 与 Path 语言的部分语法,允许通过标签名、属性名或内容对 DOM 元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过 jQuery 选择器对页面元 素的精准定位,才能完成元素属性和行为的处理。 2.1.2 选择器的优势 与传统的 JavaScript 获取页面元素和编写事务相比,jQuery 选择器具有明显的优势,具体 表现在以下两个方面 : 代码更简单。 完善的检测机制。 下面将详细介绍这两个方面。 1. 代码更简单 由于在 jQuery 库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更 加简单轻松,简单几行代码就可以实现较为复杂的功能。 下面通过一个实现表格隔行变色功能的示例,分别使用传统的 JavaScript 语言与 jQuery 语言加以说明。 示例 2-1 使用 JavaScript 实现隔行变色 (1)功能描述 在页面中,通过一个 标记展示数据列表信息,在元素标记中,奇数行与偶数行的 背景色不同,从而实现隔行变色的页面展示效果。 (2)实现代码 使用传统的 JavaScript 实现该页面功能。新建一个 HTML 文件 2-1.html,加入如代码清单 2-1 所示的代码。 代码清单 2-1 使用 JavaScript 实现隔行变色 正文.indd 13 2010-12-16 15:15:28  14   jQuery 权威指南 使用 JavaScript 实现隔行变色
学号 姓名 性别 总分
1001 张小明 320
1002 李明琪 350
在代码清单 2-1 中,首先通过 ID 号获取表格元素,然后遍历表格的各行,根据行号的奇 偶性,动态设置该行的背景色,从而实现隔行变色的页面效果。 页面中的 JavaScript 代码虽可以实现最终效果,但循环页面的元素会影响打开速度,并 且代码较为复杂,如果使用 jQuery 选择器实现上述页面效果,则需要在页面中加入一些代码, 详见下面的示例。 正文.indd 14 2010-12-16 15:15:28 第 2 章 jQuery 选择器   15  示例 2-2 使用 jQuery 选择器实现隔行变色 新建一个 HTML 文件 2-2.html,加入如代码清单 2-2 所示的代码。 代码清单 2-2 使用 jQuery 选择器实现隔行变色 ... 使用 jQuery 选择器实现隔行变色 ... 省略样式代码 ... 省略页面主体代码 从代码清单 2-2 中可以看出,使用 jQuery 选择器可以很快捷地定位页面中的某个元素, 并设置该元素的相应属性,具有代码简单、执行效果高的优点。 (3)页面效果 虽然示例 2-1 和示例 2-2 中的代码不同,但都实现了页面数据隔行变色的功能,其最终实 现的页面效果完全相同,如图 2-1 所示。 图 2-1 页面数据隔行变色效果 2. 完善的检测机制 在传统的 JavaScript 代码中,给页面中某元素设置事务时必须先找到该元素,然后赋予 相应的属性或事件 ;如果该元素在页面中不存在或被前面代码所删除,那么浏览器将提示运 行出错信息,影响后续代码的执行。因此,在 JavaScript 代码中,为了避免显示这样的出错信 息,先要检测该元素是否存在,然后再运行其属性或事件代码,从而导致代码冗余,影响执 行效率。 正文.indd 15 2010-12-16 15:15:29  16   jQuery 权威指南 在 jQuery 选择器定位页面元素时,无需考虑所定位的元素在页面中是否存在,即使该元 素不存在该元素,浏览器也不提示出错信息,极大地方便了代码的执行效率。 下面通过一个简单的示例分别使用 JavaScript 语言与 jQuery 语言来说明该检测机制在页 面中的实现效果。 示例 2-3 使用 JavaScript 输出文字信息 (1)功能描述 在页面
标记中输出一行“这是一个检测页面”的字符。 (2)实现代码 使用传统的 JavaScript 实现该页面功能。 新建一个 HTML 文件 2-3.html,加入如代码清单 2-3 所示的代码。 代码清单 2-3 使用 JavaScript 输出文字信息 JavaScript 代码检测页面元素 在 JavaScript 代码中,有一行代码如下 : if(document.getElementById("divT")){...} 该行代码用于检测所定位的页面元素是否存在,如果存在,则执行下面的代码,否则 不执行 ;假设不编写该行代码检测元素的存在,则在浏览器中将出现如图 2-2 所示的出错 提示信息。 正文.indd 16 2010-12-16 15:15:29 第 2 章 jQuery 选择器   17  图 2-2 页面对象不存在的出错提示信息 如果将例 2-3 中的 JavaScript 代码改写成 jQuery 选择器方式获取页面元素,那么不需要检 测元素是否存在,且页面正常执行,其修改后的代码如下例所示。 示例 2-4 使用 jQuery 输出文字信息 新建一个 HTML 文件 2-4.html,加入如代码清单 2-4 所示的代码。 代码清单 2-4 使用 jQuery 输出文字信息 ... jQuery 代码检测页面元素 ... 省略样式代码 ... 省略页面主体代码 2.2 jQuery 选择器详解 根据所获取页面中元素的不同,可以将 jQuery 选择器分为 :基本选择器、层次选择器、 过滤选择器、表单选择器四大类。其中,在过滤选择器中又可分为 :简单过滤选择器、内容 过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤 选择器 6 种。其分类结构如图 2-3 所示。 正文.indd 17 2010-12-16 15:15:29  18   jQuery 权威指南 图 2-3 jQuery 选择器分类示意图 2.2.1 基本选择器 基本选择器是 jQuery 中使用最频繁的选择器,它由元素 Id、Class、元素名、多个选择符 组成,通过基本选择器可以实现大多数页面元素的查找,其详细说明如表 2-1 所示。 表 2-1 基本选择器语法 选择器 功能 返回值 #id 根据给定的 ID 匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根据给定的类匹配元素 元素集合 * 匹配所有元素 元素集合 selector1,selectorN 将每一个选择器匹配到的元素合并后一起返回 元素集合 下面通过示例 2-5 来介绍各种基本选择器在页面中使用的方法。 示例 2-5 使用 jQuery 基本选择器选择元素 (1)功能描述 一个页面包含两个
标记,其中一个用于设置 ID 属性,另一个用于设置 Class 属 性 ;我们再增加一个 标记,全部元素初始值均为隐藏,然后通过 jQuery 基本选择器显 示相应的页面标记。 (2)实现代码 新建一个 HTML 文件 2-5.html,加入如代码清单 2-5 所示的代码。 代码清单 2-5 使用 jQuery 基本选择器选择元素 正文.indd 18 2010-12-16 15:15:30 第 2 章 jQuery 选择器   19  使用 jQuery 基本选择器
ID
CLASS
SPAN
(3)页面效果 为了能更清楚地看到每个基本选择器执行后的结果,下面通过表格的方式展示页面效果, 如表 2-2 所示。 表 2-2 页面执行效果 关键代码 功能描述 页面效果 $("#divOne") .css("display","block"); 显示 ID 为 divOne 的页面元素 正文.indd 19 2010-12-16 15:15:30  20   jQuery 权威指南 关键代码 功能描述 页面效果 $(" div span ") .css("display","block");  显示元素名为 span 的页面元素 $(".clsFrame .clsOne") .css("display","block");  显示类别名为 clsOne 的页面元素 $("*") .css("display","block");  显示页面中的所有元素 $("#divOne,span") .css("display","block");  显示 ID 为 divOne 和元素名为 span 的页面元素 2.2.2 层次选择器 层次选择器通过 DOM 元素间的层次关系获取元素,其主要的层次关系包括后代、父子、 相邻、兄弟关系,通过其中某类关系可以方便快捷地定位元素,其详细说明如表 2-3 所示。 表 2-3 层次选择器语法 选择器 功能 返回值 ancestor descendant 根据祖先元素匹配所有的后代元素 元素集合 parent > child 根据父元素匹配所有的子元素 元素集合 prev + next 匹配所有紧接在 prev 元素后的相邻元素 元素集合 prev ~ siblings 匹配 prev 元素之后的所有兄弟元素 元素集合 说明 ancestor descendant 与 parent > child 所选择的元素集合是不同的,前者的层次关 系是祖先与后代,而后者是父子关系 ;另外,prev + next 可以使用 .next() 代替,而 prev ~ siblings 可以使用 nextAll() 代替。 下面通过示例 2-6 来演示各种层次选择器在页面中选择 DOM 元素的方法。 示例 2-6 使用 jQuery 层次选择器选择元素 (1)功能描述 在页面中,设置 4 块
标记,其中在第二块
中,添加 1 个 标记,在该 标记中又新增 1 个 标记,全部元素初始值均为隐藏,然后通过 jQuery 层次选 择器,显示相应的页面标记。 (2)实现代码 新建一个 HTML 文件 2-6.html,加入如代码清单 2-6 所示的代码。 代码清单 2-6 使用 jQuery 层次选择器选择元素 (续)   正文.indd 20 2010-12-16 15:15:31 第 2 章 jQuery 选择器   21  使用 jQuery 层次选择器
Left
Right_1
Right_2
(3)页面效果 代码清单 2-6 执行后的效果如表 2-4 所示。 正文.indd 21 2010-12-16 15:15:31  22   jQuery 权威指南 表 2-4 页面执行效果 关键代码 功能描述 页面效果 $("div span") .css("display","block");  显示
中所有的 标记 $("div>span") .css("display","block")  显示
中子 标记 $("#divMid + div") .css("display","block");  显示 ID 为 divMid 元素后的下一个
$("#divMid ~ div") .css("display","block");   显 示 ID 为 divMid 元 素 后 的 所 有
$("#divMid").siblings("div") .css("display","block");  显示 ID 为 divMid 元素的所有相邻
说明 siblings() 方法与选择器 prev ~ siblings 区别在于,前者获取全部的相邻元素,不分 前后,而后者仅获取标记后面全部相邻元素,不能获取前面部分。 2.2.3 简单过滤选择器 过滤选择器根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头 ;简单过滤选 择器是过滤选择器中使用最广泛的一种,其详细说明如表 2-5 所示。 表 2-5 简单过滤选择器语法 选择器 功能 返回值 first() 或 : first 获取第一个元素 单个元素 last() 或 : last 获取最后一个元素 单个元素 :not(selector) 获取除给定选择器外的所有元素 元素集合 :even 获取所有索引值为偶数的元素,索引号从 0 开始 元素集合 :odd 获取所有索引值为奇数的元素,索引号从 0 开始 元素集合 :eq(index) 获取指定索引值的元素,索引号从 0 开始 单个元素 :gt(index) 获取所有大于给定索引值的元素,索引号从 0 开始 元素集合 :lt(index) 获取所有小于给定索引值的元素,索引号从 0 开始 元素集合 :header 获取所有标题类型的元素,如 h1、h2…… 元素集合 :animated 获取正在执行动画效果的元素 元素集合 下面通过示例 2-7 来介绍如何通过过滤选择器定位 DOM 元素的方法。 示例 2-7 使用 jQuery 基本过滤选择器选择元素 (1)功能描述 在页面中,设置一个

标记用于显示主题,创建
    标记并在其中放置四个
  • , 再创建一个 标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素 改变其类名称,从而突出其被选中的状态。 正文.indd 22 2010-12-16 15:15:31 第 2 章 jQuery 选择器   23  (2)实现代码 新建一个 HTML 文件 2-7.html,加入如代码清单 2-7 所示的代码。 代码清单 2-7 使用 jQuery 基本过滤选择器选择元素 使用 jQuery 基本过滤选择器

    基本过滤选择器

    • Item 0
    • Item 1
    • Item 2
    • Item 3
    Span Move
    (3)页面效果 代码清单 2-7 执行后的效果如表 2-6 所示。 表 2-6 页面执行效果 关键代码 功能描述 页面效果 $("li:first") .addClass("GetFocus");  增加第一个元素的类别 $("li:last") .addClass("GetFocus");  增加最后一个元素的类别 $("li:not(.NotClass)") .addClass("GetFocus");  增加去除所有与给定选择器匹配的 元素类别 $("li:even") .addClass("GetFocus");  增加所有索引值为偶数的元素类 别 , 从 0 开始计数 $("li:odd") .addClass("GetFocus");  增加所有索引值为奇数的元素类 别 , 从 0 开始计数 $("li:eq(1)") .addClass("GetFocus");  增加一个给定索引值的元素类别 , 从 0 开始计数 正文.indd 24 2010-12-16 15:15:32 第 2 章 jQuery 选择器   25  关键代码 功能描述 页面效果 $("li:gt(1)") .addClass("GetFocus");  增加所有大于给定索引值的元素类 别 , 从 0 开始计数 $("li:lt(4)") .addClass("GetFocus");  增加所有小于给定索引值的元素类 别 , 从 0 开始计数 $(":header") .addClass("GetFocus");  增加标题类元素类别 $("#spnMove:animated") .addClass("GetFocus");  增加动画效果元素类别 说明 选择器 animated 在捕捉动画效果元素时,先自定义一个动画效果函数 animateIt(), 然后执行该函数,选择器才能获取动画效果元素,并增加其类别。 2.2.4 内容过滤选择器 内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可 以模糊或绝对匹配进行元素定位,其详细说明如表 2-7 所示。 表 2-7 内容过滤选择器语法 选择器 功能 返回值 :contains(text) 获取包含给定文本的元素 元素集合 :empty 获取所有不包含子元素或者文本的空元素 元素集合 :has(selector) 获取含有选择器所匹配的元素的元素 元素集合 :parent 获取含有子元素或者文本的元素 元素集合 下面通过示例 2-8 来展示在页面中如何通过内容过虑选择器查找 DOM 元素的方法。 示例 2-8  使用 jQuery 内容过滤选择器选择元素 (1)功能描述 在页面中,根据需要创建四个
    标记,并在其中的
    中新建一个 标记, 其余
    标记中输入内容(或为空),通过内容过滤选择器获取指定的元素,并显示在页 面中。 (2)实现代码 新建一个 HTML 文件 2-8.html,加入如代码清单 2-8 所示的代码。 代码清单 2-8 使用 jQuery 内容过滤选择器选择元素 (续)   正文.indd 25 2010-12-16 15:15:32  26   jQuery 权威指南 使用 jQuery 内容过滤选择器
    ABCD
    EFaH
    (3)页面效果 代码清单 2-8 执行后的效果如表 2-8 所示。 表 2-8 页面执行效果 关键代码 功能描述 页面效果 $("div:contains('A')") .css("display","block"); 显示包含给定文本“A”的元素 $("div:empty") .css("display","block"); 显示所有不包含子元素或者文本的空元素 $("div:has(span)") .css("display","block"); 显示含有 标记的元素 $("div:parent") .css("display","block"); 显示含有子元素或者文本的元素 正文.indd 26 2010-12-16 15:15:33 第 2 章 jQuery 选择器   27  说明 在 :contains(text) 内容过滤选择器中,如果是查找字母,则有大小写的区别。 2.2.5 可见性过滤选择器 可见性过滤选择器根据元素是否可见的特征获取元素,其详细的说明如表 2-9 所示。 表 2-9 可见性过滤选择器语法 选择器 功能 返回值 :hidden 获取所有不可见元素,或者 type 为 hidden 的元素 元素集合 :visible 获取所有的可见元素 元素集合 下面通过示例 2-9 介绍如何使用可见性过虑选择器锁定 DOM 元素的方法。 示例 2-9 使用 jQuery 可见性过滤选择器选择元素 (1)功能描述 在页面中,创建一个
    标记,分别设置标记的 display 属性为“none”和 “block”;然后根据可见性过滤选择器显示页面元素。 (2)实现代码 新建一个 HTML 文件 2-9.html,加入如代码清单 2-9 所示的代码。 代码清单 2-9 使用 jQuery 可见性过滤选择器选择元素 使用 jQuery 可见性过滤选择器 正文.indd 27 2010-12-16 15:15:33  28   jQuery 权威指南 Hidden
    Visible
    (3)页面效果 代码清单 2-9 执行后的效果如表 2-10 所示。 表 2-10 页面执行效果 关键代码 功能描述 页面效果 $("div:visible") .addClass("GetFocus"); 增加所有可见元素类别 $("span:hidden") .show().addClass("GetFocus"); 增加所有不可见元素类别 说明 :hidden 选择器所选择的不仅包括样式为 display:none 所有元素,而且还包括属性 type=“hidden”和样式为 visibility:hidden 的所有元素。 2.2.6 属性过滤选择器 属性过滤选择器根据元素的某个属性获取元素,如 ID 号或匹配属性值的内容,并以“[” 号开始、以“]”号结束。其详细的说明如表 2-11 所示。 表 2-11 属性过滤选择器语法 选择器 功能 返回值 [attribute] 获取包含给定属性的元素 元素集合 [attribute=value] 获取等于给定的属性是某个特定值的元素 元素集合 [attribute!=value] 获取不等于给定的属性是某个特定值的元素 元素集合 [attribute^=value] 获取给定的属性是以某些值开始的元素 元素集合 [attribute$=value] 获取给定的属性是以某些值结尾的元素 元素集合 [attribute*=value] 获取给定的属性是以包含某些值的元素 元素集合 [selector1][selector2][selectorN] 获取满足多个条件的复合属性的元素 元素集合 下面通过示例 2-10 介绍使用属性过滤选择器获取 DOM 元素的方法。 示例 2-10 使用 jQuery 属性过滤选择器选择元素 (1)功能描述 在页面中,增加四个
    标记,并设置不同的 ID 和 Title 属性值,然后通过属性过滤选 择器获取所指定的元素集合,并显示在页面中。 (2)实现代码 新建一个 HTML 文件 2-10.html,加入如代码清单 2-10 所示的代码。 正文.indd 28 2010-12-16 15:15:33 第 2 章 jQuery 选择器   29  代码清单 2-10 使用 jQuery 属性过滤选择器选择元素 使用 jQuery 属性过滤选择器
    ID
    Title A
    ID
    Title AB
    Title ABC
    (3)页面效果 代码清单 2-10 执行后的效果如表 2-12 所示。 正文.indd 29 2010-12-16 15:15:33  30   jQuery 权威指南 表 2-12 页面执行效果 关键代码 功能描述 页面效果 $("div[id]") .show(3000);  显示所有含有 id 属性的元素 $("div[title='A']") .show(3000);  显示所有属性 title 的值是 "A" 的元素 $("div[title!='A']") .show(3000);  显示所有属性 title 的值不是 "A" 的元素 $("div[title^='A']") .show(3000);  显示所有属性 title 的值以 "A" 开始的元素 $("div[title$='C']") .show(3000);  显示所有属性 title 的值以 "C" 结束的元素 $("div[title*='B']") .show(3000);  显示所有属性 title 的值中含有 "B" 的元素 $("div[id='divAB'][title*='B']") .show(3000);  显示所有属性 title 的值中含有 "B"  且属性 id 的值是 "divAB" 的元素 说明 show() 是 jQuery 库中的一个显示元素函数,括号中的参数表示显示时间,单位是 毫秒,show(3000) 表示用 3 000 毫秒显示。 2.2.7 子元素过滤选择器 在页面开发过程中,常常遇到突出指定某行的需求。虽然使用基本过滤选择器 :eq(index) 可实现单个表格的显示,但不能满足大量数据和多个表格的选择需求。为了实现这样的功能, jQuery 中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。其详细的说明 如表 2-13 所示。 表 2-13 子元素过滤选择器语法 选择器 功能 返回值 :nth-child(eq|even|odd|index)  获取每个父元素下的特定位置元素,索引号从 1 开始 元素集合 :first-child  获取每个父元素下的第一个子元素 元素集合 :last-child  获取每个父元素下的最后一个子元素 元素集合 :only-child  获取每个父元素下的仅有一个子元素 元素集合 下面通过示例 2-11 来演示使用子元素过滤选择器获取元素的过程。 示例 2-11 使用 jQuery 子元素过滤选择器选择元素 (1)功能描述 在页面中,创建三个
      标记,前两个标记中设置四个
    • ,后一个标记中设置一个
    • ,通过子元素过滤选择器获取指定的页面元素,并改变其选择后的状态,显示在页面中。 正文.indd 30 2010-12-16 15:15:34 第 2 章 jQuery 选择器   31  (2)实现代码 新建一个 HTML 文件 2-11.html,加入如代码清单 2-11 所示的代码。 代码清单 2-11 使用 jQuery 子元素过滤选择器选择元素 使用 jQuery 子元素过滤选择器
      • Item 1-0
      • Item 1-1
      • Item 1-2
      • Item 1-3
      • Item 2-0
      • Item 2-1
      • Item 2-2
      • Item 2-3
      正文.indd 31 2010-12-16 15:15:34  32   jQuery 权威指南
      • Item 3-0
      (3)页面效果 代码清单 2-11 执行后的效果如表 2-14 所示。 表 2-14 页面执行效果 关键代码 功能描述 页面效果 $("li:nth-child(2)") .addClass("GetFocus"); 增加每个父元素下的第两个子元素类别 $("li:first-child") .addClass("GetFocus"); 增加每个父元素下的第一个子元素类别 $("li:last-child") .addClass("GetFocus"); 增加每个父元素下的最后一个子元素类别 $("li:only-child") .addClass("GetFocus"); 增加每个父元素下的仅有一个子元素类别 2.2.8 表单对象属性过滤选择器 表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素,如 enabled、 disabled、checked、selected 属性。其详细的说明如表 2-15 所示。 表 2-15 表单对象属性过滤选择器语法 选择器 功能 返回值 :enabled 获取表单中所有属性为可用的元素 元素集合 :disabled 获取表单中所有属性为不可用的元素 元素集合 :checked 获取表单中所有被选中的元素 元素集合 :selected 获取表单中所有被选中 option 的元素 元素集合 下面通过示例 2-12 来介绍通过表单对象属性过滤选择器获取表单对象的方法。 示例 2-12 通过表单对象属性过滤选择器获取表单对象 (1)功能描述 在一个表单中,创建两个文本框对象,一个属性设置为 enabled,另一个属性设置为 disabled ;再放置两个复选框对象,一个设置成被选中状态,另一个设置成未选中状态 ;同时 新建一个列表框对象,并选中其中两项,通过表单对象属性过滤选择器获取某指定元素,并 正文.indd 32 2010-12-16 15:15:34 第 2 章 jQuery 选择器   33  处理该元素。 (2)实现代码 新建一个 HTML 文件 2-12.html,加入如代码清单 2-12 所示的代码。 代码清单 2-12 使用 jQuery 表单对象属性过滤选择器选择元素 使用 jQuery 表单对象属性过滤选择器
      正文.indd 33 2010-12-16 15:15:35  34   jQuery 权威指南
      选中 未选中
      (3)页面效果 代码清单 2-12 执行后的效果如表 2-16 所示。 表 2-16 页面执行效果 关键代码 功能描述 页面效果 $("#form1 input:enabled") .addClass("GetFocus"); 增加表单中所有属性为可用的元素类别 $("#form1 input:disabled") .addClass("GetFocus"); 增加表单中所有属性为不可用的元素类别 $("#form1 input:checked") .addClass("GetFocus"); 增加表单中所有被选中的元素类别 $("#Span2").html(" 选中项是 :"+ $("select option:selected").text()); 显示表单中所有被选中 option 的元素内容 2.2.9 表单选择器 无论是提交还是传递数据,表单在页面中的作用是显而易见的。通过表单进行数据的提 交或处理,在前端页面开发中占据重要地位。因此,为了使用户能更加方便地、高效地使用 表单,在 jQuery 选择器中引入表单选择器,该选择器专为表单量身打造,通过它可以在页面 中快速定位某表单对象。其详细的说明如表 2-17 所示。 下面通过示例 2-13 来介绍使用表单选择器直接获取表单对象的方法。 正文.indd 34 2010-12-16 15:15:35 第 2 章 jQuery 选择器   35  表 2-17 表单选择器语法 选择器 功能 返回值 :input 获取所有 input、textarea、select 元素集合 :text 获取所有单行文本框 元素集合 :password 获取所有密码框 元素集合 :radio 获取所有单选按钮 元素集合 :checkbox 获取所有复选框 元素集合 :submit 获取所有提交按钮 元素集合 :image 获取所有图像域 元素集合 :reset 获取所有重置按钮 元素集合 :button 获取所有按钮 元素集合 :file 获取所有文件域 元素集合 示例 2-13 使用 jQuery 表单过滤选择器获取元素 (1)功能描述 在一个页面表单中,创建 11 种常用的表单对象,根据表单选择器,先显示出所有表单对 象的总量,然后显示各种不同类型的表单对象。 (2)实现代码 新建一个 HTML 文件 2-13.html,加入如代码清单 2-13 所示的代码。 代码清单 2-13 使用 jQuery 表单过滤选择器获取元素 使用 jQuery 表单过滤选择器
      Radio CheckBox 正文.indd 36 2010-12-16 15:15:35 第 2 章 jQuery 选择器   37 
      (3)页面效果 代码清单 2-13 执行后的效果如表 2-18 所示。 表 2-18 页面执行效果 关键代码 功能描述 页面效果 $("#form1 div").html(" 表 单 共 找 出 Input 类型元素 :"+ $("#form1 :input").length); 显示 Input 类型元素的总数量 $("#form1 :text").show(3000); 显示所有文本框对象 $("#form1 :password").show(3000); 显示所有密码框对象 $("#form1 :radio").show(3000); 显示所有单选按钮对象 $("#form1 :checkbox").show(3000); 显示所有复选框对象 $("#form1 :submit").show(3000); 显示所有提交按钮对象 $("#form1 :image").show(3000); 显示所有图片域对象 $("#form1 :reset").show(3000); 显示所有重置按钮对象 $("#form1 :button").show(3000); 显示所有按钮对象 $("#form1 :file").show(3000); 显示所有文件域对象 2.3 综合案例分析—导航条在项目中的应用 2.3.1 需求分析 本案例的需求主要有以下两点 : 1)在页面中创建一个导航条,单击标题时,可以伸缩导航条的内容,同时,标题中的提 示图片也随之改变。 2)单击“简化”链接时,隐藏指定的内容,并将“简化”字样改变成“更多”,单击 “更多”链接时,返回初始状态,并改变指定显示元素的背景色。 正文.indd 37 2010-12-16 15:15:36  38   jQuery 权威指南 2.3.2 效果界面 案例实现的界面效果如图 2-4、图 2-5 所示。 图 2-4 单击导航条标题前后的界面 图 2-5 单击超级链接“简化”和“更多”后的界面 2.3.3 功能实现 在项目中,新建一个 HTML 文件 htmNav.html,加入如代码清单 2-14 所示的代码。 代码清单 2-14 导航条在项目中的应用 导航条在项目中的应用

      图书分类

      2.3.4 代码分析 在页面代码中,首先通过如下代码 : $(".clsContent").css("display","none"); 获取类名称为“clsContent”的元素集合,并实现其内容的显示或隐藏。与此同时,通过下面 代码变换图片 : $(".clsHead span img").attr("src","Images/a1.gif"); 其中,“.clsHead span img”表示获取类型 clsHead 中 下的 标记,即图片元素 ; attr(key,value) 是 jQuery 中一个设置元素属性的函数,其功能是为所匹配的元素设置属性值, key 是属性名称,value 是属性值或内容。因此,此行代码的功能是,获取图片元素并改变其 图片来源。 为了能够实现单击标题后内容可以伸缩的功能,首先通过如下代码,检测当前内容的隐 正文.indd 40 2010-12-16 15:15:37 第 2 章 jQuery 选择器   41  藏或显示状态 : if($(".clsContent").is(":visible")) 其中“$(".clsContent")”获取内容元素,“is”是判断,“:visible”表示是否可见,此行代码用 于判断内容元素是否可见,它返回一个布尔值,如果为 true,则执行 if 后面的语句块,否则执 行 else 后面的语句块。 在超级链接单击事件中,通过下面的代码检测单击的是“简化”还是“更多”字样。 if($(".clsBot > a").text()==" 简化 ") 其中“$(".clsBot > a")”获取超级链接元素,text() 是 jQuery 中一个获取元素内容的函数。此 行代码的意思为,判断超级链接元素的内容是否为“简化”字样,然后根据检测结果,执行 不同的语句块。 在代码中,通过如下的代码实现指定内容的隐藏 : $("ul li:gt(4):not(:last)").hide(); 其中“ul li”获取元素,“:gt(4)”和“:not(:last)”分别为两个并列的过滤选择条件,前者表示 Index 号大于 4,后者表示不是最后一个元素,二者组合成一个过滤条件,即选 Index 号大于 4 并且不是最后一个的元素集合 ;hide() 是 jQuery 中一个隐藏元素的函数。此行代码的意思为, 将通过过滤选择器获取的元素隐藏。 2.4 本章小结 选择器是 jQuery 的核心。本章通过将实例与理论相结合,从选择器的优势和类别入手, 详细介绍了 jQuery 中的选择器语法和使用技巧,最后通过一个简单通用导航条的功能开发, 进一步巩固前面章节所学的知识,并为第 3 章的深入学习创造条件。 正文.indd 41 2010-12-16 15:15:37 第 3 章 jQuery 操作 DOM 本章内容 DOM 基础 访问元素 创建节点元素 插入节点 复制节点 替换节点 包裹节点 遍历元素 删除元素 综合案例分析—数据删除和图片预览在项目中的应用 本章小结 正文.indd 42 2010-12-16 15:15:37 第 3 章 jQuery 操作 DOM   43  DOM(Document Object Model,文档对象模型)为文档提供了一种结构化表示方法,通 过该方法可以改变文档的内容和展示形式。在实际运用中,DOM 更像是桥梁,通过它可以实 现跨平台、跨语言的标准访问。在本章中,我们将详细介绍使用 jQuery 如何操作或控制 DOM 中的各种元素或对象。 3.1 DOM 基础 与 DOM 模型密不可分的是 JavaScript 脚本技术,DOM 在客户端的应用也是基于该技 术,通过该技术我们可以很方便地访问、检索、操作文档中的任何一个元素。因此,学好 JavaScript 脚本技术,是掌握 DOM 对象的一个重要条件。 单词 Document 即文档,当我们创建一个页面并加载到 Web 浏览器时,DOM 模型则根据 该页面的内容创建了一个文档文件 ;单词 Object 即对象,是指具有独立特性的一组数据集合, 例如,我们把新建的页面文档称之为文档对象,与对象相关联的特征称之为对象属性,访问 对象的函数称之为对象方法 ;单词“Model”即模型,在页面文档中,通过树状模型展示页面 的元素和内容,其展示的方式则是通过节点(node)来实现的。下面通过示例 3-1 加以说明。 示例 3-1 创建一个 DOM 页面文档 新建一个 HTML 页面 3-1.html,加入如代码清单 3-1 所示的代码,便完成了一个 DOM 页 面文档的创建。 代码清单 3-1 创建一个 DOM 页面文档 DOM 树状文档
      Td1
      Td2
      Div

      P

      Span
      正文.indd 43 2010-12-16 15:15:38  44   jQuery 权威指南
      • Li1
      • Li2
      页面执行后的效果如图 3-1 所示。 图 3-1 DOM 树状页面效果 根据上述页面文档创建出的 DOM 树结构如图 3-2 所示。 图 3-2 DOM 树状模型 3.2 访问元素 在访问页面时,需要与页面中的元素进行交互式的操作。在操作中,元素的访问是最频 正文.indd 44 2010-12-16 15:15:38 第 3 章 jQuery 操作 DOM   45  繁、最常用的,主要包括对元素属性、内容、值、CSS 的操作。下面通过实例详细介绍这些 操作的使用方法和技巧。 3.2.1 元素属性操作 在 jQuery 中,可以对元素的属性执行获取、设置、删除的操作,通过 attr() 方法可以对元 素属性执行获取和设置操作,而 removeAttr() 方法则可以轻松删除某一指定的属性。 1. 获取元素的属性 获取元素属性的语法格式如下 : attr(name) 其中,参数 name 表示属性的名称。示例 3-2 将介绍如何通过调用 attr() 方法,以元素属 性名称为参数的方式,来获取元素的属性的过程。 示例 3-2 通过 attr(name) 方法获取元素的属性 (1)功能描述 在一个页面中,创建一个 标记,通过 jQuery 中的 attr() 方法获取标记的 src 和 title 属性值,并显示在页面中。 (2)实现代码 新建一个 HTML 文件 3-2.html, 加入如代码清单 3-2 所示的代码。 代码清单 3-2 获取元素的属性 获取元素的属性
      (3)页面效果 代码执行后的效果如图 3-3 所示。 图 3-3 获取元素的属性 2. 设置元素的属性 在页面中,attr() 方法不仅可以获取元素的属性值,还可以设置元素的属性,其设置属性 语法格式如下所示 : attr(key, value) 其中,参数 key 表示属性的名称,value 表示属性的值。如果要设置多个属性,也可以通 过 attr() 方法实现,其语法格式如下所示 : attr({key0:value0, key1:value1}) 下面将通过示例 3-3 来看看如何通过 attr(name,value) 的方式设置元素的属性。 示例 3-3 设置元素的属性 ( 一 ) (1)功能描述 在页面中,创建一个 标记,通过 jQuery 中的 attr() 方法,在页面加载时,设置该 标记的 img 和 title 属性值,并显示在页面中。 正文.indd 46 2010-12-16 15:15:38 第 3 章 jQuery 操作 DOM   47  (2)实现代码 新建一个 HTML 文件 3-3.html,加入如代码清单 3-3 所示的代码。 代码清单 3-3 设置元素的属性 设置元素的属性 正在加载图片 ... (3)页面效果 代码执行后的效果如图 3-4 所示。 另外,attr() 方法还可以绑定一个 function() 函数,通过该函数返回的值作为元素的属性值, 其语法格式如下所示 : attr(key, function(index)) 其中,参数 index 为当前元素的索引号,整个函数返回一个字符串作为元素的属性值。 下面我们将通过示例 3-4 介绍在方法 attr() 中,通过 function 返回一个随机数作为该方法 的参数,来设置元素的属性。 正文.indd 47 2010-12-16 15:15:38  48   jQuery 权威指南 图 3-4 设置元素的属性 示例 3-4 设置元素的属性(二) (1)功能描述 在页面中,通过 function() 随机函数返回一个随机数字,依据该数字组成一个字符串作为 标记 属性 src 的值,由于是随机数字,因此每次获取的 src 属性值都不一样,从而实现 在页面中随机展示图片的效果。 (2)实现代码 新建一个 HTML 文件 3-4.html,加入如代码清单 3-4 所示的代码。 代码清单 3-4 设置元素的属性 ( 二 ) 设置元素的属性 ( 二 ) (3)页面效果 代码执行后的效果如图 3-5 所示。 图 3-5 设置元素的属性 ( 二 ) 3. 删除元素的属性 jQuery 中通过 attr() 方法设置元素的属性后,使用 removeAttr() 方法可以将元素的属性删 除,其使用的语法格式为 : removeAttr(name) 其中,参数 name 为元素属性的名称。 例如,可以通过如下的代码删除标记 中的 src 属性 : $("img").removeAttr("src"); 3.2.2 元素内容操作 在 jQuery 中,操作元素内容的方法包括 html() 和 text()。前者与 JavaScript 中的 innerHTML 属性类似,即获取或设置元素的 HMTL 内容 ;后者类似于 JavaScript 中的 innerText 属性,即获 取或设置元素的文本内容。二者的格式与功能的区别如表 3-1 所示。 正文.indd 49 2010-12-16 15:15:39  50   jQuery 权威指南 表 3-1 html() 和 text() 方法的区别 语法格式 参数说明 功能描述 html() 无参数 用于获取元素的 HTML 内容 html(val) val 参数为元素的 HTML 内容 用于设置元素的 HTML 内容 text() 无参数 用于获取元素的文本内容 text(val) val 参数为元素的文本内容 用于设置元素的文本内容 说明 html() 方法仅支持 XHTML 的文档,不能用于 XML 文档,而 text() 则既支持 HTML 文档,也支持 XML 文档。 示例 3-5 讲解了如何通过调用 html() 方法,以带参数或不带参数的方式,来设置或获取元 素的内容。 示例 3-5 设置或获取元素的内容 (1)功能描述 在页面中,用 html() 和 text() 方法获取 div 标记中的内容,并将内容分别作为 html(val) 和 text(val) 的参数,分别设置元素的内容,并将结果显示在页面中。 (2)实现代码 新建一个 HTML 文件 3-5.html,加入如代码清单 3-5 所示的代码。 代码清单 3-5 设置或获取元素的内容 获取或设置元素的内容 正文.indd 50 2010-12-16 15:15:39 第 3 章 jQuery 操作 DOM   51 
      Write Less Do More
      (3)页面效果 代码执行后的效果如图 3-6 所示。 图 3-6 获取或设置元素的内容 3.2.3 获取或设置元素值 在 jQuery 中,如果要获取元素的值,是通过 val() 方法实现的,其语法格式如下所示 : val(val) 其中,如果不带参数 val,则是获取某元素的值 ;反之,则是将参数 val 的值赋给某元素,即 设置元素的值。该方法常用于表单中获取或设置对象的值。 另外,通过 val() 方法还可以获取 select 标记中的多个选项值,其语法格式如下所示 : val().join(",") 示例 3-6 演示了如何通过调用 val() 方法,设置和获取元素的值。 示例 3-6 设置或获取元素的值 (1)功能描述 在页面中,创建一个可以多选的 select 标记,设置该标记的 change 事件,当按 Ctrl 键选 择多项时,通过 p 标记将获取的选项值显示在页面中 ;另外,创建一个文本框元素,设置该 正文.indd 51 2010-12-16 15:15:39  52   jQuery 权威指南 文本框的 change 和 focus 事件,当文本框获得焦点时,清空文本框中的内容 ;当在文本框输 入字符时,通过另外一个 p 标记将所获取的文本的值即时显示在页面中。 (2)实现代码 新建一个 HTML 文件 3-6.html, 加入如代码清单 3-6 所示的代码。 代码清单 3-6 设置或获取元素的值 获取或设置元素的值
      正文.indd 52 2010-12-16 15:15:40 第 3 章 jQuery 操作 DOM   53 

      (3)页面效果 代码执行后的效果如图 3-7 所示。 图 3-7 获取或设置元素的值 注意 在 val(val)方法中,如果有参数,其参数还可以是数组的形式,即 val(array), 其作用是设置元素被选中。因此 $(":radio").val(["radio2", "radio3"]) 此句代码的意思为 : ID 号 为 radio2 和 radio3 的单选框被选中。 3.2.4 元素样式操作 在页面中,元素样式的操作包含 :直接设置样式、增加 CSS 类别、类别切换、删除类别 几部分。下面通过示例介绍其使用的语法和方法。 1. 直接设置元素样式值 在 jQuery 中,可以通过 css() 方法为某个指定的元素设置样式值,其语法格式如下所示 : css(name, value) 其中 name 为样式名称,value 为样式的值。 示例 3-7 演示了如何调用 css(name,value) 方法,直接设置元素的值。 正文.indd 53 2010-12-16 15:15:40  54   jQuery 权威指南 示例 3-7 直接设置元素样式值 (1)功能说明 在页面中,创建一个 p 标记,单击该元素时,其中的文字加粗、斜体及增加背景色。 (2)实现代码 新建一个 HTML 文件 3-7.html, 加入如代码清单 3-7 所示的代码。 代码清单 3-7 直接设置元素样式的值 直接设置元素样式值

      Write Less Do More

      (3)页面效果 代码执行后的效果如图 3-8 所示。 2. 增加 CSS 类别 通过 addClass() 方法增加元素类别的名称,其语法格式如下 : addClass(class) 其中,参数 class 为类别的名称,也可以增加多个类别的名称,只需要用空格将其隔开即可, 其语法格式为 : addClass(class0 class1 ...) 正文.indd 54 2010-12-16 15:15:40 第 3 章 jQuery 操作 DOM   55  图 3-8 直接设置元素样式值 示例 3-8 演示了如何通过调用 addClass(class0) 为页面中的元素增加 CSS 类别。 示例 3-8 增加 CSS 类别 (1)功能描述 在页面中,设置两个样式类 cls1 和 cls2,当单击页面中 p 元素时,增加这两个样式类别, 并将改变后的效果显示在页面中。 (2)实现代码 新建一个 HTML 文件 3-8.html, 加入如代码清单 3-8 所示的代码。 代码清单 3-8 增加元素 CSS 类别 增加 CSS 类别

      Write Less Do More

      (3)页面效果 代码执行后的效果如图 3-9 所示。 图 3-9 增加 CSS 类别 注意 使用 addClass() 方法仅是追加样式类别,即它还保存原有的类别,例如,原有 标 记 为

      , 执 行 代 码 $("p").addClass("cls1 cls2") 后, 其 最 后 元 素 类 别 为

      ,仍然保留原有类别 cls0,仅是新增了类别 cls1 和 cls2。 3. 类别切换 通过 toggleClass() 方法切换不同的元素类别,其语法格式如下 : toggleClass(class) 其中参数 class 为类别名称,其功能是当元素中含有名称为 class 的 CSS 类别时,删除该类别, 否则增加一个该名称的 CSS 类别。 示例 3-9 演示了如何通过调用 toggleClass() 方法单击元素时,切换元素 CSS 的类别。 正文.indd 56 2010-12-16 15:15:40 第 3 章 jQuery 操作 DOM   57  示例 3-9 类别切换 (1)功能描述 在页面中,创建一个图片标记,通过 toggleClass() 方法实现对该标记中图片的切换显示。 (2)实现代码 新建一个 HTML 文件 3-9.html, 加入如代码清单 3-9 所示的代码。 代码清单 3-9 切换 CSS 的类别 类别切换 (3)页面效果 代码执行后的效果如图 3-10 所示。 4. 删除类别 与增加 CSS 类别的 addClass() 方法相对应,removeClass() 方法则用于删除类别,其语法 格式如下 : removeClass([class]) 其中,参数 class 为类别名称,该名称是可选项,当选该名称时,则删除名称是 class 的类别, 有多个类别时用空格隔开。如果不选名称,则删除元素中的所有类别。 如果要删除 p 标记是 cls0 的类别,可以使用如下的代码 : $("p").removeClass("cls0"); 正文.indd 57 2010-12-16 15:15:40  58   jQuery 权威指南 图 3-10 类别切换 注意 toggleClass() 方法可以实现类别间的切换,如在示例 3-9 中,单击图片后,图片样 式发生变化,再次单击时,又返回单击前的样式,而 css() 或 addClass() 方法仅是增加新的元 素样式,并不能实现类别的切换功能。 如果要删除 p 标记是 cls0 和 cls1 的类别,则可以使用如下的代码 : $("p").removeClass("cls0 cls1"); 如果要删除 p 标记的全部类别,则可以使用如下的代码 : $("p").removeClass(); 3.3 创建节点元素 在本章开始时,我们讲过整个页面是一个 DOM 模型,页面中的各元素通过模型的节点相 互关联形成树状,因此,如果要在页面中增加某个元素,只需要找到元素的上级节点,通过 函数 $(html) 完成元素的创建后,增加到该节点中。 函数 $() 用于动态创建页面元素,其语法格式如下 : $(html) 其中,参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串,即如果要在页面中动态 创建一个 div 标记,并设置其内容和属性,可以加入如下代码 : var $div = $("

      Write Less Do More
      "); $("body").append($div); 执行上述代码后,将在页面文档 body 中创建一个 div 标记,其内容为“Write Less Do More”,属性 title 的值为“jQuery 理念”。 正文.indd 58 2010-12-16 15:15:41 第 3 章 jQuery 操作 DOM   59  示例 3-10 介绍了如何通过函数 $() 将页面元素动态增加到指定节点中。 示例 3-10 动态创建节点元素 (1)功能描述 在页面中,分别设置左右两个部分,左边部分设置需要创建的元素对应的参数,如元素 名、内容等,当用户设置完成后,单击“创建”按钮,则在页面的右边即时显示创建的元素。 (2)实现代码 新建一个 HTML 文件 3-10.html, 加入如代码清单 3-10 所示的代码。 代码清单 3-10 动态创建节点元素 动态创建节点元素

      • 元素名 :
      • 内容为 :
      • 属性名 :
      • 属性值 :
      (3)页面效果 代码执行后的效果如图 3-11 所示。 3.4 插入节点 从第 3.3 节中我们知道,在页面中动态创建元素需要执行节点的插入或追加操作。而在 jQuery 中,有多种方法可以实现该功能,append() 方法仅是其中之一,按照插入元素的顺序来 分,可以分为内部和外部两种插入方法。下面将分别对这些方法进行详细介绍。 3.4.1 内部插入节点方法 内部插入节点的方法如表 3-2 所示。 正文.indd 60 2010-12-16 15:15:41 第 3 章 jQuery 操作 DOM   61  图 3-11 动态创建节点元素 注意 函数 $(html) 只完成 DOM 元素创建,加入到页面还需要通过元素节点的插入或 追加操作 ;同时,在创建 DOM 元素时,要注意字符标记是否完全闭合,否则达不到预期 效果。 表 3-2 内部插入节点 语法格式 参数说明 功能描述 append(content)  content 表示追加到目标中的内容  向所选择的元素内部插入内容 append(function(index, html))  通过 function 函数返回追加到目标中 的内容  向所选择的元素内部插入 function 函 数所返回的内容 appendTo(content)  content 表示被追加的内容  把所选择的元素追加到另一个指定的 元素集合中 prepend(content)  content 表示插入目标元素内部前面的 内容  向每个所选择的元素内部前置内容 prepend(function(index, html))  通过 function 函数返回插入目标元素 内部前面的内容  向所选择的元素内部前置 function 函 数所返回的内容 prependTo(content)  content 表示用于选择元素的 jQuery 表 达式  将所选择的元素前置到另一个指定的 元素集合中 下面结合示例介绍其中几个最新的节点插入方法。 1. append(function(index, html)) 该方法是版本 1.4 中新增的,其功能是将一个 function 函数作为 append 方法的参数,该 函数的功能必须返回一个字符串,作为 append 方法插入的内容,其中 index 参数为对象在这 个集合中的索引值,html 参数为该对象原有的 html 值。 示例 3-11 演示了如何通过调用 append() 方法,以 function 返回的字符串作为参数,插入 节点的过程。 正文.indd 61 2010-12-16 15:15:41  62   jQuery 权威指南 示例 3-11 插入节点(一) (1)功能说明 在页面中,通过一个 funtion 函数返回一段字符串,并将该字符串插入指定的 div 标记元 素内容中。 (2)实现代码 新建一个 HTML 文件 3-11.html, 加入如代码清单 3-11 所示的代码。 代码清单 3-11 插入元素节点 动态插入节点方法
      jQuery
      (3)页面效果 代码执行后的效果如图 3-12 所示。 2. appendTo(content) 该方法用于将一个元素插入另一个指定的元素内容中,即如果要将 span 标记插入 div 标 记中,则执行下列代码 : $("span").appentTo($("div")); 即把 appentTo 方法前部分的内容插入其后部分的内容中。 正文.indd 62 2010-12-16 15:15:41 第 3 章 jQuery 操作 DOM   63  图 3-12 插入节点(一) 示例 3-12 演示了调用 appentTo() 方法,将一个元素标记插入另一个标记中的过程。 示例 3-12 插入节点(二) (1)功能描述 在一个页面中,创建一个 img 和两个 span 标记,通过 appentTo() 方法将 img 标记插入 span 标记中。 (2)实现代码 新建一个 HTML 文件 3-12.html, 加入如代码清单 3-12 所示的代码。 代码清单 3-12 将一个元素的内容动态插入另一个元素中 动态插入节点方法 (3)页面效果 代码执行后的效果如图 3-13 所示。 图 3-13 插入节点 ( 二 ) 3.4.2 外部插入节点方法 外部插入节点的方法如表 3-3 所示。 表 3-3 外部插入节点 语法格式 参数说明 功能描述 after(content)  content 表示插入目标元素外部后面的内容  向所选择的元素外部后面插入内容 after(function)  通过 function 函数返回插入目标外部后面 的内容  向所选择的元素外部后面插入 function 函 数所返回的内容 before(content)  content 表示插入目标元素外部前面的内容  向所选择的元素外部前面插入内容 before(function)  通过 function 函数返回插入目标外部前面 的内容  向所选择的元素外部前面插入 function 函 数所返回的内容 insertAfter(content)  content 表示插入目标元素外部后面的 内容  将所选择的元素插入另一个指定的元素外 部后面 insertBefore(content)  content 表示插入目标元素外部前面的 内容  将所选择的元素插入另一个指定的元素外 部前面 正文.indd 64 2010-12-16 15:15:42 第 3 章 jQuery 操作 DOM   65  同样,下面通过示例介绍其中几个节点插入方法的使用技巧。 after(function) 该方法也是 jQuery1.4 中新增的方法,其 function() 参数将返回插入元素外部后面部分的 内容。示例 3-13 演示了调用 after() 方法,以 function 的返回值为参数,在指定元素的外部插 入一个节点的过程。 示例 3-13 外部插入节点 (1)功能说明 在页面中,创建一个 span 标记,然后通过 function 函数返回另外一个 span 标记,并将该 标插入页面中的 span 标记后。 (2)实现代码 新建一个 HTML 文件 3-13.html, 加入如代码清单 3-13 所示的代码。 代码清单 3-13 动态插入 function 函数返回值至元素节点 动态插入节点方法 jQuery (3)页面效果 代码执行后的效果如图 3-14 所示。 正文.indd 65 2010-12-16 15:15:42  66   jQuery 权威指南 图 3-14  外部插入节点 3.5 复制节点 在页面中,有时需要将某个元素节点复制到另外一个节点后,如购物网站中购物车的 设计。在传统的 javaScript 中,需要编写较为复杂的代码,而在 jQuery 中,可以通过方法 clone() 轻松实现,该方法的语法格式为 : clone() 其功能为复制匹配的 DOM 元素并且选中复制成功的元素,该方法仅是复制元素本身,被 复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制, 可以通过方法 clone(true) 实现,其格式为 : clone(true) 其中的参数设置为 true 就可以复制元素的所有事件处理。示例 3-14 很好地展示了调用 clone() 方法,将一个元素标记复制成另一外标记的使用方法。 示例 3-14 复制元素节点 (1)功能描述 在页面中,创建一个 img 标记,显示一幅图片 ;当单击该图片时,在其右侧通过 clone() 方法复制一幅图片。 (2)实现代码 新建一个 HTML 文件 3-14.html, 加入如代码清单 3-14 所示的代码。 正文.indd 66 2010-12-16 15:15:42 第 3 章 jQuery 操作 DOM   67  代码清单 3-14 复制指定元素节点 复制元素节点 (3)页面效果 代码执行后的效果如图 3-15 所示。 图 3-15 复制元素节点 正文.indd 67 2010-12-16 15:15:43  68   jQuery 权威指南 注意 由于本示例中使用的是 clone(true) 方法,因此,当单击被复制的新图片时,由于 它具有原图片的事务处理,因此,将在该图片的右侧出现一幅通过其复制的新图片 ;如果使 用 clone() 方法,那么只有单击原图片才可以复制新的图片元素,新复制的图片元素不具有任 何功能。 3.6 替换节点 在 jQuery 中,如果要替换元素中的节点,可以使用 replaceWith() 和 replaceAll() 这两种方 法,其语法格式分别如下 : replaceWith(content) 该方法的功能是将所有选择的元素替换成指定的 HTML 或 DOM 元素,其中参数 content 为被所选择元素替换的内容。 replaceAll(selector) 该方法的功能是将所有选择的元素替换成指定 selector 的元素,其中参数 selector 为需要 被替换的元素。 示例 3-15 介绍这两种方法在使用上的区别。 示例 3-15 替换元素节点 (1)功能描述 在页面中,创建两个 span 标记,id 号分别为 span1 和 span2,然后,通过 jQuery 中的两 种替换元素的方法,分别替换元素 span1 和 span2。 (2)实现代码 新建一个 HTML 文件 3-15.html, 加入如代码清单 3-15 所示的代码。 代码清单 3-15 替换页面元素内容 替换元素节点 正文.indd 68 2010-12-16 15:15:43 第 3 章 jQuery 操作 DOM   69 

      姓名 :

      邮箱 :

      (3)页面效果 代码执行后的效果如图 3-16 所示。 图 3-16 替换元素节点 注意 replaceWith() 与 replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失。 3.7 包裹节点 在 jQuery 中,不仅可以通过方法替换元素节点,还可以根据需求包裹某个指定的节点,对 节点的包裹也是 DOM 对象操作中很重要的一项,其与包裹节点相关的全部方法如表 3-4 所示。 正文.indd 69 2010-12-16 15:15:43  70   jQuery 权威指南 表 3-4 包裹节点 语法格式 参数说明 功能描述 wrap(html)  html 参数为字符串代码,用于生成元 素并包裹所选元素  把所有选择的元素用其他字符串代码包裹起来 wrap(elem)  elem 参数用于包装所选元素的 DOM 元素  把所有选择的元素用其他 DOM 元素包装起来 wrap(fn)  fn 参数为包裹结构的一个函数  把所有选择的元素用 function 函数返回的代码包裹 起来 unwrap()  无参数  移除所选元素的父元素或包裹标记 wrapAll(html)  html 参数为字符串代码,用于生成元 素并包裹所选元素  把所有选择的元素用单个元素包裹起来 wrapAll(elem)  elem 参数用于包装所选元素的 DOM 元素  把所有选择的元素用单个 DOM 元素包裹起来 wrapInner(html)  html 参数为字符串代码,用于生成元 素并包裹所选元素  把所有选择的元素的子内容 ( 包括文本节点 ) 用字 符串代码包裹起来 wrapInner(elem)  elem 参数用于包装所选元素的 DOM 元素  把所有选择的元素的子内容 ( 包括文本节点 ) 用 DOM 元素包裹起来 wrapInner(fn)  fn 参数为包裹结构的一个函数  把所有选择的元素的子内容 ( 包括文本节点 ) 用 function 函数返回的代码包裹起来 在上述表格中, wrap(html) 与 wrapInner(html) 方法较为常用,前者包裹外部元素,后者包 裹元素内部的文本字符。下面通过示例 3-16 介绍这两种常用方法在页面中包裹目标元素的使 用效果。 示例 3-16 包裹元素节点 (1)功能描述 在页面中放置两个段落 p 标记,并在该标记内分别设置两个 span 标记,通过 wrap() 与 wrapInner() 两种方法,改变标记中的外部元素与内部文本的字体显示方式。 (2)实现代码 新建一个 HTML 文件 3-16.html, 加入如代码清单 3-16 所示的代码。 代码清单 3-16 包裹外部元素和内部文本的方法 包裹元素节点

      最喜爱的体育运动 : 羽毛球

      最爱看哪类型图书 : 网络、技术

      (3)页面效果 代码执行后的效果如图 3-17 所示。 图 3-17 包裹元素节点的页面效果和源码 3.8 遍历元素 在 DOM 元 素 操 作 中, 有 时 需 要 对 同 一 标 记 的 全 部 元 素 进 行 统 一 操 作。 在 传 统 的 JavaScript 中,先获取元素的总长度,然后,以 for 循环语句,递减总长度,访问其中的某个 元素,代码相对复杂 ;而在 jQuery 中,可以直接使用 each() 方法实现元素的遍历。其语法格 式如下 : each(callback) 正文.indd 71 2010-12-16 15:15:43  72   jQuery 权威指南 其中,参数 callback 是一个 function 函数,该函数还可以接受一个形参 index,此形参为遍历 元素的序号(从 0 开始);如果需要访问元素中的属性,可以借助形参 index,配合 this 关键字 来实现元素属性的设置或获取。示例 3-17 演示了调用 each() 方法,遍历全部元素,获取每个 元素属性的过程。 示例 3-17 遍历元素 (1)功能描述 在页面中,设置几幅图片,通过 each() 方法遍历全部的图片,并设置每幅图片的 title 属性。 (2)实现代码 新建一个 HTML 文件 3-17.html, 加入如代码清单 3-17 所示的代码。 代码清单 3-17 遍历元素获取属性 遍历元素

       第 0 幅风景画  第 1 幅风景画  第 2 幅风景画

      正文.indd 72 2010-12-16 15:15:43 第 3 章 jQuery 操作 DOM   73  (3)页面效果 代码执行后的效果如图 3-18 所示。 图 3-18 遍历元素 3.9 删除元素 在 DOM 操作页面时,删除多余或指定的页面元素是非常必要的,jQuery 提供了两种可 以删除元素的方法,即 remove() 和 empty()。严格来说,empty() 方法并非真正意义上的删 除,使用该方法,仅仅可以清空全部的节点或节点所包括的所有后代元素,并非删除节点和 元素。 remove() 方法的语法格式如下 : remove([expr]) 其中参数 expr 为可选项,如果接受参数,则该参数为筛选元素的 jQuery 表达式,通过该表述 式获取指定的元素,并进行删除。 empty () 方法的语法格式如下 : empty() 其功能为清空所选择的页面元素或所有的后代元素。 示例 3-18 说明了调用 remove() 方法,删除某个页面元素的的过程。 示例 3-18 删除元素 (1)功能说明 在页面中,通过 ul 标记展示列表式的数据信息,并设置一个按钮。单击该按钮时,将删 除指定的标记元素。 正文.indd 73 2010-12-16 15:15:44  74   jQuery 权威指南 (2)实现代码 新建一个 HTML 文件 3-18.html, 加入如代码清单 3-18 所示的代码。 代码清单 3-18 删除页面中指定的元素 删除元素
      • 学号
      • 1001
      • 1002
      • 1003
      正文.indd 74 2010-12-16 15:15:44 第 3 章 jQuery 操作 DOM   75  (3)页面效果 代码执行后的效果如图 3-19 所示。 图 3-19 删除元素 注意 在本示例中,删除按钮执行二次删除元素操作,首先是删除 title 等于 t 的元素 ;其 次是删除 li 节点中的第 2 项元素。当学号为“1001”被删除后,第 2 项元素就是“1002”,故 仅留下学号为“1003”。 3.10 综合案例分析—数据删除和图片预览在项目中的应用 3.10.1 需求分析 经分析,该案例的需求如下 : 1)在页面中创建一个表格,用于展示多项数据信息,各行间采用隔行变色的方法展示每 一行的数据。 2)如果选中表格中某行的复选项,并单击表格下面的“删除”按钮,那么将删除其选中 的行 ;选中“全选”复选框后,再次单击“删除”按钮时,将删除表格的全部行数据。 3)如果将鼠标移到表格中某行的小图片上,将在该图片的右下角出现一幅与之相对应的 大图片,用以实现图片预览的效果。 3.10.2 效果界面 页面初始化状态,使用隔行变色展示数据,其效果如图 3-20 所示。 正文.indd 75 2010-12-16 15:15:44  76   jQuery 权威指南 图 3-20 隔行变色展示数据 当选择某行中的“选项”复选框后,那么单击“删除”按钮时,将删除其选中的行数据, 其效果如图 3-21 所示。 图 3-21 删除数据的前后对比 当将鼠标移到“封面”小图片上时,将在该图片的右下角出现的一幅与之相对应的大图 正文.indd 76 2010-12-16 15:15:45 第 3 章 jQuery 操作 DOM   77  片,实现图片预览的效果,其效果如图 3-22 所示。 图 3-22 图片预览的效果 3.10.3 功能实现 在该项目中,新建一个 HTML 文件 ListManager.html, 加入如代码清单 3-19 所示的代码。 代码清单 3-19 数据删除和图片预览在项目中的应用 数据管理
      选项 编号 封面 购书人 性别 购书价
      1001 李小明 35.60 元
      1002 刘明明 37.80 元
      1003 张小星 45.60 元
      正文.indd 79 2010-12-16 15:15:45  80   jQuery 权威指南
      全选
      3.10.4 代码分析 在“全选”复选框单击事件中,有如下的代码 : if (this.checked) {// 如果自己被选中 $("table tr td input[type=checkbox]") .attr("checked", true); } else {// 如果自己没有被选中 $("table tr td input[type=checkbox]") .attr("checked", false); } 由于复选框是开关型按钮,所以首先通过 if 语句检测当前自身的状态,如果当前是被选 中的状态,那么通过下面代码获取表格中的所有复选框,并将它们的属性设置为选中状态。 $("table tr td input[type=checkbox]").attr("checked", true); 反之,将它们的属性设置为未选中状态,代码如下 : $("table tr td input[type=checkbox]").attr("checked", false); 在“删除”按钮单击事件中,有如下代码 : var intL = $("table tr td input:checked :not('#chkAll')").length; // 获取除全选复选框外的所有选中项 if (intL != 0) {// 如果有选中项 $("table tr td input[type=checkbox] :not('#chkAll')") .each(function(index) {// 遍历除全选复选框外的行 if (this.checked) {// 如果选中 $("table tr[id=" + this.value + "]").remove(); // 获取选中的值,并删除该值所在的行 } }) } 正文.indd 80 2010-12-16 15:15:45 第 3 章 jQuery 操作 DOM   81  由于是删除操作,所以首先获取是否有可删除的项目,即通过下面代码获取表格中处于 选中状态总行数。 var intL = $("table tr td input:checked :not('#chkAll')").length; 上行代码中 :not('#chkAll') 表示除掉表格底部的“全选”复选框。如果 intL 变量不为 0, 即有可删除的行,那么遍历除表格底部“全选”复选框外,表格中所有的复选框,代码如下 : $("table tr td input[type=checkbox]:not('#chkAll')") .each(function(index) { // 删除代码 }) 在遍历过程中,再次检测复选框是否被选中,如果选中,获取复选框的值,即 this.value, 然后通过该值与行的 id 值相匹配,如果符合,则删除该行,代码如下 : if (this.checked) {// 如果选中 $("table tr[id=" + this.value+ "]").remove(); // 获取选中的值,并删除该值所在的行 } 值得注意的是 :在实际的项目开发中,如果要删除某行数据,先获取该行数据选中后的 id 号,即 this.value 值,然后将该值通过 Ajax 技术传给后台页面,执行数据库中的删除操作, 即真正实现记录的删除功能,本实例仅是实现页面中行的删除。 在小图片鼠标移动事件中,首先设置提示图片 scr 属性,然后设置该图片与小图片的相 对位置,由于该图片的 display 属性为 none,因此还需要使用 show() 方法显示该图片。其代 码如下 : $("#imgTip") .attr("src", this.src)// 设置提示图片 scr 属性 .css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" })// 设置提示图片的位置 .show(3000);// 显示图片 在鼠标移出事件中,则隐藏该提示图片,代码如下 : $("#imgTip").hide();// 隐藏图片 3.11 本章小结 在页面中,控制元素是 DOM 对象主要的行为,本章通过介绍 jQuery 中大量访问或设置 页面元素的方法,其主要目的是使读者了解如何通过 jQuery 中的方法完全操控页面,编写出 功能更方便、更高效的页面代码,并为下一章节的学习奠定坚实的语法基础。 正文.indd 81 2010-12-16 15:15:45

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ] 2 人已下载

下载文档

相关文档