本文实例讲述了jQuery插件制作之全局函数用法。分享给大家供大家参考。具体分析如下：
所谓的全局函数，实际上就是jQuery对象的方法，但从实践的角度上看，他们是位于jQuery命名空间内部的函数
(1)添加一个函数，只需要将新函数指定为jQuery对象的一个属性。
rush:js;">
jQuery.five =function(){
alert("直接继承方式不一样");
}
调用：
代码如下:
rush:js;">
jQuery.five =function(){
alert("直接继承方式不一样");
}
jQuery.six =function(){
alert("直接继承方式不一样2");
}
调用：
代码如下:
以上的方法会面临命名空间冲突的风险，为避免这个问题，最好把属于这个插件的所有全局函数，都封装到一个对象中，如下：
rush:js;">
//命名空间继承
jQuery.myPlugin ={
one : function(obj){
var object = obj;
var id = object.attr("id");
alert(id);
},two : function(){
alert(22);
}
}
这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.
rush:js;">
jQuery.fn.myMethod= function(){
alert(11);
}
调用：
代码如下:
注意：jQuery.fn是jQuery.prototype的别名。
实例：以下是行为不正确的方法
rush:xhtml;">
- 11111111111111111111111111
- 333333333333333
- 6666666666666666
- 777777777777777777
rush:js;">
jQuery.fn.swapClass= function(class1,class2){
if(this.hasClass(class1)){
this.removeClass(class1).addClass(class2);
}
if(this.hasClass(class2)){
this.removeClass(class2).addClass(class1);
}
}
$("#swap").click(function(){
$("li").swapClass("this","that");
return false;
})
全部li都是用了that样式。
(1)隐士迭代
要在无论匹配多个元素的情况下都保证行为的正确，最简单的方法是始终在方法的环境上调用.each()方法，这样就会
执行隐士迭代，而执行隐士迭代对于维护插件和内置方法的一致性是至关重要的，在调用的.each()方法内部，this
rush:js;">
jQuery.fn.swapClass= function(class1,class2){
this.each(function(){
var $element = jQuery(this);
if($element.hasClass(class1)){
$element.removeClass(class1).addClass(class2);
}else if($element.hasClass(class2)){
$element.removeClass(class2).addClass(class1);
}
})
}
调用：
代码如下:
(2)方法的连缀
要使用方法的连缀，必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。
rush:js;">
jQuery.fn.swapClass= function(class1,class2){
return this.each(function(){
var $element = jQuery(this);
if($element.hasClass(class1)){
$element.removeClass(class1).addClass(class2);
}else if($element.hasClass(class2)){
$element.removeClass(class2).addClass(class1);
}
})
}
调用：
代码如下:
decoration","underline");
rush:js;">
//添加新的简写方法
jQuery.fn.slideFadeOut= function(speed,callback){
return this.animate({
height : "hide",opacity : "hide"
},speed,callback)
}
jQuery.fn.slideFadeIn= function(speed,callback){
return this.animate({
height : "show",opacity : "show"
},callback)
}
jQuery.fn.slideFadetoggle= function(speed,callback){
return this.animate({
height : "toggle",opacity : "toggle"
},callback)
}
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jQuery实时显示日期、时间 html: <span id="...
jQuery 添加水印 <script src="../../../.....
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...