Web开发肯定要使用第三方插件，对于一个炫丽的效果都忍不住想看看对方是如何实现的，刚下载了一个仿京东商品鼠标经过时局部放大的插件。看了两眼JQuery源码，看看就感觉一头雾水。JQuery本来自己学的就半吊子，再加智商又不惊人。。。当开发插件的时候难免会使用$.fn与$.extend。原来看到这个时候非常抵触，今天再次看到的时候简单的查了查外加一个Demo实验了一下。以下为几分钟补脑后的小记，如有错误请大神急时指出以免误导他人。
进入正题：
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的理解是相当于给一个Object对象添加了一个扩展方法（PS：个人观点）
2、$.extend
其实他和$.fn是非常相似的，详细做Web的人大部分都用过$.ajax、$.get等方法，而这个$.extend就是用来添加自定义”静态”方法的。例如：
<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】有什么区别，那我只能说“我母鸡耶。。。”！我测试了一下他与$.fn.【UserDefinitionName】都能实现Object对象的扩展方法。原因我不清楚。不过还是贴出这个的代码吧
<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空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
