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