《RIA应用开发：8-jQuery插件概述》由会员分享，可在线阅读，更多相关《RIA应用开发：8-jQuery插件概述（26页珍藏版）》请在金锄头文库上搜索。
1、第八章第八章 jQuery插件概述插件概述RIA应用开发应用开发jQuery插件概述插件概述回顾回顾XMLHttpRequest对象从服务器加载数据load() 、$.get()、$.getJSON( ) 、$.getScript( ) 向服务器发送数据$.post( ) Ajax请求与事件$.ajax()RIA应用开发应用开发jQuery插件概述插件概述学习目标学习目标了解jQuery插件的种类了解jQuery插件机制掌握jQuery插件的定义掌握插件的参数定义掌握插件的创建使用jQuery插件RIA应用开发应用开发jQuery插件概述插件概述插件的种类插件的种类编写插件的目的是给已经有的一
2、系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。封装全局函数的插件：封装全局函数的插件：将独立的函数加到jQuery命名空间下。 例：jQuery.ajax()方法、jQuery.getJSON()方法封装对象方法的插件：封装对象方法的插件：将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作。 例：parent()方法、appendTo()方法等RIA应用开发应用开发jQuery插件概述插件概述插件的基本要点插件的基本要点所有的全局函数都应当附加到jQuery对象本身上；所有的对象方法都应当附加到jQuery.fn对象上。jQuery插件的文件名推
3、荐命名为jquery.插件名.js,以免和其他JavaScript库插件混淆。在插件内部，this指向的是当前通过选择器获取的jQuery对象。可以通过this.each来遍历所有元素。所有的方法或函数插件都应当以分号结尾，否则压缩的时候可能出现问题。RIA应用开发应用开发jQuery插件概述插件概述jQuery的插件机制的插件机制jQuery提供了两个用于扩展jQuery功能的方法jQuery.extend():用来扩展封装全局函数的插件jQuery.fn.extend():用来扩展封装对象方法的插件参数Object对象的“名/值对”分别代表“函数或方法名/函数主体”RIA应用开发应用开发j
4、Query插件概述插件概述封装全局函数的插件封装全局函数的插件添加一个新的全局函数jquery.test.js jQuery.foo = function() alert(This is a test. This is only a test.); ; ex1.html $.foo();注：在ex1.html中，先引入jquery的库文件，再引入自定义的插件。RIA应用开发应用开发jQuery插件概述插件概述封装全局函数的插件封装全局函数的插件使用jQuery.extend(object)jquery.test2.js jQuery.extend( min: function(a, b) re
5、turn a b ? a : b; );ex2.html var min=$.min(2,3); alert(The Smaller is +min);RIA应用开发应用开发jQuery插件概述插件概述封装对象方法的插件形式一： jQuery.fn.msg=function() alert(You click here!); ;形式二： jQuery.fn.extend( msg:function() alert(click here!); );ex3.html $(div).msg();RIA应用开发应用开发jQuery插件概述插件概述对象方法的环境对象方法的环境在任何插件方法内部，关键字t
6、his引用的都是当前的jQuery对象。可以在this上调用任何内置的jQuery方法，或者提取它包含的DOM节点并操作该节点。使用jQuery选择符可能会选取多个元素，“当前的jQuery对象”可能是一个元素、多个元素或零个元素。可以使用each方法来迭代每个元素，在each方法内部，使用this对每个DOM元素进行引用。jQuery.fn.extend(msg:function() this.each(function()alert( the DIV text is: + $(this).text(); ); );RIA应用开发应用开发jQuery插件概述插件概述方法连缀方法连缀使用jQu
7、ery对象方法的时候，基本都能使用连缀的方式。我们使用插件的时候就必须为插件方法返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象，如果我们使用.each()迭代遍历this，那么可以只返回迭代的结果。RIA应用开发应用开发jQuery插件概述插件概述方法的参数方法的参数传递给任何方法最重要的参数是this。如果想让我们定义的插件尽可能的好用，可以为插件提供参数。RIA应用开发应用开发jQuery插件概述插件概述方法的参数方法的参数RIA应用开发应用开发jQuery插件概述插件概述方法的参数方法的参数jQuery.extend()方法除了可以用于扩展jQuery对象之
8、外，还可以用于扩展已有的Object对象。jQuery.extend(target,obj1objN) 用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。RIA应用开发应用开发jQuery插件概述插件概述jQuery的插件机制的插件机制jQuery.extend()方法经常被用于设置插件方法的一系列默认参数：RIA应用开发应用开发jQuery插件概述插件概述方法的参数方法的参数RIA应用开发应用开发jQuery插件概述插件概述插件中的闭包插件中的闭包闭包：允许使用内部函数（函数定义和函数表达式位于另一个函数的函数体内），而且这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参
9、数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。利用闭包的特性，既可以避免临时变量影响全局空间，又可以在插件内部继续使用$做为jQuery的别名。RIA应用开发应用开发jQuery插件概述插件概述插件中的闭包插件中的闭包RIA应用开发应用开发jQuery插件概述插件概述插件通用框架插件通用框架RIA应用开发应用开发jQuery插件概述插件概述插件要点插件要点RIA应用开发应用开发jQuery插件概述插件概述综合应用综合应用例1：定义插件实现表格的隔行变色，鼠标悬停时高亮显示。$(document).ready(function() $(table).table(););RIA应用开发应用开发jQuery插件概述插件概述综合应用综合应用RIA应用开发应用开发jQuery插件概述插件概述综合应用综合应用例2：网页选项卡 $(function () $(.tab).tab(switchingMode:mouseenter); ); RIA应用开发应用开发jQuery插件概述插件概述综合应用综合应用RIA应用开发应用开发jQuery插件概述插件概述图片放大插件图片放大插件$(function() $(.jqzoom).jqzoom(););RIA应用开发应用开发jQuery插件概述插件概述总结总结插件的创建插件的使用
