jQuery插件開發

jQuery插件開發方式主要有三種:

  • 1、通過$.extend()來擴展jQuery

  • 2、通過$.fn 向jQuery添加新的方法

  • 3、通過$.widget()應用jQuery UI的部件工廠方式創建

通常我們使用第二種方法來進行簡單插件開發,說簡單是相對于第三種方式。第三種方式是用來開發更高級jQuery部件的,

而第一種方式又太簡單,僅僅是在jQuery命名空間或者理解成jQuery身上添加了一個靜態方法而以。

所以我們調用通過.extend()符號調用($.myfunction())

而不需要選中DOM元素($(“#example”).myfunction())。

請看下面的例子。

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name: 'world') + '!');
    }
})
$.sayHello(); //調用$.sayHello('itmyhome'); //帶參調用12345671234567

運行結果

這里寫圖片描述

上面代碼中,通過.extend()jQuerysayHello,直接調用。到此你可以認為我們

已經完成了一個簡單的jQuery插件了。但如你所見,這種方式用來定義一些輔助方法是比較方便的。

比如一個自定義的console,輸出特定格式的信息,定義一次后可以通過jQuery在程序中任何需要的地方調用它。

$.extend({
    log: function(message) {
        var now = new Date(),
            y = now.getFullYear(),
            m = now.getMonth() + 1, //!JavaScript中月分是從0開始的
            d = now.getDate(),
            h = now.getHours(),
            min = now.getMinutes(),
            s = now.getSeconds(),
            time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;
        console.log(time + ' My App: ' + message);
    }
})
$.log('initializing...'); //調用12345678910111213141234567891011121314

運行結果

這里寫圖片描述

但這種方式無法利用jQuery強大的選擇器帶來的便利,要處理DOM元素以及將插件更好地運用于所選擇的元素身上,

還是需要使用第二種開發方式。你所見到或使用的插件也大多是通過此種方式開發。

插件開發

码报开奖结果本期 www.iwqgw.icu 下面我們就來看第二種方式的jQuery插件開發。

基本方法

先看一下它的基本格式:

$.fn.pluginName = function() {
    //your code goes here}123123

基本上就是往$.fn上面添加一個方法,名字是我們的插件名稱。然后我們的插件代碼在這個方法里面展開。

比如我們將頁面上所有P標簽顏色轉成紅色,則可以這樣寫這個插件:

<ul> 
   <li> 
      <p title="one">我是第一行</p> 
   </li> 
   <li> 
      <p title="two">我是第二行</p>
   </li> 
   <li>
      <p title="three">我是第三行</p>
   </li> 
   <li>
      <span> 我是span標簽不是p標簽哦 </span>
   </li> </ul>12345678910111213141234567891011121314
$.fn.myPlugin = function() {
   //在這里面,this指的是用jQuery選中的元素
   //example :$('p'),則this=$('p')
   this.css('color', 'red');
}

$(function() {
   $('p').myPlugin();
})123456789123456789

運行結果

這里寫圖片描述

下面進一步,在插件代碼里處理每個具體的元素,而不是對一個集合進行處理,這樣我們就可以針對每個元素進行相應操作。

我們已經知道this指代jQuery選擇器返回的集合,那么通過調用jQuery的.each()方法就可以處理合集中的每個元素了,但此刻

要注意的是,在each方法內部,this指帶的是普通的DOM元素了,如果需要調用jQuery的方法那就需要用$來重新包裝一下。

比如現在我們要在每個P標簽后面顯示title屬性的值,首先通過each遍歷所有P標簽,然后獲取title屬性的值再加到文本后面。

更改后我們的插件代碼為:

$.fn.myPlugin = function() {
   //在這里面,this指的是用jQuery選中的元素
   //example :$('p'),則this=$('p')
   this.css('color', 'red');   this.each(function() {
   //對每個元素進行操作
      $(this).append(' ' + $(this).attr('title'));
   })
}1234567891012345678910

運行結果

這里寫圖片描述

下面開始jQuery插件編寫中一個重要的部分,參數的接收。

支持鏈式調用

我們都知道jQuery一個非常優雅的特性是支持鏈式調用,選擇好DOM元素后可以不斷地調用其他方法。

要讓插件不打破這種鏈式調用,只需return一下即可。

$.fn.myPlugin = function() {
   //在這里面,this指的是用jQuery選中的元素
   //example :$('p'),則this=$('p')
   this.css('color', 'red');   return this.each(function() {
   //對每個元素進行操作
      $(this).append(' ' + $(this).attr('title'));
   })
}1234567891012345678910

讓插件接收參數

我們不想讓其只變成紅色,讓插件接收參數可以自定義顏色和其他屬性

$.fn.myPlugin = function(options) {
   var defaults = {      'color' : 'red',      'fontSize' : '15px'
   };   var settings = $.extend(defaults, options);   return this.css( {      'color' : settings.color,      'fontSize' : settings.fontSize
   });
}123456789101112123456789101112

現在,我們調用的時候指定顏色,字體大小未指定,會運用插件里的默認值15px。

$('p').myPlugin( {   'color' : '#668B8B'});123123

運行結果

這里寫圖片描述

同時指定顏色與字體大?。?/p>

$('p').myPlugin( {   'color' : '#668B8B',   'fontSize': '20px'});12341234

這里寫圖片描述

?;ず媚喜問?/strong>

注意到上面代碼調用extend時會將defaults的值改變,這樣不好,因為它作為插件因有的一些東西應該維持原樣,

另外就是如果你在后續代碼中還要使用這些默認值的話,當你再次訪問它時它已經被用戶傳進來的參數更改了。

一個好的做法是將一個新的空對象做為$.extend的第一個參數,defaults和用戶傳遞的參數對象緊隨其后,

這樣做的好處是所有值被合并到這個空對象上,?;ち瞬寮錈嫻哪現?。

$.fn.myPlugin = function(options) {
   var defaults = {      'color' : 'red',      'fontSize' : '15px'
   };   var settings = $.extend({},defaults, options);   return this.css( {      'color' : settings.color,      'fontSize' : settings.fontSize
   });

}

來源:CSDN

上一篇: 5個提高Node.js應用性能的技巧

下一篇: 為什么優秀的程序員既懶又笨!

分享到: 更多
香港刘伯温三肖 扑克三公游戏下载 手机炸金花怎么才能赢 鱼丸游戏有没有收金币的 时时彩技巧论坛 时时彩在线全天计划 3码期期必中 三分快三免费计划软件下载 北京时时是官方的吗 赛车北京pk10现场直播 北京pk赛车精准计划 重庆时时彩2期计划网页 重庆时时历史开奖记录 二人斗地主下载 mg4355电子游戏线路检测 大赢家即时比分