jquery編寫插件的方法

1類級別開發插件

//1.直接給jquer添加全局函數
jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法。extend是jquery提供的一個方法，把多個對象合併起來，參數是object
jQuery.extend({ myAlert2:function (str1) { alert(str1); }, myAlert3:function () { alert(11111); } }); //必定要注意兩種類級別編寫插件方式書寫的區別。

//3.使用命名空間(若是不使用命名空間容易和其餘引入的JS庫裏面的同名方法衝突)
jQuery.yuqing={ myAlert4:function (str) { alert(str); }, centerWindow:function (obj) { obj.css({ 'top':($(window).height()-obj.height())/2,
            'left':($(window).width()-obj.width())/2
 }); //必須進行返回對象的操做，不然就不能繼續往下進行鏈式操做了。。
        return obj; } }; //調用自定義插件方法
  $('#btn').click(function () { $.myAlert('我是調用jquery編寫的插件彈出的警告框'); $.myAlert2('我是調用jquery的extend()方法編寫的插件彈出的警告框'); $.myAlert3(); $.yuqing.myAlert4("調用使用了命名空間編寫的插件方法"); }); $.yuqing.centerWindow($('#div1')).css('background','red');

2對象級別開發插件

對象級別能夠理解爲對jquery對象添加新的方法，基本結構以下：

(function($){     $.fn.名稱=function(參數對象){         //具體代碼
    } })(jquery);

而咱們在使用的時候，結構以下： 

$("div").名稱();

下面來看一個簡單的具體實例：

(function($){     $.fn.changeColor=function(d){         this.css('background-color',d);     } })(jQuery);

html

<div id="tab">
    <ul id="nav">
        <li class="active">HTML</li>
        <li>CSS</li>
        <li>JAVASCRIPT</li>
    </ul>
    <div id="cont">
        <div style="display: block;">HTML</div>
        <div>CSS</div>
        <div>JAVASCRIPT</div>
    </div>
</div>

css

* { margin: 0; padding: 0;
} #nav li { list-style: none; float: left; height: 25px; line-height: 25px; border: 1px solid #0000FF; border-bottom: none; padding: 5px; margin: 10px; margin-bottom: 0;
} #cont div { width: 210px; height: 150px; border: 1px solid #0000FF; margin-left: 10px; clear: both; display: none;
} .active { background: #AFEEEE;
}

js引用

<script type="text/javascript"> $('#tab').tab({ tabType: 'mouseover' }); </script>

插件代碼

;(function($) { $.fn.tab = function(options) { var defaults = { tabActiveClass: 'active', tabNav: '#nav>li', tabCont: '#cont>div', tabType: 'click' }; var endOptions = $.extend(defaults, options); $(this).each(function() { var _this = $(this); _this.find(endOptions.tabNav).bind(endOptions.tabType, function() { $(this).addClass(endOptions.tabActiveClass).siblings().removeClass(endOptions.tabActiveClass); var index = $(this).index(); _this.find(endOptions.tabCont).eq(index).show().siblings().hide(); }); }); }; })(jQuery);

轉自http://www.javashuo.com/article/p-kqwolzbo-s.html