词条 | jQuery基础教程详解 |
释义 | 基本信息原书名Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques原出版社: Packt Publishing 作者:(美)Karl Swedberg Jonathan Chaffer 译者:李松峰 李炜 丛书名: 图灵程序设计丛书.Web开发系列 出版社:人民邮电出版社 ISBN:9787115181107 出版日期:2009 年4月 开本:16开 页码:298 版次:1-4 编辑推荐全球第一部jQuery著作. Amazon全五星盛誉.. jQuery官方网站推荐... 内容简介本书以通俗易懂的方式介绍了jquery的基本概念,主要包括jquery的选择符、事件、特效、dom操作、ajax、表格操作、表单函数、拖曳与旋转和插件等内容,最后几章以实例操作为主,在前面内容的基础上,提出了常见的客户端实际问题并给出了其解决方案。 本书是一本注重理论与实践结合的基础教程,适合web开发人员阅读和参考。 目录第1章 jquery入门 1 1 jquery能做什么 1 2 jquery为什么如此出色 1 3 第一个jquery文档 1 3 1 下载jquery 1 3 2 设置html文档 1 3 3 编写jquery代码 1 4 小结 第2章 选择符——取得你想要的一切 2 1 dom 2 2 工厂函数$() 2 3 css选择符 2 4 xpath选择符 2 5 自定义选择符 2 6 dom遍历方法 2 7 访问dom元素 2 8 小结 第3章 事件——扣动扳机 3 1 在页面加载后执行任务 3 1 1 代码执行的时机选择 3 1 2 基于一个页面执行多个脚本 3 1 3 缩短代码的简写方式 3 2 简单的事件 3 2 1 简单的样式转换器 3 2 2 简写的事件 3 3 复合事件 3 3 1 显示和隐藏高级特性 3 3 2 突出显示可单击的项 3 3 3 事件的旅程 3 3 4 事件冒泡的副作用 3 4 限制和终止事件 3 4 1 阻止事件冒泡 3 4 2 移除事件处理程序 3 5 模仿用户操作 3 6 小结 第4章 效果——为操作添加艺术性 4 1 修改内联css 4 2 基本的隐藏和显示 4 3 效果和速度 4 4 多重效果 4 4 1 构建具有动画效果的show() 4 4 2 创建一种自定义的动画效果 4 4 3 理解数字的含义 4 4 4 改进自定义动画效果 4 5 并发与排队效果 4 5 1 处理一组元素 4 5 2 处理多组元素 4 6 简单概括 4 7 小结 第5章 dom操作——基于命令改变页面 5 1 操作属性 5 2 插入新元素 5 3 移动元素 5 3 1 标注、编号和链接到上下文 5 3 2 插入脚注 5 4 包装元素 5 5 复制元素 5 5 1 复制的深度 5 5 2 通过复制创建突出引用 5 6 dom操作方法的简单归纳 5 7 小结 第6章 ajax——让网站与时俱进 6 1 基于请求加载数据 6 1 1 追加html 6 1 2 操作javascript对象 6 1 3 加载xml 文档 6 2 选择数据格式 6 3 向服务器传递数据 6 3 1 执行get请求 6 3 2 执行post请求 6 3 3 序列化表单 6 4 关注请求 6 5 ajax和事件 6 5 1 限定事件绑定函数的作用域 6 5 2 利用事件冒泡 6 6 安全限制 6 7 小结 第7章 表格操作 7 1 排序 7 1 1 服务器端排序 7 1 2 javascript排序 7 2 分页 7 2 1 服务器端分页 7 2 2 javascript 分页 7 3 完成的代码 7 4 高级行条纹效果 7 4 1 三色交替模式 7 4 2 三行一组交替 7 5 突出显示行 7 6 工具提示条 7 7 折叠和扩展 7 8 筛选 7 8 1 筛选选项 7 8 2 同其他代码整合 7 9 完成的代码 7 10 小结 第8章 构建功能型表单 8 1 渐进增强的表单设计 8 1 1 图标符号 8 1 2 必填字段的提示信息 8 1 3 根据条件显示的字段 8 2 表单验证 8 2 1 即时反馈 8 2 2 最终检查 8 3 复选框操作 8 4 完成的代码 8 5 字段的占位符文本 8 6 ajax自动完成 8 6 1 服务器端代码 8 6 2 浏览器端脚本 8 6 3 填充搜索字段 8 6 4 键盘导航 8 6 5 自动完成与实时搜索 8 7 完成的代码 8 8 输入掩码 8 8 1 购物车表格结构 8 8 2 拒绝非数字输入 8 9 数字计算 8 9 1 解析和格式化货币值 8 9 2 处理小数位 8 9 3 其他计算 8 10 删除商品 8 11 修改送货信息 8 12 完成的代码 8 13 小结 第9章 滑移和翻转 9 1 标题翻转效果 9 1 1 设置页面 9 1 2 取得新闻源 9 1 3 设置翻转效果 9 1 4 标题翻转函数 9 1 5 悬停时暂停 9 1 6 从不同的域中取得新闻源 9 1 7 附加的内部渐变效果 9 2 图像传送带 9 2 1 设置页面 9 2 2 通过javascript修改样式 9 2 3 通过单击滑移图像 9 2 4 添加滑移效果 9 2 5 显示操作图标 9 3 放大图像 9 3 1 隐藏大幅封面 9 3 2 更有价值的标记 9 3 3 为封面放大添加动画效果 9 4 完成的代码 9 5 小结 第10章 插件 10 1 使用插件 10 2 流行的插件 10 2 1 dimensions 10 2 2 form 10 2 3 interface 10 3 查找插件文档 10 4 开发新插件 10 4 1 添加新的全局函数 10 4 2 添加jquery对象方法 10 4 3 dom遍历方法 10 4 4 添加新的简写方法 10 4 5 维护多事件日志 10 4 6 添加选择符表达式 10 4 7 创建缓动样式 10 4 8 做个好公民 10 5 小结 附录a 在线资源 附录b 开发工具 附录c javascript闭包 译者序说起我与jQuery结缘,还要感谢2006年发生在台湾海峡的地震。2006年12月26日,中国南海台湾附近发生7.2级地震,数分钟后又发生了6.7级地震。受强烈地震影响,中美海缆等多条国际海底通信光缆发生中断,造成附近国家和地区的国际和地区性通信受到严重影响。2007年1月29日,电信网通宣布,经过20多天的抢修,受地震影响中断的国际通信业务已全部恢复。在此期间,中国雅虎在邮箱主页顶部发布了一个由于海缆中断可能会造成邮件收发有问题的通告。当时,通告是在页面加载完成大约1s后,以渐变和动画形式出现在页面顶部的——跟jQuery官方网站首页那个“The quick and dirty”的演示效果很相似。而且,通告显示了大约几秒钟后又以动画形式自动消失,整个页面好像什么都没有发生过一样。这个动画效果深深地吸引了我。以前,我也试着写过像卓越亚马逊网站首页“所有20类商品”按钮的鼠标悬停动画,但使用了几十行代码,如今这个更酷的效果是怎么实现的呢?于是,我怀着强烈的好奇心开始查看它的源代码(这要感谢JavaScript天生的开源特性)。惊奇地发现,这个效果仅用了寥寥几行代码!惊讶之余,溯本求源,最后“认识”了精巧而美妙和jQuery,特别是它优雅的方法连缀能力,更令我如获至宝、兴奋不已!后来我查了很多jQuery的资料,发现它的文档没有汉化,就用一周的休息时间翻译了它的API(1.1版)文档。这份汉化文档在jQuery中文资料匮乏的时候为广大jQuery网友提供了一点帮助,也获得了大家的认可和好评。 JavaScript库和框架解决的问题,无非就是(跨浏览器的)DOM操作、事件处理、样式更换和外部通信(AJAX)。但jQuery独特的集合对象、隐式迭代、方法连缀、自定义选择符和事件方法,加之只有不到20KB的超轻巧和执行速度超快,赢得了众多JavaScript开发者的青睐。 jQuery不仅支持各式各样的CSS选择符表达式,而且还支持XPath和自定义的选择符表达式,这一点在JavaScript库和框架领域中无出其右者,使开发者找到要操作的元素或集合简单得难以置信;它细腻灵巧而又富有弹性的事件处理机制,包括事件注册、触发和自定义,特别是令JavaScript的Guru级人物都喜不自禁的hover()方法,使它在JavaScript库和框架之林中独树一帜、个性十足;它在操作DOM文档时的大处着眼、小处着手,提供的丰富而实用的各种遍历和操作DOM结构及元素的方法,令人耳目一新,简直“直逼每个JavaScript爱好者的心理防线”,那种令人怦然心动的感觉,历久弥新;它处理AJAX请求和响应的简洁明快、它的简单易用、它超级方便的扩展机制、它丰富的插件支持(Interface等)、它背后的强大社区……所有这些,引无数JavaScript高手竞折腰! 事实上,因特网上的JavaScript库和框架数以百千计,为什么唯独jQuery对我们这些爱好者有如此大的吸引力呢?就是因为jQuery采取了与其他库和框架截然不同的理念,处处匠心独运,别出心裁——具体细节,请参考第1章。 本书作为第一本全面、深入介绍jQuery库的图书,可以说是应运而生的。书中包含了jQuery教程、jQuery实例和JavaScript最佳实践。jQuery教程部分是本书第2章至第6章,分别介绍了jQuery中的选择符、事件处理、DOM操作、动画效果和AJAX方法。其中,第3章、第4章、第5章结尾,特别归纳了相应方法及适用情形,既简明又实用。jQuery实例部分是本书第7章、第8章、第9章,分别围绕Web开发中最常见的表格、表单和动画效果,详尽地探讨了使用jQuery的方方面面。这几章的实例,深入讨论诸多Web开发问题,深入浅出、娓娓道来,时不时令人拍案叫绝、感叹很多百思不得其解的问题,其实只有一层窗户纸!第10章介绍了jQuery强大的扩展能力,介绍了扩展jQuery或者编写自已的jQuery插件的方法。这一章深入到jQuery核心,把整个库的架构全部展现给了读者,并向读者揭示出jQuery库中的“陷阱”和“关键”,令人有豁然开朗、恍然大悟之感。 现代JavaScript开发的一个基准点就是最佳实践。为了让读者不走弯路;不浪费宝贵的时间,本书在介绍通过jQuery进行JavaScript开发的过程中,实践了“渐进增强”和“平稳退化”这两个不唐突(unobtrusive)的JavaScript开发原则。把抽象的概念形象化、具体化,字里行间,渗透着作者对这些先进理念的阐发与启示。 值得一提的是,本书附录C是名符其实的“压轴好戏”。这么举重若轻、浅显易懂地讨论JavaScript闭包,在译者看来还是头一次。几个精心设计的例子,读者跟着走下来,不知不觉中就能领略到JavaScript这一高级特性的精髓所在(也许没有说得那么容易)。 书是人类进步的阶梯,这话一点不假,但“尽信书不如无书”。要想学习jQuery不能不看jQuery的图书,但是,只看是不管用的,还要动手实践——打开文本编辑器和浏览器,亲手写jOuery代码!书中很多地方讲的只是要点,而动手实践才能收获书中没有讲到的东西。 本书由李松峰负责翻译,参加翻译工作的还有李炜、秦绪文、李丽、程宝杰、宋连海、付荣艳、封耀杰、贾爱华、左艳坡、熊俊芹、刘英、宋会敏等。 最后,也是最重要的,我要感谢在翻译此书过程中,傅志红老师给我提供的帮助和建议。感谢武卫东老师、刘江老师对译稿的指点。感谢本书的责任编辑杨爽对译稿的认真审核和修改,如果不是她创造性地与我沟通,本书恐怕要留下不少遗憾。此外,还要感谢图灵俱乐部“明月星光”网友的热心建言,他的建议解决了一些我在翻译过程中遇到的问题。不过,囿于个人水平和能力,翻译中的错误和不当之处在所难免。 前言jQuery是一个强大的JavaScript库。无论你具有什么编程背景,都可以通过它来增强自己的网站。 由John Resig创建的jQuery是一个开源项目,其核心团队由富有献身精神的顶尖JavaScript开发人员组成。jQuery在一个紧凑的文件中提供了丰富多样的特性、简单易学的语法和稳健的跨平台兼容性。此外,百余种为扩展jQuery功能而开发的插件,更使得它几乎成为适用于各类客户端脚本编程的必备工具。 本书以通俗易懂的方式介绍了jQuery的基本概念,通过学习本书,即使曾经因编写JavaScript而受过挫折的人,也能够掌握为网页添加交互和动态效果的技术。本书将引导读者跨越AJAX、事件、效果及高级JavaScript语言特性中的各种陷阱。 包含书中各章的在线示例。本书内容 本书的第一部分jQuery简介,用来帮助读者对jQuery有个大概的了解。第1章的内容主要涉及如何下载和设置jQuery库,同时也会指导你使用jQuery编写第一个脚本。 本书的第二部分将深入讨论jQuery库的各个主要方面。第2章讲述如何取得我们想要的一切。通过jQuery中的选择符表达式,你可以在页面中的任何地方找到想要的元素。这一章将使用各种选择符表达式为页面中的不同元素添加样式,其中一些是通过纯CSS方式做不到的。 第3章讲述如何“扣动扳机”。本章介绍如何通过jQuery的事件处理机制,在浏览器发生事件时触发行为。同时,还会介绍jQuery的独家秘笈——以不唐突的方式添加事件(甚至在页面加载完成之前)。 第4章讲述如何增加操作的艺术感。这一章介绍通过jQuery实现动画的技术,从中我们能够体会到隐藏、显示和移动页面元素时那种轻松自如的感觉。 第5章讲述如何通过指令改变页面。本章讲述的是动态修改HTML文档结构的技术。 第6章讲述如何让你的网站跻身主流行列。在学习完本章后,你也可以做到不用像过去那样刷新页面而访问服务器端功能。 本书的第三部分与前两部分不同。这一部分主要以实例为主,即在前几章学习的基础上,创建常见问题的稳健jQuery解决方案。第7章将讲述排序、筛选和为信息添加样式并创建优美实用的数据布局。 第8章以客户端数据验证为主题。届时,将设计一个具有适应能力的表单布局,还会实现基于客户端与服务器通信的交互式表单功能,例如自动完成。 第9章介绍如何在小窗口内显示页面元素来增强它们的美感和实用性。其中,动态显示和隐藏信息的方式既可是自动的,也可是用户控制的。 第10章讲过jQuery令人印象深刻的扩展能力。读者将在理解和掌握3个优秀jQuery插件的基础上,从头开始构建自己的插件。 附录A提供了很多与jQuery、JavaScript以及通常的Web开发有关的内容丰富的网站信息。 附录B推荐了一些有用的第三方程序和实用工具,用于在个人的开发环境中编辑和调试jQuery代码。 附录C讨论JavaScript语言的常见壁垒之一——闭包。学了本附录,你将会依赖闭包的强大威力而不是害怕它的副作用。 本书读者对象 本书适合想在自己的设计中添加交互元素的Web设计者,也适合想在自己的Web应用中创建最佳用户界面的开发者。 读者需要具备基本的HTML和CSS知识,并且应该熟悉JavaScript语法。但是,不需要有jQuery的知识,也不必拥有其他JavaScript库的使用经验。 书摘第1章jQuery入门 今天的万维网是一个动态的环境,Web用户对网站的设计和功能都提出了高要求。为了构建有吸引力的交互式网站,开发者们借助于像jQuery这样的JavaScript库,实现了常见任务的自动化和复杂任务的简单化。jQuery库广受欢迎的一个原因,就是它对种类繁多的开发任务都能游刃有余地提供帮助。 由于jQuery的功能如此丰富多样,找到合适的切入点似乎都成了一项挑战。不过,这个库的设计秉承了一致性与对称性原则,它的大部分概念都是从HTML和CSS(Cascading Style Sheet,层叠样式表)的结构中借用而来的。鉴于很多Web开发人员对这两种技术比对JavaScript更有经验,所以编程经验不多的设计者能够快速学会使用该库。实际上,在本书开篇第1章中,只需3行代码就能编写一个有用的jQuery程序。另一方面,经验丰富的程序设计人员也会受益于这种概念上的一致性,通过学习后面的更高级内容,你会感受到这一点。但是,在举例说明如何使用这个库之前,我们应该首先讨论一下选择它的理由。 1 1jQuery能做什么 jQuery库为Web脚本编程提供了通用的抽象层,使得它几乎适用于任何脚本编程的情形。由于它容易扩展而且不断有新插件面世增强它的功能,所以一本书根本无法涵盖它所有可能的用途和功能。抛开这些不谈,仅就其核心特性而言,jQuery能够满足下列需求: 取得页面中的元素。如果不使用JavaScript库,遍历DOM(Documem Object Model,文档对象模型)树,以及查找HTML文档结构中某个特殊的部分,必须编写很多行代码。jQuery为准确地获取需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制。 修改页面的外观。css虽然为影响文档呈现的方式提供了一种强大的手段,但当所有浏览器不完全支持相同的标准时,单纯使用CSS就会显得力不从心。jQuery可以弥补这一不足,它提供了跨浏览器的标准解决方案。而且,即使在页面已经呈现之后,jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。 改变页面的内容。jQuery能够影响的范围并不局限于简单的外观变化,使用少量的代码,jQuery就能改变文档的内容。可以改变文本、插入或翻转图像、对列表重新排序,甚至,对HTML文档的整个结构都能重写和扩充——所有这些只需一个简单易用的API。 响应用户的页面操作。即使是最强大和最精心设计的行为,如果我们无法控制它何时发生,那它也毫无用处。jQuery提供了截取形形色色的页面事件(比如用户单击一个链接)的适当方式,而不需要使用事件处理程序搞舌LHTML代码。此外,它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性。 为页面添加动态效果。为了实现某种交互式行为,设计者也必须向用户提供视觉上的反馈。jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。 无需刷新页面即可从服务器获取信息。这种编程模式就是众所周知的AJAX(AsynchronousJavaScript and XML,异步JavaScript和XML),它能辅助Web开发人员创建出反应灵敏、功能丰富的网站。jQuery通过消除这一过程中的浏览器特定的复杂性,使开发人员得以专注于服务器端的功能设计。 |
随便看 |
百科全书收录4421916条中文百科知识,基本涵盖了大多数领域的百科知识,是一部内容开放、自由的电子版百科全书。