RIA应用开发：8-jQuery插件概述.ppt

第八章 jQuery插件概述 回顾 XMLHttpRequest对象 从服务器加载数据 load() 、$.get()、$.getJSON( ) 、$.getScript( ) 向服务器发送数据 $.post( ) Ajax请求与事件 $.ajax() 学习目标 了解jQuery插件的种类 了解jQuery插件机制 掌握jQuery插件的定义 掌握插件的参数定义 掌握插件的创建 使用jQuery插件 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。 封装全局函数的插件：将独立的函数加到jQuery命名空间下。 例：jQuery.ajax()方法、jQuery.getJSON()方法 封装对象方法的插件：将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作。 例：parent()方法、appendTo()方法等 插件的基本要点 所有的全局函数都应当附加到jQuery对象本身上；所有的对象方法都应当附加到jQuery.fn对象上。 jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。 在插件内部，this指向的是当前通过选择器获取的jQuery对象。可以通过this.each来遍历所有元素。 所有的方法或函数插件都应当以分号结尾，否则压缩的时候可能出现问题。 jQuery的插件机制 jQuery提供了两个用于扩展jQuery功能的方法 jQuery.extend():用来扩展封装全局函数的插件 jQuery.fn.extend():用来扩展封装对象方法的插件 参数Object对象的“名/值对”分别代表“函数或方法名/函数主体” 封装全局函数的插件 添加一个新的全局函数 jquery.test.js jQuery.foo = function() { alert('This is a test. This is only a test.'); }; ex1.html $.foo(); 注：在ex1.html中，先引入jquery的库文件，再引入自定义的插件。 封装全局函数的插件 使用jQuery.extend(object) jquery.test2.js jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); ex2.html var min=$.min(2,3); alert("The Smaller is "+min); 封装对象方法的插件 形式一： jQuery.fn.msg=function(){ alert("You click here!"); }; 形式二： jQuery.fn.extend({ msg:function(){ alert("click here!"); } }); ex3.html $("div").msg(); 对象方法的环境 在任何插件方法内部，关键字this引用的都是当前的jQuery对象。可以在this上调用任何内置的jQuery方法，或者提取它包含的DOM节点并操作该节点。 使用jQuery选择符可能会选取多个元素，“当前的jQuery对象”可能是一个元素、多个元素或零个元素。 可以使用each方法来迭代每个元素，在each方法内部，使用this对每个DOM元素进行引用。 方法连缀 使用jQuery对象方法的时候，基本都能使用连缀的方式。我们使用插件的时候就必须为插件方法返回一个jQuery对象。 返回的jQuery对象通常就是this所引用的对象，如果我们使用.each()迭代遍历this，那么可以只返回迭代的结果。 方法的参数 传递给任何方法最重要的参数是this。如果想让我们定义的插件尽可能的好用，可以为插件提供参数。 方法的参数 方法的参数 jQuery.extend()方法除了可以用于扩展jQuery对象之外，还可以用于扩展已有的Object对象。 jQuery.extend(target,obj1……[objN]) 用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。 jQuery的插件机制 jQu