jQuery為開發(fā)插件提拱了兩個方法棋蚌,分別是:
jQuery.fn.extend();
jQuery.extend();
雖然 javascript沒有明確的類的概念嫁佳,但是可以構(gòu)建類似類的定義。
jQuery便是一個封裝得非常好的類谷暮,比如蒿往,$("#btn1") 會生成一個 jQuery類的實例,理解這一點很重要湿弦。
所以簡單說
jQuery.extend()為擴展jQuery類本身.為類添加新的方法瓤漏。
jquery.fn.extend(object);給jQuery對象添加方法。
(1). jQuery.extend(object);
jQuery.extend()颊埃,是擴展的jQuery這個類蔬充。
假設(shè)我們把jQuery這個類看成是人類,能吃飯能喝水能跑能跳班利,現(xiàn)在我們用jQuery.extend這個方法給這個類拓展一個能唱歌的技能娃惯。這樣的話,不論是男人肥败,女人,xx人.....等能繼承這個技能(方法)了愕提。
可以如下圖這樣寫著:
jQuery.extend({
liu: function(){
alert('liu');
}
});
然后:
**$.liu();
**這樣就能打印出來”liu“這個字符串測試代碼如下:
<!doctype html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
(function($) {
$.extend({
liu: function(){
alert('liu');
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$.liu();
});
</script>
</head>
<body></body>
</html>
這說明啥啊馒稍,這說明.liu()變成了jQuery這個類本身的方法(object)嘛。他現(xiàn)在能”唱歌“了浅侨。
但是吧纽谒,這個能力啊,只有代表全人類的 jQuery 這個類本身如输,才能用啊鼓黔。你個人想用央勒,你張三李四王五麻六,你個小草民能代表全人類嘛澳化?
所以啊崔步,這個擴展也就是所謂的靜態(tài)方法。只跟這個 類 本身有關(guān)缎谷。跟你具體的實例化對象是沒關(guān)系滴井濒。
我們再看看jQuery.fn.extend()這個方法。
從字面理解嘛列林,這個拓展的是jQuery.fn的方法瑞你。
jQuery.fn是啥玩意呢?
源碼里是這么寫的:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//….
//……
};
哦希痴,原來
**jQuery.fn=jQuery.prototype
**者甲,就是原型啊。
那就一目了然了砌创,jQuery.fn.extend拓展的是jQuery對象(原型的)的方法奥哺住!
對象是啥纺铭?就是類的實例化嘛寇钉,例如
$("#abc")
這個玩意就是一個實例化的jQuery對象嘛。
那就是說舶赔,jQuery.fn.extend拓展的方法扫倡,你得用在jQuery對象上面才行啊竟纳!他得是張三李四王五痳六這些實例化的對象才能用啊撵溃。
說白了就是得這么用(假設(shè)xyz()是拓展的方法):
$('selector').xyz();
你要是這么用$.xyz();是會出錯誤滴锥累。例子源碼如下:
<!doctype html>
<html lang="zh-cmn-Hans-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
(function($) {
$.fn.extend({
liu: function(){
alert('liu');
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function() {
$('div').liu();
});
</script>
</head>
<body>
<div></div>
</body>
</html>
和上邊的區(qū)別區(qū)別一目了然吧缘挑?
其實吧,jQuery.extend()這個方法桶略,主要是用來拓展個全局函數(shù)啦语淘,例如$.ajax()這種,要不就是拓展個選擇器啦际歼,例如$.fn.each()惶翻,當(dāng)選擇器用。
**大部分插件都是用jQuery.fn.extend()鹅心。
**