使用jQuery框架扩展JavaScript的功能.pptxVIP

使用javascript框架扩展JavaScript的功能 比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到项目中能够使程序员从繁杂的Web开发应用中解脱出来，将关注点转向应用项目的实现上，而非底层技术的开发上，从而提高项目的开发速度。 1 jQuery技术框架概述 由John Resig于2006年初创建。目前必威体育精装版版本为1.3.2，官方地址为：/，中文地址为/。 jQuery主要具有如下特点： 语法简练、语义易懂、学习快速、帮助文档丰富。 jQuery是一个轻量级的脚本，其代码非常小巧。 jQuery支持CSS1~CSS3定义的属性和选择器。 jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+。 可以很容易的为jQuery扩展其他功能。 能将JavaScript脚本与HTML源代码完全分离，便于后期编辑和维护。 插件丰富，除了jQuery自身带有的一些特效外，可以通过插件实现更多功能，如表单验证、Tab导航、拖放效果、表格排序、DataGrid、树形菜单、图像特效以及Ajax上传等。 导入jQuery框架文件方法如下： script type=text/javascript src=js/jquery.js/script 引入jQuery框架文件之后便可在页面脚本中调用jQuery对象、方法或属性，并以jQuery特色语法规范来编写脚本。 1 jQuery技术框架概述 练习 引入jquery库 传统的加载 1 jQuery技术框架概述 导入jQuery框架文件方法如下： script type=text/javascript src=js/jquery.js/script 引入jQuery框架文件之后便可在页面脚本中调用jQuery对象、方法或属性，并以jQuery特色语法规范来编写脚本。 19.2 jQuery构造器 构造器是jQuery框架的内核（core），它犹如JavaScript语言的构造函数（Function）。构造器由jQuery()函数（可简写为$()）负责实现。该函数是整个jQuery框架的核心，jQuery中的一切操作都构建于这个函数之上。jQuery()函数可以接收四种类型的参数： jQuery(expression,[context])：根据CSS选择器字符串在页面中匹配一组元素，或者利用context参数指定匹配的范围。 jQuery(html)：根据HTML标记字符串，动态创建由jQuery对象包装的DOM元素。 jQuery(elements)：将一个或多个DOM对象转化为jQuery对象。 jQuery(callback)：$(document).ready()的简写。允许绑定一个在DOM文档加载完毕之后执行的函数。 19-1.html、19-2.html 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 19.2 jQuery构造器 jQuery对象与DOM对象是两个不同的概念。它们不能够相互调用，jQuery对象只能够使用jQuery定义的方法和属性，而DOM也只能够使用DOM组件和JavaScript定义的方法和属性。因此，在调用对象的方法和属性时，你应该清楚它属于什么对象。 当然，你可以通过一定的方法转换这两种对象。对于普通的DOM对象来说，如果要转换为jQuery对象，则使用jQuery()函数即可。例如，在下面代码中document.getElementsByTagName(span)[0]将获取页面中第1个span对象，此时所定义的span变量就是一个DOM对象，你可以调用DOM定义的节点方法对其进行操作。 而$(span)则表示一个jQuery对象，其中包含的span变量就表示DOM对象（即document.getElementsByTagName(span)[0]），这时我们就可以为变量span调用jQuery对象的方法来定义span元素的显示样式（即红色字体）。 19-3.html、 19-4.html、 19-5.html、 19-6.html、 19-7.html 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 19.3 jQuery基本用法 19.3.1 访问jQuery对象 上节已经介绍过，jQuery对象是一个集合。要访问这个集合，除了使用索引值以外，我们可以使用jQuery定义的几个方法和属性。 each(callback) each(callback)方法实际是JavaScript集合遍历的一种功能包装，它以jQuery对象内的集合元素为遍历对象，并循环执行指