jQuery插件制作之全局函数用法实例

原文地址:http://www.jb51.net/article/67056.htm

本文实例讲述了jQuery插件制作之全局函数用法。分享给大家供大家参考。具体分析如下:

1、添加新的全局函数

所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数

(1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性。

jQuery.five =function(){
alert("直接继承方式不一样");
}

调用:

$.five();

(2)添加多个函数

jQuery.five =function(){
alert("直接继承方式不一样");
}
jQuery.six =function(){
alert("直接继承方式不一样2");
}

调用:

$.five();$.six();

以上的方法会面临命名空间冲突的风险,为避免这个问题,最好把属于这个插件的所有全局函数,都封装到一个对象中,如下:

//命名空间继承
jQuery.myPlugin ={
one : function(obj){
var object = obj;
var id = object.attr("id");
alert(id);
},
two : function(){
alert(22);
}
}

这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.

2、添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象的方法提供的。

jQuery.fn.myMethod= function(){
alert(11);
}

调用:

$.fn.myMethod();

注意:jQuery.fn是jQuery.prototype的别名。

实例:以下是行为不正确的方法

<ul>
<li>11111111111111111111111111</li>
<liclass="this">22222222222222222222</li>
<li>333333333333333</li>
<liclass="that">44444444444444444</li>
<liclass="this">55555555555555</li>
<li>6666666666666666</li>
<li>777777777777777777</li>
<liclass="that">777777777777777777</li>
</ul>
<inputtype="button" value="swap" id="swap" />
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

依次引用的是每个DOM元素.以上代码修改为:

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);
}
})
}

调用:

$("li").swapClass("this","that")

(2)方法的连缀

要使用方法的连缀,必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。

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);
}
})
}

调用:

$("li").swapClass("this","that").css("text-decoration","underline");

3、添加新的简写方法

//添加新的简写方法
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"
},speed,callback)
}
jQuery.fn.slideFadeToggle= function(speed,callback){
return this.animate({
height : "toggle",
opacity : "toggle"
},speed,callback)
}
上一篇:在VIM中进行快速的查找和替换


下一篇:[Bzoj3675][Apio2014]序列分割(斜率优化)