Jquery中文網 www.4271936.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery插件教程

jQuery插件教程

發布時間:2016-09-16   編輯:www.4271936.live
jquery中文網為您提供jQuery插件教程等資源,歡迎您收藏本站,我們將為您提供最新的jQuery插件教程資源

jquery插件的分類

jQuery插件有很多,有UI類,表單驗證,輸入類,特效類,Ajax類,滑動類,導航類,工具類,動畫類等等。

jQuery的插件主要分為三類:

1、封裝對象方法的插件:也就是基于某個DOM元素的jQuery對象,局部性
2、封裝全局函數的插件:將獨立的函數添加到jquery的命名空間之下。jquery.trim()就是jquery內部作為全局函數的插件添加到內核上去的。
3、選擇器插件:擴充自己喜歡的一些選擇器。類似于.toggle()

插件的基本要點

 1. 插件的文件名推薦為 jquery.[插件名].js,例如jquery.validate.js
 2. 所有的對象方法都應當附加到jQuery.fn對象上,而所有的全局函數都應當附加到jQuery對象本身上
 3. 在插件內部,this指向的是當前通過選擇器獲取的jQuery對象,而不像一般的方法那樣,例如click()方法,內部的this指向的是DOM元素
 4. 可以通過this.each來遍歷所有元素
 5. 所有的方法或函數插件,都應當以分號結尾,否則壓縮時可能出問題,有的為了更加穩妥些,在插件的開始處加上一個分號
 6. 插件應該返回一個jQuery對象,這樣可以保證插件的可鏈式操作。除非插件需要返回的是一些需要獲取的量,例如字符串或者數組等
 7. 盡量利用閉包技巧歷來避免變量名的沖突
 8. 引入的自定義插件必須在jQuery庫后面

插件開發方式

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

通過$.extend()來擴展jQuery
通過$.fn 向jQuery添加新的方法
通過$.widget()應用jquery ui的部件工廠方式創建

通常我們使用第二種方法來進行簡單插件開發,而第一種方法是在jQuery命名空間上添加了一個靜態方法,并不能讓我們選中DOM元素,然后再調用該方法。而第三種并不常用,也較為復雜

插件的結構

在開始編寫jQuery插件時,我們有必要了解一下插件的基本結構,所有的jQuery插件都聲明為jQuery.fn對象的方法:

jQuery.fn.showPlugin = function () {
      //code here
};

我們使用如下代碼使用插件:

$("#plugin").showPlugin();

這里,我并沒有使用$,這是為了避免命名沖突,如果要用 $ 的話,可以像下面這樣把插件代碼封裝在一個自執行的匿名函數中,然后傳入參數jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend()允許你使用一個或多個對象擴展基準對象,擴展的方式是依序將右邊的對象合并到基準對象(左邊第一個對象)。

;(function($){
    $.extend({
        'nav' : function () {

        }
    })
})(jQuery);

我們通過如下方法使用該全局方法:

$.nav();

前面(見:淺析jQuery整體框架與實現(上))我們說過,$.extend是全局性的,而$.fn.extend是局部性的,前面之所以要加分號是因為為了防止在此之前引入的js文件沒有加分號

$.fn.myPlugin = function() {
    //在這里面,this指的是用jQuery選中的元素
    //example :$('a'),則this=$('a')
    this.css('color', 'red');
}

this指代jQuery選擇器返回的集合。在插件里的this,經過了一些封裝處理,this就是表示jQuery對象。而不需要再次使用$()進行包裝了

鏈式調用

要讓插件實現鏈式調用只需要return該對象即可:

$.fn.myPlugin = function() {
    this.css('color', 'red');
    return this.each(function() {
        //對每個元素進行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

使用return this.each(function () {} 這樣就實現了我們的鏈式操作。

接收多個參數

$.fn.myPlugin = function(options) {    //經常用options表示有多個參數。
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

調用時,字體大小會運用插件里的默認值:

$('a').myPlugin({
    'color': '#2C9929'
});

您可能感興趣的文章:
推薦40個非常優秀的jQuery插件和教程【系列三】
40款非常棒的jQuery 插件和制作教程(系列二)
JQuery 插件模板 制作jquery插件的朋友可以參考下
JQuery插件fancybox無法在彈出層使用左右鍵的解決辦法
40款非常棒的jQuery 插件和制作教程(系列一)
Jquery插件編寫簡明教程
20個非常棒的 jQuery 幻燈片插件和教程分享
jQuery插件開發基礎簡單介紹
25個非常棒的jQuery滑塊插件和教程小結
jquery插件開發注意事項小結

[關閉]
微信下载APP完成任务如何赚钱 股票融资是啥 福彩幸运农场手机版软件 甘肃11选五开奖中3个号 彩经网甘肃十一选五走势图 安徽快3遗漏号 祥富金融 浙江6十1开奖号码查询 中国体彩开奖竞彩网 股票配资平台排名 11旺娱乐城网上百家乐