jquery中自定義插件開發(fā)教程

字號(hào):


    一、全局函數(shù)的擴(kuò)展
    全局函數(shù)是將獨(dú)立的函數(shù)添加到JQuery的命名空間中區(qū)。在使用的時(shí)候,可以通過$.fucnName(param)或者jQuery.funcName(param)方式進(jìn)行調(diào)用。
    1、直接在JQuery上添加:在jQuery上添加一個(gè)全局函數(shù)sayHello
    代碼如下:
    jQuery.sayHello=function(name)
    {
    alert(name+"您好");
    };
    調(diào)用方式:
    代碼如下:
    jQuery.sayHello("張子涵");
    //或者用$.sayHello("張子涵");
    2、jQuery.extend():其作用是用一個(gè)或者多個(gè)對(duì)象來擴(kuò)展一個(gè)對(duì)象,返回被擴(kuò)展的對(duì)象。
    2.1 jQuery.extend(dsc,src1,src2…):將src1,src2擴(kuò)展到dsc對(duì)象,并返回?cái)U(kuò)展后的dsc對(duì)象(合并對(duì)象)
    2.2 jQuery.extend(object):對(duì)jQuery命名空間本身進(jìn)行擴(kuò)展,結(jié)果就是在jQuery命名空間上增加函數(shù)。
    代碼如下:
    //在jQuery命名空間上增加兩個(gè)函數(shù)。
    jQuery.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
    });
    調(diào)用方式
    代碼如下:
    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
    二、對(duì)象方法的擴(kuò)展
    對(duì)象方法的擴(kuò)展可以讓所有jQuery對(duì)象調(diào)用的方法。
    1、jQuery.fn
    代碼如下:
    //在jQuery對(duì)象上添加sayHello方法
    jQuery.fn.sayHello=function(name)
    {
    alert(name+"您好");
    }
    調(diào)用
    $("div").sayHello("dwqs");
    2、jQuery.fn.extend
    擴(kuò)展 jQuery 元素集來提供新的方法(通常用來制作插件)。
    代碼如下:
    //增加兩個(gè)插件方法。
    jQuery.fn.extend({
    check: function() {
    return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
    return this.each(function() { this.checked = false; });
    }
    });
    調(diào)用:
    $("input[type=checkbox]").check();
    $("input[type=radio]").uncheck();