作者:(印)B M Harwani_侯伯薇 页数:344 出版社:empty |
TURING图灵程序设计丛书Wib开发系列jQuery Recipes A Problem-Solti on ApproachjQuery攻略图书在版编目(CIP) 数据jQuery攻略/(印) 哈瓦尼(Har wani, B.M.) 著;侯伯薇,陈宁译.--北京:人民邮电出版社,2010.10书名原文:jQueryRecipes:AProblen-SolutionApproachI.①j…Ⅱ.①哈…②侯…③陈…Ⅲ.①[印] B.M.Har wani侯伯薇陈宁译人民邮电出版社+著[印] B.M.Har wani本书非常适合想利用最少的代码创建交互性网站的开发人员学习和参考, 也适合懂少量HTML知识又想创建动态站的初学者学习。北京市崇文区夕照寺街14号2010年10月第1版2010年10月北京第1次印刷著作权合同登记号图字:01-2010-2363号ISBN 978-7-115-23830-6定价:59.00元
译者序
回顾一下自己的工作生涯,忽然发现我大部分时间都在从事B/S应用程序的开发,因此也就与JavaScript结下了不解之缘。最初使用最基本的JavaScript开发页面的脚本, 之后出现了Ajax,使用了Prototype, 直到发现并开始使用jQuery, 越来越觉得开发JavaScript脚本是一件快乐的事!使用jQuery, 不仅仅可以让我们更加高质高效地编写JavaScript代码, 而且共中内建的功能,让我们可以很轻松地实现诸如表单验证、表格处理、Ajax、视觉特效等很棒的功能, 让我们的用户有更好的体验。本书由浅入深, 介绍了使用jQuery的方方面面, 不仅包括最基本的安装配置、处理字符串和数组、事件处理等比较基本的内容,也包括了表单验证、页面导航、视觉特效,处理表格等进阶的技巧, 另外还讲述了如何使用它来实现Ajax功能, 如何使用插件得到更高的开发效率, 最终作者还将CSS方面的内容作为必要的补充提供给我们。所有的内容都非常实用,我们可以在遇到具体问题的时候,将此书作为参考,使用其中提供的代码快速实现所需要的功能,而针对每个具体问题的解决方案的剖析,让我们不仅能够知其然,而且知其所以然。不论是初学者, 还是已经有JavaScript开发经验, 想要使用jQuery来提高开发效率和质量的程序员, 或者已经有了一定j Qu cry开发经验的开发者, 在本书中都会找到所需要的知识,愿大家享受本书, 享受jQuery!侯伯薇2010年6月于大连
前言内容
jQuery是功能丰富的JavaScript库, 可以帮助用户毫不费力地把动态功能应用到网页。jQuery具有许多强大的功能, 包括访问部分网页、快速修改网页内容、添加动画、应用AJAX技术,等等,本书以问题描述+解决方案的方式, 帮助读者理解jQuery这个开源项目的各种功能。本书开头介绍利用选择器把效果应用到段落和列表,从而教会你如何设置网页布局.之后学习事件处理和对不同表单元素执行验证的技术。应用视觉效果、导航、Ajax和jQuery的其他方面, 也是以这种问题描述+解决方案的方式进行讲解。所有示例中用到的代码及每个步骤,都会通过屏幕截图进行透彻的讲解。如果你对HTML、CSS和jQuery稍有了解, 那么这本书正是为你而准备的,因为本书涵盖了利用j Qu cry展开工作时可能遇到的大多数问题。读者对象本书是为Web开发人员、专业人士、培训讲师和学生准备的。在把某些功能应用到网页时经常遇到的问题,大部分都能在本书中快速地找到解决方案,从本书能学到什么口把效果应用到段落和列表口设置布局口事件处理口表单验证口页面导航口视觉效果口表格处理口Ajax口使用插件
致谢
我要向编辑部主任助理Steve Anglin道一声感谢, 他对本书进行初步验收, 并给予我创作本书的机会, 非常感谢在创作本书过程中A press出版团队的精诚合作和贡献。感谢责任编辑Matthew Moodie, 他反馈了大量重要的信息以帮助改善本书。他在本书的结构和质量改善上起到了重要作用。我要感谢技术编辑Massimo Nardone, 感谢他出色而细致地审读了本书, 提出了许多很有帮助的意见和建议。特别感谢文字编辑Candace English, 感谢她在结构和文字方面一流的编辑水平, 感谢她对提升本书内容和润色文字作出的努力。出版。十分感谢协调编辑Kelly Moritz, 她为整个团队的协作付出了真诚的努力, 使本书得以按时深深地感谢A press出版社的编辑和制作人员, 以及为出版本书付出努力的整个团队。与你们每个人一起工作都很愉快。我也感谢我的家庭——我的小世界:Anu(我的妻子) 、Chirag和Naman(我的两个小宝贝) ,给我时间编著本书,虽然我本应该陪他们的。不应该忘记感谢我亲爱的同学们,他们也是我的“好老师”.他们让我了解了在面对新课题时学生们遇到的基本问题,使我能够直截了当地处理那些问题。学生们无穷而有趣的提问让我能够切实可行和有所侧重地编写本书。
关于作者
B.M.Har wani是印度阿杰梅尔的微芯计算机教育中心(MCE) 总经理, 他毕业于Pune大学的计算机工程系麸得学士学位, 拥有印度政府机构DOE ACC颁发的C级证书(计算机硕士文凭),在教学领域工作的15年多来,他开发出了富有艺术性的教学方法,以人人都能懂的方式去解释哪怕最复杂的课题。他成功地编写了多本图书,包括Programming&Problem Solving through℃'(BPB, 2004) 、Learn Tally in JustThree Weeks(Prag ya, 2005) 、DataStructures and Algorithms through C(CBC2006) , Master Unix Shell Programming(CBC, 2006) 、Business Systems(CBC, 2006) , Practical JavaProject(Shroff, 2007) 、Practical WebServices(Shroff, 2007) 、Java for Professionals(Shroff, 2008) 、C++for Beginners(Shroff, 2009) 、Practical ASPNET 3.5 Projects(Shroff, 2009) 、JavaServer Faces-A Practical Approach for Beginners(PHI Learning, 2009) 、Practical JSF Project using NetBeans(PHILeaming, 2009) 、Foundation Joomla(friends of ED, 2009) 和Practical EJB Project(Shroff, 2009) ,他还撰写了有关计算机学科的广泛课题的文章,想要了解更多,就请访问http//bmharwani.com。关于技术审稿人全架构师和软件专家等职位,他还担任赫尔辛基理工大学的客座讲师(讲授“通信协议安全”课程) 和网络实验室的实验总监, Nardone熟谙安全通信协议的测试工具和方法, 并曾利用多种编程语言开拓性地开发因特网和移动应用,Massimo Nardone出生在维苏威火山下, 拥有意大利萨勒诸大学颁发的计算机科学硕士学位。他目前是IT安全和基础设施高级架构师、芬兰IBM的芬兰发明开发小组组长。他是领导级的IT架构师,主要负责IT安全事务, 广泛涉及IT基础设施、安全审计和评估、PKI/W PKI、安全隧道、LDAP安全和智能卡安全。Nardone在移动、安全和Web技术领域有着超过15年的工作经验,在国内或国际项目中担当过项目经理,软件工程师、研发工程师、首席安Massimo Nardone在多个不同的IT领域担任技术审稿人, 包括安全、互联网和数据库技术,他研究、设计和实现了安全工具和方法, 涉及Standard BS 7799、PKI/W PKI、Security Java(JAASJSSE, JCE等) 、BE A WebLogic Security、J2EE Security、LDAP Security、SSO、Apache Security、MSSQL Server Security、XML Security和SmartCard Security。Nardone目前拥有PKI、SIP、SAML和Proxy领域的4个国际专利。
jQuery基础知识
本章将讲述jQuery的基础知识, 从jQuery的安装到操作DOM节点。这些基本的“攻略”将有助于刷新你的记忆和填补你的知识空白。本章将涵盖以下攻略:口安装jQuery i口选择DOM节点;口延迟JavaScript的执行:口把CSS应用到元素上:口选择一系列非标准的HTML元素:口计数DOM节点的数目和显示其文本:口获得一个元素的HTML:口更改一个DOM节点的内容;口快速创建DOM节点;口为不同的HTML元素分配相同的类名, 井对它们应用相应的样式。注意第10章将更深入地讲解CSS, 为了完善你的jQuery代码, 我们将讲述CSS技术, 由于请你安装jQuery, 这样就可以在应用程序中使用jQuery, 并照着本书中的攻略“依葫芦画jQuery其实是一个js(JavaScript) 文件。可以轻而易举地下载jQuery并安装到Web应用程序中, 可从官方网站http//jquery.com/下载jQuery的最新版本。本书使用的jQuery版本是1.3.2。CSS是一种基本的j Qu cry技能, 我们还将给出一些基本的CSS攻略,1.1jQuery的安装问题描述解决方案你想在哪里写jQuery程序, 就把下载的文件复制到哪个文件夹,
2第1章jQuery基础知识把加载jQuery库的声明写在HTML文档的head标记里, 这个声明如下所示:s script src- jQuery-1[1] .3.2.js type- text/javascript“ac/script>在几乎所有的攻略中, 我们将在HTML文档中添加以下3行代码(在head标记里) :<1inkrel=*stylesheet'href=*8tyle.c 88 type= text/cs 8 / 5ca cript arc= d 1.ja cyp e=text/Javascript'x/a cript a知其所以然第一行是用来把外部的样式表文件style.css(文件名随意) 链接到HTML文档。第二行是加载jQuery库, 第三行是指定JavaScript文件名(在这里是d 1.js, 但它可以是任何文件名) , 其中包含了来自本书攻略的jQuery代码。1.2选择DOM节点问题描述请利用jQuery来访向DOM(文档对象模型) 元素, 以便操作那些元素。解决方案jQuery利用CSS选择器来访问DOM元素。当利用选择器来访问DOM中元素的时候, 元素以j Qu cry对象的形式被返回。使用CSS选择器来访问DOM中元素时, 要使用S门函数,使用jQuery代码来选择一个段落, 典型的JavaScript脚本如下所示://d1.jss(document) .ready(function l) {SO函数用于选择文档的一部分。它接受任何CSS选择器表达式、0个或多个DOM节点,返回所有匹配的元素,以便我们操作这些元素,改变其外观。口s'p*) ——访问HTML文档中所有的段落元素口si'div) ——访问HTML文档中所有的div元素口5('#A} ——访问所有id=A的HTML元素口S('.b——访问所有claas=b的HTML元素在下面的攻略中, 我们将选择所有的段落元素, 并对共调用add class() 方法。这将把CSS在HTML文档head部分中引用了JavaScript文件。一旦浏览器发现脚本行, 就会执行该JavaScript文件。但样式无法应用于HTML元素(因为JavaScript文件在head部分中被引用, 而HTML元素在body部分中才出现, 此时尚未加载) , 因此, 我们需要延迟JavaScript代码的执行,用来通知我们DOM准备就绪的方法是$(document) , ready() , 在DOM加载完成后, 此我们使用关键字function(不带函数名) 来定义函数体。函数体在DOM加栽之后被调用。为什么函数体被用作方法的参数?很简单,因为我们希望函数立即执行,且只执行一次,我们不希望该函数体被再次使用。换句话说, S(document) , ready() 给文档注册了一个ready(就绪)SI'p') -add class('high 1ight] ;1;知其所以然下面是一些示例.类highlight应用到文档中所有的段落。1.3延迟JavaScript的执行问题描述直到DOM加载完毕。解决方案方法执行函数调用(函数作为它的参数):.highlight t714把CSS应用到充上L网lopSage.comSi docu nent) .ready t function{) [S('p*) .add class(*highlight] ;知其所以然事件,上面解决方案的('p”) 是一个选择器, 用于访问HTML文档的所有段落元素, 而add class()方法将把指定的CSS类应用于这些元素。1.4把CSS应用到元素上问题描述应用一个CSS类到网页的某些元素上,解决方案add Class 0) 方法用于应用一个CSS类到网页的选中部分, 它包含类的名称, 作为方法的参数, 通过在单独的样式表中定义CSS类的样式规则, 这个方法用起来就非常容易, 在样式表中给不同的CSS类编写样式规则, 如下所示:fonc-style:itallcjbackground-color:4010:
4第1章jQuery基础知识以下是应用CSS类的代码:c heads6(docum ant] .ready l function() ivar Sao de a=SI a root*) .children ll;Si'd1v'} , add class t highlight') ;se'body) .add Clas at'highlight‘;知其所以然在第一行jQuery代码中, se'div') 选择HTML文档的所有div元素, 并对这些元素应用highlight类的样式规则。在第二行中, 选择器s('body') 访问HTML文档的body元素, 然后为该元素添加CSS类highlight。1.5选择一系列非标准的HTML元素问题描述选择非常规的HTML元素, 比如包含一段给定文本的HTML元素、在序列中特定位置的元素、在HTML文档中的奇数或偶数元素。解决方案要选择非常规的HTML元素, 我们需要使用自定义选择器, 自定义选择器帮助我们选择HTML元素组, 比如包含一段给定文本的HTML元素、在特定位置的元素(例如在第三段落) 。自定义选择器还可以选择HTML文档中的奇数或偶数元素。以下是如何选择包含文本Life的所有元素:在下面的示例中, 我们给HTML文档中的偶数和奇数div元素、给定序号的一个段落分别第一个示例选择包含单词Life的a pan元素, 对共应用CSS类highlight。在第二个示例中:odd和:even是jQuery的自定义选择器, 帮助选择所需元素。在JavaScript中从0开始编号,0是偶数, 1是奇数, 依此类推。上面第一个示例选择了奇数div元素(编号为1、3……) 并对同样, 第二个示例选择了偶数div元素(编号为0、2…) 并应用CSS类boundary:最后,第三个示例使用了自定义选择器:eq来选择第二段落(因为第一个段落的编号为0),S('span:contains(Life l'] .add Claas f'high 1ight') ;应用不同的样式:s('divi odd } .add class l highlight.........................s'p:eq(i) *) .add cla saflink a tyle) ;知其所以然奇数元素应用CSS类highlight:s('divi odd') .add clas a('highlight') ;s('divi even') .add class('boundary') ;并对共应用CSS类link style:1.6计数DOM节点和显示其文本5s('p:eq(1) *) .add class(link style*) ;1.6计数DOM节点和显示其文本问题描述请通过jQuery访问DOM及其节点。解决方案在DOM中, 网页被表示为一个根节点(亲) 和一些分支节点(子) 的树结构形式, 其中每个HTML元素被表示为一个节点, 通过利用jQuery你可以随心所欲地访问和操纵这些节点,请看下面的HTML页面:
6第1章jQuery基础知识大示子节点数组的长度。然后利用each() 方法逐个访问id= root 的div的所有子节点。使用text() 方法来访问并连接每个子节点的文本, 并存储在字符串变量txt中。最后通过alert()方法显示所有子节点的文本。下面逐一讲解以上jQuery代码示例用到的方法,1.children()children() 是逾历树的方法, 它搜索指定元素的直接子节点, 井返回一个新的jQuery对象,此方法仅在DOM树中向下历一层, 在该示例中, 此方法访问根div元素中定义的所有DOM节点, 并将它们分配给变量S nodes。S nodes是一个jQuery对象, 它包含根div元素中定义的3个div元素。利用S nodes对象的length属性, 显示该HTML文档中DOM节点(作为id= root·的div的子节点) 的数目,2.each()each() 方法用于循环访问包装集合中的每个元素。它包含一个迭代函数。在选代函数中,我们编写代码,应用于集合的每个单独元素。3.text()text() 是jQuery对象的一个方法, 用于访问指定元素的文本内容。它合并指定元素的文本内容, 并以字符串的形式返回。
目录
第1章j Query基础知识...
点击之后禁用按钮
3.4处理鼠标事件
4.2验证数字字段……
4.3验证电话号码….
1.1j Query的安装.…
1.2选择DOM节点…
1.3延迟JavaScript的执行…
1.4把CSS应用到元素上…
1.5选择一系列非标准的HTML元素
1.6计数DOM节点和显示其文本.....
获得一个元素的HTML代码…......
1.8改变DOM节点的内容--
1.9快速创建DOM节点
1.10为不同HTML元素分配相同类名并
2.1利用数组在列表中显示名字........14
2.3选数组元素,只显示所需的数据….-.19
3.5查明哪个鼠标键被按下.........................43
3.6查找鼠标按下时的屏幕坐标-..-............44
3.7动态地突出显示文本..45
3.8随着鼠标移动使图像明亮成模糊…47
3.9查明元素何时获得和失去焦点-49
3.10在按钮上应用悬停效果....50
3.11切换应用一个CSS类.-52
3.12创建基于图像的变换…...i.54
93.13为响应事件而添加和删除文本------..57
3.14应用样式作为对事件的响........
3.15显示文字气球
3.16创建“返国顶部”链接............
3.17提供“更多…”链接…
3.18以动画效果显示文本-
3.19以滑动效果来替换文本
3.20使图像滚动……
3.21确定被按下的键…
3.22防止事件冒泡…
3.23链接多个活动
3.24小结…
第4章表单验证…
1.11小结…
第2章数组和字符串..-
2.2操作数组元素---
2.4字符串数组和数值数组的排序…22
2.5拆分数组…24
2.6合并数组26
2.7把数值数组转换成字符串,并查找其
子字符串…
2.8创建对象数组--
2.9为对象数组排序
2.10小结…
第3章事件处理..
3.1查找被点击的按钮…...
3.2自动触发事件…
4.7检查复选框是否被.中................96.
4.8检查单选按钮是否被选中…..........99
4.9检查select元素中的选项是否被选中101
4.10把样式应用到选项和表格按钮............104
4.11一步选择或取消所有的复选框…107
4.12验证两个字段-…-110
4.13验证密码和确认密码字段是否匹配…113
4.14禁用某些字段……116
4.15验证整个表单一......118
4.16表单数据序列化…...128
4.17小结….....-132
第5章页面导航-...-.---133
5.1编写面包屑菜单......133
5.2把悬停效果添加到菜单项.............-135
.5.3创建上下文菜单….137
5.4创建具有快捷键的导航菜单..-......-140
5.5创建一个右键单击上下文菜单.....---144
5.6创建具有独立菜单项的两个菜单........147
5.7建立包含子菜单项的两个菜单…149
5.8创建折叠式菜单…153
5.9创建动态可视化栗单--
5.10小结…
第6章视觉特.....
6.1水平和垂直显示图片…..............--162
6.2创建水平滑动的图片浏览器….......165
6.3显示一幅图片,点击时向左滚动并
6.4创建图片,使它向左滚动消失,然后
6.5使图片在浏览器窗口中间滚动.….-171
6.6在鼠标悬停时依次显示图片........172
6.10在鼠标悬停时显示放大的图片.......--188
6.12在任意两个方向上切换图片….196
6.15小结
第7章处理表格…....
7.1在鼠标悬停时突出显示行…...
7.2交替突出显示相邻列
7.3过滤行……
7.4隐藏选定列..............
7.5分页显示表格…
7.6展开和折叠列表.....
7.7展开和折叠行…tom......................
7.8对列表项目排序
7.9对表格排序…
7.10过池表格中的行…
7.11小结…
第8章Ajax…
8.1显示欢迎信息....................
8.2执行认证…
8.3验证用户名
8.4验证邮件地址…
8.5使用自动完成…
8.6导人HTML…
8.7取得JSON数据…
8.8取得XML数据…........
8.9分页显示表格
8.10小结..............
第9章使用插件…
9.1对表格的任一列进行过滤,井且可以
9.2为图片添加注解……
9.4取得、序列化井清理表单控件….....
从右侧重新出现…
6.7垂直滚动图片..
6.8水平滚动图片.-.....
6.9创建新闻滚动倒览器--
6.11按页显示图片…
6.13
设置每页的行数..-.....
9.3拖放表格中的行…
9.5通过Ajax提交表单….
9.6找到元素的准确位置和大小…
9.7以传送带的方式显示图........
9.8使用date picker选择日期--
9.9对表格排序……
9.10小结…
第10章使用CSS----
10.1区分HTML元素…
10.17为HTML元素赋予不同的尺寸......311
10.18放置HTML元素….......313
10.19创建多栏的布局.314
10.20使文字眼绕图片显示…316
10.21在图片背后放置阴影.......317
10.22当鼠标移过链接的时候改变鼠标
10.23在指定的区域中显示长文字……320
10.24创建圆角的栏.....322
10.25应用文字装饰…323
10.26缩放图片…324
10.27设置背景图片.-..........................-326
10.28使背景图片在浏览器中央显示…327
10.29保持背景图片固定.……-.--328
10.30小结…................330
编写钟摆式滚动器............
6.14使用数组来滚动图片........................202
10.2向内嵌在一个元素中的另一个元素
10.3缩进段落---293
10.4将段落的首字母设为大写.......294
10.5去除标题和段落之间的间隔….............295
10.6向标题文字应用样式…297
10.7缩进多个段落的第一行.................297
10.8创建带有悬挂缩进的段落--298
10.9创建带有边的提取引用....................299
10.10创建带有图片的提取引用..……........-.301
10.11向列表项应用列表属性……302
10.12只对选定的列表项应用样式........303
10.13在列表项之间放置分隔线..............306
10.14向列表应用图片标记…….307
10.15创建水平显示的列表…..............308
10.16在超链接上应用样式….....309
样式.................