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