?
最近在看《jQuery 基础教程》,刚刚看到第5章,感觉受益良多,故而觉得还是有必要将学习的过程记录下来,做个笔记,方便以后回顾。我正在看的这本电子书,应该是最早的那个版本,使用的jQuery还是1.1版本(这是从book.learningjquery.com)看到的,现在最新版的这本书讲解的是jQuery1.3,而目前jQuery已经发展到了1.4版本,不过这不影响我学习这本书。
想要学好jQuery,当然要先对JavaScript有比较深入的理解才行,这里建议阅读《JavaScript权威指南(第5版)》和《JavaScript语言精粹》这两本书。第一本是基础书,适合于对JavaScript了解较少的人,不过里面讲到的许多技术还是有一定深度的,尤其是一些例子写的会让你琢磨一会儿才会明白,翻译的还行,有些文字读起来不大容易理解, 不知是作者写的难懂还是译者翻的晦涩。第二本书很薄,内容也不多,不过要先对JavaScript有一定的了解才能理解这本书的内涵,我读这本书读的比较快,在不求甚解的状态下很快就读完了,不过后来发现自己的JavaScript知识太浅薄所以就读了下前一本书,才发现原来JavaScript是如此的有趣和强大,如果能全面掌握JavaScript,配合DOM和CS能够让Web变得非常强大。不过写出这样的代码是很折磨人的,而且对开发人员的水平要求很高,因为代码要从头开始写。不过现在有了jQuery等一帮JavaScript脚本库,开发功能强大的Web页面变得容易了许多。
我目前对jQuery的理解就是它提供了操作DOM的功能,并进一步做了封装,使得用起来非常简单,也非常强大,更能够节省开发人员的许多时间。下面对jQuery基础教程的前4章做一个归纳。
第1章开关就说明了jQuery的作用:“为Web脚本编程提供了通用的抽象层”。并且能够满足下列需求:
- 取得页面中的元素。
- 修改页面的外观。
- 改变页面的内容。
- 响应用户的页面操作。
- 为页面添加动态效果。
- 无需刷新页面即可从服务器获取信息。
- 简化常见的JavaScript任务。
从网上下载到最新版本的jQuery库文件后,需要在页面中率先引用这个文件才能调用它的代码,因此要在HEAD元素中添加一个SCRIPT元素:<script type="text/javascript" src="jquery.js"></script>。
引用了jQuery文件后,就可以创建或获取jQuery对象了,这是通过$()函数来完成的。这个函数需要一个参数,比如$(document)就把document封装成了一个jQuery对象,这是使用现有的DOM对象,也可以传递元素的ID值,比如$('p')会找出页面中的所有P元素并封装成对象集合。不管是一个对象还是对象集合,都可以调用方法对封装好的对象进行操作,如果是单个对象则只影响这一个对象,如果是对象集合则调用方法会影响集合里的每一个对象,而无需进行遍历,从而简化了代码。
通过我们要在整个文档都加载完毕后才对文档进行操作,在jQuery中通常要这样写:$(document).ready(function() { ... });这是指当文档DOM加载完成后调用提供的匿名函数。这实际上是利用了DOM的事件驱动机制,代码和内容也分离开了。
再回到$()函数,这实际上是一个工厂函数,因此会大量的用到它。根据传递的参数类型,jQuery会在Web页面中查找相应的元素,并封装到jQuery对象(或对象集合)中。可用的参数类型如下:
- DOM对象,如document
- 元素标签名,如$('p')会获取Web页面中所有的段落
- 元素ID值,必须以#开头,如$('#myid')会获取页面中id属性等于myid的元素。
- 元素类名,必须以.开头,如$('.myclass')会获取页面中所有class等于myclass的元素。
今天先写这么多,下次研究一下第2章的示例。