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