Web開發(fā)肯定要使用第三方插件，對于一個炫麗的效果都忍不住想看看對方是如何實現(xiàn)的，剛下載了一個仿京東商品鼠標(biāo)經(jīng)過時局部放大的插件。看了兩眼JQuery源碼，看看就感覺一頭霧水。JQuery本來自己學(xué)的就半吊子，再加智商又不驚人。。。當(dāng)開發(fā)插件的時候難免會使用$.fn與$.extend。原來看到這個時候非常抵觸，今天再次看到的時候簡單的查了查外加一個Demo實驗了一下。以下為幾分鐘補(bǔ)腦后的小記，如有錯誤請大神急時指出以免誤導(dǎo)他人。
進(jìn)入正題：
1、$.fn.【UserDefinitionName】（PS：UserDefinitionName為自定義的方法名稱）
$.fn是指JQuery的命名空間，加上fn上的方法及屬性，會對JQuery實例每一個都有效。例如：
<script type="text/javascript">
$.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
$(document).ready(function () {
$("#btn").sayhello(); // btn為Button的Id
});
</script>
注：我對$.fn的理解是相當(dāng)于給一個Object對象添加了一個擴(kuò)展方法（PS：個人觀點）
2、$.extend
其實他和$.fn是非常相似的，詳細(xì)做Web的人大部分都用過$.ajax、$.get等方法，而這個$.extend就是用來添加自定義”靜態(tài)”方法的。例如：
<script type="text/javascript">
$.fn.sayhello= function () { alert('提示：$.fn.sayhello');};
$.extend({
sayChinese: function () { alert('提示：世界、你好！');},
sayEnglish: function () { alert('Message：Hello World !');}
});
$(document).ready(function () {
$("#btn").sayhello();
$.sayChinese();
$.sayEnglish();
});
</script>
3、$.fn.extend
如果你要問我這個與$.fn.【UserDefinitionName】有什么區(qū)別，那我只能說“我母雞耶。。。”！我測試了一下他與$.fn.【UserDefinitionName】都能實現(xiàn)Object對象的擴(kuò)展方法。原因我不清楚。不過還是貼出這個的代碼吧
<script type="text/javascript">
$.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
$.extend({
sayChinese: function () { alert('提示：世界、你好！');},
sayEnglish: function () { alert('Message：Hello World !');}
});
$.fn.extend({
objectMethod: function () { alert('提示：$.fn.extend'); }
});
$(document).ready(function () {
$("#btn").sayhello();
$.sayChinese();
$.sayEnglish();
$("#btn").objectMethod();
});
</script>
4、$.【UserDefintionName】
這個與$.extend如出一轍，如果硬要讓我說他倆不同點那只能說寫法不通了
<script type="text/javascript">
$.fn.sayhello = function () {alert('提示：$.fn.sayhello'); };
$.extend({
sayChinese: function () { alert('提示：世界、你好！');},
sayEnglish: function () { alert('Message：Hello World !');}
});
$.fn.extend({
objectMethod: function () { alert('提示：$.fn.extend'); }
});
$.CodeMonkey = function () {alert('CodeMonkey是神！');};
$(document).ready(function () {
$("#btn").sayhello();
$.sayChinese();
$.sayEnglish();
$("#btn").objectMethod();
$.CodeMonkey();
});
</script>
PS：下載地址中只貼出HTML文件，JQuery腳本自己下載吧。把上面的JS引用替換成你的JQuery文件路徑即可！
| 
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
