《使用jQuery框架扩展JavaScript的功能》由会员分享，可在线阅读，更多相关《使用jQuery框架扩展JavaScript的功能（53页珍藏版）》请在金锄头文库上搜索。
1、使用javascript框架扩展JavaScript的功能比较著名的有比较著名的有PrototypePrototype、YUIYUI、 jQueryjQuery、mootoolsmootools、BindowsBindows以及以及 国内的国内的JSVMJSVM框架等，通过将这些框架等，通过将这些JSJS 框架应用到项目中能够使程序员从繁框架应用到项目中能够使程序员从繁 杂的杂的WebWeb开发应用中解脱出来，将开发应用中解脱出来，将 关注点转向应用项目的实现上，而非关注点转向应用项目的实现上，而非 底层技术的开发上，从而提高项目的底层技术的开发上，从而提高项目的 开发速度。开发速度。1 jQ
2、uery技术框架概述由由John ResigJohn Resig于于20062006年初创建。目前最新版本为年初创建。目前最新版本为1.3.21.3.2，官方地址为：，官方地址为： http:/ jQueryjQuery主要具有如下特点：主要具有如下特点： 1.1.语法简练、语义易懂、学习快速、帮助文档丰富。语法简练、语义易懂、学习快速、帮助文档丰富。 2.2.jQueryjQuery是一个轻量级的脚本，其代码非常小巧。是一个轻量级的脚本，其代码非常小巧。 3.3.jQueryjQuery支持支持CSS1CSS3CSS1CSS3定义的属性和选择器。定义的属性和选择器。 4.4.jQueryjQ
3、uery是跨浏览器的，它支持的浏览器包括是跨浏览器的，它支持的浏览器包括IE 6.0+IE 6.0+、FF 1.5+FF 1.5+、Safari 2.0+Safari 2.0+ 、Opera 9.0+Opera 9.0+。 5.5.可以很容易的为可以很容易的为jQueryjQuery扩展其他功能。扩展其他功能。 6.6.能将能将JavaScriptJavaScript脚本与脚本与HTMLHTML源代码完全分离，便于后期编辑和维护。源代码完全分离，便于后期编辑和维护。 7.7.插件丰富，除了插件丰富，除了jQueryjQuery自身带有的一些特效外，可以通过插件实现更多功能自身带有的一些特效外，
4、可以通过插件实现更多功能 ，如表单验证、，如表单验证、TabTab导航、拖放效果、表格排序、导航、拖放效果、表格排序、DataGridDataGrid、树形菜单、图像、树形菜单、图像 特效以及特效以及AjaxAjax上传等。上传等。 导入导入jQueryjQuery框架文件方法如下：框架文件方法如下：引入引入jQueryjQuery框架文件之后便可在页面脚本中调用框架文件之后便可在页面脚本中调用jQueryjQuery对象、方法或属性，并对象、方法或属性，并 以以jQueryjQuery特色语法规范来编写脚本。特色语法规范来编写脚本。1 jQuery技术框架概述练习练习 引入引入jqueryj
5、query库库 传统的加载传统的加载1 jQuery技术框架概述导入导入jQueryjQuery框架文件方法如下：框架文件方法如下： src=“js/jquery.js“ 引入引入jQueryjQuery框架文件之后便可在页面脚本中框架文件之后便可在页面脚本中 调用调用jQueryjQuery对象、方法或属性，并以对象、方法或属性，并以jQueryjQuery 特色语法规范来编写脚本。特色语法规范来编写脚本。19.2 jQuery构造器构造器是jQuery框架的内核（core），它犹如JavaScript语言的构造函数（ Function）。构造器由jQuery()函数（可简写为$()）负责实
6、现。该函数是整个 jQuery框架的核心，jQuery中的一切操作都构建于这个函数之上。jQuery()函数 可以接收四种类型的参数： 1. jQuery(expression,context)：根据CSS选择器字符串在页面中匹配一组元 素，或者利用context参数指定匹配的范围。 2. jQuery(html)：根据HTML标记字符串，动态创建由jQuery对象包装的DOM 元素。 3. jQuery(elements)：将一个或多个DOM对象转化为jQuery对象。 4. jQuery(callback)：$(document).ready()的简写。允许绑定一个在DOM文档 加载完毕之
7、后执行的函数。19-1.html、19-2.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.2 jQuery构造器jQuery对象与DOM对象是两个不同的概念。它们不能够相互调用，jQuery对象 只能够使用jQuery定义的方法和属性，而DOM也只能够使用DOM组件和 JavaScript定义的方法和属性。因此，在调用对象的方法和属性时，你应该清 楚它属于什么对象。当然，你可以通过一定的方法转换这两种对象。对于普通的DOM对象来说，如 果要转换为jQuery对象，则使用jQuery()函数即可。例如，在下面代码中 document.getElementsByTagNam
8、e(“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基本
9、用法19.3.1 访问jQuery对象上节已经介绍过，jQuery对象是一个集合。要访问这个集合，除了使用索引值 以外，我们可以使用jQuery定义的几个方法和属性。each(callback) each(callback)方法实际是JavaScript集合遍历的一种功能包装，它以jQuery对 象内的集合元素为遍历对象，并循环执行指定的函数。在循环体内的函数中， this关键字都会自动指向当前元素，且会自动向函数体内传递元素的索引值（ 从0开始）。19-8.html、 19-9.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.1 访问j
10、Query对象size()和length size()方法能够返回jQuery对象中元素的个数，而length属性与size()方法功能 相同。19-10.htmlget()和get(index) get()方法能够把jQuery对象转换为DOM中的元素集合。19-11.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.1 访问jQuery对象index(subject) 获取jQuery对象中指定元素的索引值。如果找到了匹配的元素，从0开始返回； 如果没有找到匹配的元素，返回-1。19-12.html样吧视频教室（ ）网页制作与网站开发从
11、入门到精通配套视频19.3 jQuery基本用法19.3.2 访问DOM对象的属性使用jQuery函数能够很轻松的操控页面内元素，同时也很方便控制元素的属 性。这主要依赖下面几个方法：attr(name)：根据属性名（name参数），获取jQuery对象中第一个元素的对应 属性值。 19-13.htmlattr(key,value)：为jQuery对象定义属性并赋值。 19-14.htmlattr(key,fn)： 我们还可以为传递的属性值设置为一个函数，通过函数计算所得的值来为属性 赋值。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.2 访问
12、DOM对象的属性attr(properties)：为jQuery对象同时定义多个属性。多个属性以名/值对的形式 组成对象进行参数传递。 19-16.htmlremoveAttr(name)：该方法能够移出jQuery对象内指定属性。 19-17.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.3 访问DOM样式类类样式实际上是一种特殊的属性（class）来进行设置。不过jQuery为此定义了 3个方法专门用来控制样式类。其中主要包括增加类、删除类和开关类，具体 说明如下。 如果要为元素增加样式类，可以使用addClass(class)方法
13、。 19-18.html当然我们也可以使用attr()方法定义类样式，此时是把它看作一个普通的属性进 行增加，代码如下： $(“p”).attr(“class”,“red”); 如果要删除样式类，则可以使用removeClass(class)方法，具体用法就不再举 例，同样也可以使用removeAttr(name)方法来删除样式类。另外，jQuery还自定义了一个toggleClass(class)方法。它如同一个开关，如果 元素已经定义了指定样式类，则会删除该样式类，否则增加该样式类。巧用这 个方法，你可以很轻松的设计鼠标移过或单击时动态改变元素样式的效果。 19-19.html样吧视频教室
14、（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.4 访问DOM元素包含信息访问元素包含的信息可以使用text()方法获取。 19-20.html反过来，我们也可以为text()传递文本字符串，则将自动为元素添加指定文本字 符串，同时会自动删除该元素包含的已有文本。 19-21.html请注意，text()和text(val)方法能够读写jQuery对象所有匹配元素的内容。结果 是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML 文档都有效。 如果你希望获取段落中包含的所有内容（包括标签结构），则可以使用html() 方法。 19-22.
15、html同理，如果希望在段落中插入图像，而不是“”字符串，则可以使用如下方法，这样所插入的字符串就不被编码 ，而直接插入到文档结构中。 19-23.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.4 访问DOM元素包含信息请注意，html()和html(val)方法只作用于jQuery对象中第一个元素，也就是说只 能够读写第一个元素内的HTML源代码，且不能用于XML文档，仅适用于 XHTML文档。 text()和html()方法能够读写元素包含的信息和HTML源代码，但是如何读写表 单域中的值却存在一定的问题。 19-24.htmljQuery定义了val()方法。该方法专门用来读写表单值而定义的。 19-25.html对于多选列表框，则可以获取多个值。 19-26.html样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频19.3 jQuery基本用法19.3.4 访问DOM元素包含信息如果在val()附带参数，则可以为每一个匹配的元素设置值。在jQuery 1.2,中也 可以为select元素赋值。例如，在下面示例中，脚本将自动为文本框赋值为“文 本框的值”。 19-27.html当
