jQuery插件制作之全局函數(shù)用法實例
本文實例講述了jQuery插件制作之全局函數(shù)用法。分享給大家供大家參考。具體分析如下：
1、添加新的全局函數(shù)
所謂的全局函數(shù)，實際上就是jQuery對象的方法，但從實踐的角度上看，他們是位于jQuery命名空間內(nèi)部的函數(shù)
(1)添加一個函數(shù)，只需要將新函數(shù)指定為jQuery對象的一個屬性。
jQuery.five =function(){
alert("直接繼承方式不一樣");
}
調(diào)用：
(2)添加多個函數(shù)
jQuery.five =function(){
alert("直接繼承方式不一樣");
}
jQuery.six =function(){
alert("直接繼承方式不一樣2");
}
調(diào)用：
以上的方法會面臨命名空間沖突的風(fēng)險，為避免這個問題，最好把屬于這個插件的所有全局函數(shù)，都封裝到一個對象中，如下：
//命名空間繼承
jQuery.myPlugin ={
one : function(obj){
var object = obj;
var id = object.attr("id");
alert(id);
},
two : function(){
alert(22);
}
}
這樣其實是為全局函數(shù)創(chuàng)建了另一個命名空間:jQuery.myPlugin.
2、添加jQuery對象方法
jQuery中大多數(shù)內(nèi)置的功能都是通過其對象的方法提供的。
jQuery.fn.myMethod= function(){
alert(11);
}
調(diào)用：
注意：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)隱士迭代
要在無論匹配多個元素的情況下都保證行為的正確，最簡單的方法是始終在方法的環(huán)境上調(diào)用.each()方法，這樣就會
執(zhí)行隱士迭代，而執(zhí)行隱士迭代對于維護(hù)插件和內(nèi)置方法的一致性是至關(guān)重要的，在調(diào)用的.each()方法內(nèi)部，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);
}
})
}
調(diào)用：
(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);
}
})
}
調(diào)用：
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)
}
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery resize event監(jiān)聽DOM元素大小變化 ,即可以綁定window以外的元素大小的變化，支持回調(diào)函數(shù)！2016-02-02
jquery使用FormData實現(xiàn)異步上傳文件
這篇文章主要為大家詳細(xì)介紹了jquery使用FormData實現(xiàn)異步上傳文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
jQuery form插件的使用之處理server返回的JSON， XML，HTML數(shù)據(jù)
這篇文章主要介紹了jQuery form插件的使用之處理server返回的JSON， XML，HTML數(shù)據(jù) 的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了HTML5中用js、jQuery結(jié)合Ajax實現(xiàn)文件上傳功能，HTML5中已經(jīng)可以用Ajax上傳文件了，而且代碼簡單，借助 FormData類即可發(fā)送文件數(shù)據(jù)，感興趣的小伙伴們可以參考一下2016-04-04
jQuery已經(jīng)被廣泛使用，憑借其簡潔的API，對DOM強(qiáng)大的操控性，易擴(kuò)展性越來越受到web開發(fā)人員的喜愛，我在社區(qū)也發(fā)布了很多的jQuery插件2009-07-07
本篇文章給大家分享了關(guān)于JQuery元素查找與操作的相關(guān)技巧和流程，對此有需要的朋友可以跟著學(xué)習(xí)參考下。2018-04-04
Lazy Load是一個用 JavaScript 編寫的jQuery插件. 它可以延遲加載長頁面中的圖片. 本文對它進(jìn)行實例介紹，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
checkbox是復(fù)選框如何將其變?yōu)閱芜x呢？下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每一個有效，下面有個不錯的示例，喜歡的朋友可以參考下2013-11-11
jQuery EasyUI API 中文文檔 - Dialog對話框
jQuery EasyUI API 中文文檔 - Dialog對話框使用說明，需要的朋友可以參考下。2011-11-11