jQuery外掛程式解析

最後更新：2016-11-12 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：等於 utf-8 ret 解析 class nbsp 靜態 str function

簡單的外掛程式demo

 //sample:擴充jquery對象的方法，bold()用於加粗字型。        (function ($) {            $.fn.extend({                "bold": function () {                    ///<summary>                    /// 加粗字型                    ///</summary>                    return this.css({ fontWeight: "bold" });                }            });        })(jQuery);
調用
$(function(){
  $.("p").bold();
});

為了方便使用者建立外掛程式，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

jQuery.extend()

一、類層級（$.extend）

類層級你可以理解為拓展jquery類，最明顯的例子是$.ajax(...),相當於靜態方法。

開發擴充其方法時使用$.extend方法，即jQuery.extend(object);

jQuery.extend(object) ,一個參數的用於擴充jQuery類本身，也就是用來在jQuery類/命名空間上增加新函數，或者叫靜態方法，例如jQuery內建的 ajax方法都是用jQuery.ajax()這樣調用的，有點像 “類名.方法名” 靜態方法的調用方式。下面我們也來寫個jQuery.extend(object)的例子：

//擴充jQuery對象本身        jQuery.extend({            "minValue": function (a, b) {                ///<summary>                /// 比較兩個值，返回最小值                ///</summary>                return a < b ? a : b;            },            "maxValue": function (a, b) {                ///<summary>                /// 比較兩個值，返回最大值                ///</summary>                return a > b ? a : b;            }        });        //調用        var i = 100; j = 101;        var min_v = $.minValue(i, j); // min_v 等於 100        var max_v = $.maxValue(i, j); // max_v 等於 101

二、對象層級

對象層級則可以理解為基於對象的拓展，如$("#table").changeColor(...); 這裡這個changeColor呢，就是基於對象的拓展了。

開發擴充其方法時使用$.fn.extend方法，即jQuery.fn.extend(object);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>

$(function(){
//定義一閉包個地區防止外掛程式汙染
(function($){
//使用jq外掛程式機制的擴充方法$.fn.extend()編寫外掛程式
$.fn.extend({
"bold":function(){
return this.css(‘fontWeight‘,‘bold‘);
},
"bkred":function(){
return this.css(‘background‘,‘red‘);
},
"size_a":function(options){
var options=$.extend(defanlts,options||{});//預設參數和傳參進行合并
this.css({
‘width‘:options.width,
‘height‘:options.height
});
return this;//為了可以鏈式調用，需要把對象返回，否則報錯
}
});
//設定預設值-預設參數
var defanlts = {
‘width‘:‘100px‘,
‘height‘:‘100px‘
};
})($);

$(".p").bold().css(‘fontSize‘,‘50px‘).css(‘margin‘,0);
$(".p").bkred().on(‘click‘,function(){
alert(‘我是p元素‘)
});
$("#box").size_a({‘width‘:300,‘height‘:200}).on(‘click‘,function(){
$(this).css(‘background‘,‘red‘);
});
});
</script>
</head>

如有不解請參考http://jingyan.baidu.com/album/e75aca85550216142edac63b.html?picindex=1

http://www.cnblogs.com/joey0210/p/3408349.html#

jQuery外掛程式解析

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery外掛程式解析

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support