以前的一个项目中用到jquery,有朋友推荐jquery fundamentals 当时学习了下,感觉还不错,断断续续的翻译了一些片段,以供项目组中同事参考。google了下,并没有发现这个教程的中文翻译。
最近整理电脑,又看到了它。翻译的片段中有很多纰漏,慢慢整理了下,准备发布到园子里,希望对于初学jquery,关键是感觉看英文吃力的同学有所帮助。由于个人能力和精力所限,错误在所难免。欢迎指正。
后续的还在整理。
作者Rebecca Murphey
原文链接地址http://jqfundamentals.com/
With contributions by James Padolsey, Paul Irish, and others. See the GitHub repository for a complete history of contributions.
Copyright © 2011
【译】jquery基础教程(jQuery Fundamentals)——(第一部分)概述
【译】jquery基础教程(jQuery Fundamentals)——(第二部分)javascript基础
【译】jquery基础教程(jQuery Fundamentals)——(第三部分)jquery基础
【译】jquery基础教程(jQuery Fundamentals)——(第四部分)jquery核心
【译】jquery基础教程(jQuery Fundamentals)——(第五部分)jquery事件
【译】jquery基础教程(jQuery Fundamentals)——(第六部分)jquery效果
【译】jquery基础教程(jQuery Fundamentals)——(第七部分)jquery Ajax
【译】jquery基础教程(jQuery Fundamentals)——(第八部分)jquery插件
【译】jquery基础教程(jQuery Fundamentals)——(第九部分)jquery最佳性能实践
【译】jquery基础教程(jQuery Fundamentals)——(第十部分)jquery代码组织
【译】jquery基础教程(jQuery Fundamentals)——(第十一部分)jquery定制事件
对于前端开发人员来说,jquery正在变成一种必须要掌握的技能。这本书的目的是对jquery库提供一个简略的鸟瞰;当你通读本书之后,你应该能够利用jquery完成一些基本的开发任务,并且对于进一步学习打下了一个牢固的基础。这本书的设计虽然是按照课堂学习的方式组织的,但是你会发现它对于你的自学也会很有帮助。
这是一门需要动手实践的课程。我们会利用少量的时间来理解概念,剩下的时间你有机会对这些概念进行编程实践。一些编程实践或许看起来会很琐碎;另一些或许令人发指。无论怎样,在这里并没有等级之分;我们的目标很简单:对于需要用jquery来解决的问题,你可以选择适宜你的方式学会并解决它。对于所有的编程实践的例子的解决方案都包含在示例代码中。
在这本书中我们要用到得jquery代码被托管在Github的仓库中(http://github.com/rmurphey/jqfundamentals)。你可以下.zip和.tar两种格式的源代码,然后解压出来应用到你自己的开发机器上。如果你是一个Git用户,欢迎你复制或者完善这个仓库。
如果你想完成大部分课程,你需要准备以下的软件工具:
l 火狐浏览器
l Firebug对火狐浏览器的扩展插件
l 一个普通的文本编辑器
l Ajax开发部分:本地服务器(例如 MAMP或者WAMP),或者一个FTP服务器,或者SSH可访问服务器的客户端。
Javascript 可以通过内联代码或者一个额外的文件等方式利用脚本标签被添加到页面中。将javascript包含入页面有很重要的意义:被依赖脚本必须在依赖他们的脚本之前被引入页面。
为了提升页面的性能,javascript脚本的引入位子最好靠近HTML文档的结尾;对于多个javascript脚本文件最好组合在一起引入。
例1.1:内联的javascript
<script> console.log('hello'); </script>
例1.2:引入外部文件的javascript
<script src='/js/jquery.js'></script>
对于javascript开发来说一个好的调试工具是必须的。火狐通过FireBug扩展提供了一个调试器;Safari 和 Chrome提供了一个内建的控制台。
控制台提供的功能:
l 运行javascript的单行和多行编辑器
l 查看页面生成代码的查看器
l 一个网络这资源的查看器,用来检查网络请求。
当你进行javascript代码编写的时候,你可以利用下面的方法给控制台发送信息:
l Console.log() 用来发送常规的日志信息
l Console.dir()用来记录可以浏览的对象(目录)
l Console.warn() 用来记录警告信息
l Console.error() 用来记录错误信息
虽然控制台方法在每个浏览器中不尽相同,但是其他的控制台方法也是可以使用的。同时,控制台为了调试代码也提供了设置断点和查看表达式的功能。
这本书的大多数章节在结尾的时候都会提供一个或多个练习题。对于一些练习题来说,你可以直接在FireBug上解决;但是其他的一些,在你的jquery脚本标签被指定到你的个人练习之前,你需要引入别的一些被依赖的脚本。
我们在这本书没有涵盖全部的jquery开发相关信息,你需要查阅jquery的帮助文档,才能够完成练习。这是我们所希望看到的;jquery库是相当庞大的,学会利用帮助文档来解决问题是学习的一个重要组成部分。
这里有一些解决这些问题的建议:
l 首先,你必须完全理解需要你解决的问题
l 其次,你要确定为了解决这些问题,你需要访问哪些元素,并且确定怎样获得这些元素。然后利用FireBug来确认你所需要的元素。
l 最后,确定为了解决这个问题,需要你对这些元素做些怎样的操作。在你编写代码之前,写一些注释来解释你要干什么,对于解决问题是很有帮助的。
千万不要害怕犯错误!也千万不好尝试第一次就把代码编写的很完美!对于编写代码的犯错和尝试是学习jquery类库的很重要的一部分,通过这种方式,你很快就会变成一个更棒的开发人员。对于练习题的一些解决方法的例子全部放在了实例代码的/solutions目录下。
通过Jquery对象被调用的方法会以$.fn.methodName的形式书写。在jquery的命名空间中存在,但是不通过jquery对象调用的方法会以$.methodName的形式调用。如果你对于这些约定不太感冒,不用担心——随着你对本书的进一步学习你回越来越清楚明白。
例1.3 示例代码的例子
// code examples will appear like this
备注方式如下:
在网络上有很多从事jquery方面的研究的文章和博文。其中有一些很棒,而另一些则完全是错误的。当你在阅读关于jquery的文章的时候,要确定文章谈论的的jquery版本和你所在用的是相同的,并且要坚决抵制住仅仅是复制粘贴的恶习——好好花些时间理解文章中的代码。
这里有一些非常优秀的的资源,在你学习jquery期间会很有帮助。当然其中最重要的的当然是jquery的源代码本身:它以代码的形式包含了完整的类库文档。所以它对于你来说并不是一个黑盒子——如果你现在并且以后经常的花费一些时间来访问它,你对jquery类库的理解会以指数级的方式增长——我强烈的建议你将它的链接放到你的浏览器标签中并且经常的参阅它。