jQuery外掛程式寫法

標籤：

jQuery核心的方法有兩個：

1、$.extend(object)可以理解為jQuery添加一個靜態方法。
2、$.fn.extend(object)可以理解為jQuery執行個體添加一個方法。

基本的使用

$.extend({        fun1: function() {            alert(11);        }    })    $.fun1();    $.fn.extend({        fun2: function() {            alert(22);        }    })    $(this).fun2();    //等同於    $.fn.fun3 = function() {        alert(33);    }    $(this).fun3();

jQuery(function() {})與(function($) {})(jQuery)的區別

1、jQuery(function() {})相當於$(document).ready(function() {})當dom元素載入完成執行的方法

2、(function($) {})(jQuery)相當於

var fun = function($) {};
fun(jQuery);

定義了一個匿名函數，其中jQuery代表了這個函數實參。通常用在jQuery外掛程式開發中，起到了定義外掛程式的私人域作用。

 

<div id="link"><a href="#" >jQuery</a></div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
//step01 定義JQuery的範圍(function($) {    var defaults = {   //step01 定義JQuery的範圍        animatePadding: 20,        hoverColor: "#f90"    };//在外掛程式裡定義方法    var showLink = function(obj) {        $(obj).append("2222");    }    //step02 外掛程式的擴充方法名稱    $.fn.paddingSlide = function(options) {        var options = $.extend(defaults, options);//step03-b 合并使用者自訂屬性，預設屬性        //step4 支援JQuery選取器$(this) this        //step5 支援鏈式調用return 這樣的定義才能支援連結調用。比如支援這樣的調用：$("#fixed-floor").paddingSlide().css(‘‘, ‘‘);        return this.each(function() {//this-->jquery對象 $(this)用於dom對象，            var obj = $(this);            var item = $("a", obj);            item.hover(function() {                $(this).css("color", options.hoverColor);                $(this).stop().animate({paddingLeft: options.animatePadding}, 500);                showLink(this);            },function() {                $(this).css("color", "");                $(this).stop().animate({paddingLeft: 0}, 500);            });        })    };})(jQuery);

$(function() {
    $("#link").paddingSlide();
})
</script>

 

jQuery外掛程式寫法