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>

【JavaScript】JQuery中$.fn、$.extend、$.fn.extend的更多相关文章

  1. jquery中方法扩展 ($.fn & $.extend) 学习笔记

    A.$.fn 1.$.fn.method() 函数为jQuery对象扩展一个属性和方法(主要用于扩展方法) :method 为自定义方法名 ($.fn 等效 $.prototype) $.fn.bor ...

  2. jQuery.fn.extend() 与 jQuery.extend()

    jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...

  3. 理解jQuery的$.extend与$.fn.extend

    https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...

  4. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  5. WHAT?【 $.fn.extend() 】vs【 $.extend() 】

    废话不多说,干货来了,转自http://www.cnblogs.com/hellman/p/4349777.html (function($){ $.fn.extend({ test:function ...

  6. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  7. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

  8. jQuery插件的开发之$.extend(),与$.fn.extend()

        jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...

  9. 理解jquery的$.extend()、$.fn和$.fn.extend()

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

随机推荐

  1. 高效查看MySQL帮助文档的方法

    在mysql的使用过程中, 可能经常会遇到以下问题: 某个操作语法忘记了, 如何快速查找? 如何快速知道当前版本上某个字段类型的取值范围? 当前版本都支持哪些函数?希望有例子说明.. 当前版本是否支持 ...

  2. 一个python爬虫小程序

    起因 深夜忽然想下载一点电子书来扩充一下kindle,就想起来python学得太浅,什么“装饰器”啊.“多线程”啊都没有学到. 想到廖雪峰大神的python教程很经典.很著名.就想找找有木有pdf版的 ...

  3. Silverlight开源项目与第三方控件收集

    http://easysl.codeplex.com/ http://compositewpf.codeplex.com/ http://silverlight.codeplex.com/releas ...

  4. Worm.Win32.DownLoader.ns病毒主进程新式输入法注入分析(IME Inject)

    1.病毒会在system32目录生成一个以tmp结尾的随机数命名的文件. 2.然后挂钩HOOK本进程空间的imm32.dll导出的ImmLoadLayout函数和ntdll.dll导出的ZwQuery ...

  5. Winfrom中ListBox绑定List数据源更新问题

    Winfrom中ListBox绑定List数据源更新问题 摘自:http://xiaocai.info/2010/09/winform-listbox-datasource-update/ Winfr ...

  6. 常用库nuget包集合

    ColorConsole htmlagilitypack.1.4.9.5 经测试效率比 CsQueryLaster 高 csvhelper Extend Devlib系列一套 itextsharp l ...

  7. Ajax学习资源大全[本来是转载的,但是现在我增加了很多]

    本欲放转载区,但是这样一文章放那里基本是没有用的,帮助不了任何人!所以放新手了!! 我一般非经典或者自己用不上不转载,所以如果你不幸看见了的话,恰恰你又对AJAX有兴趣的话不防看下,也许对你有用的!! ...

  8. 如何提高码农产量,基于ASP.NET MVC的敏捷开发框架开发随笔一

    公司业务量比较大,接了很多项目,为了缩短开发周期老板让我牵头搭建了一个敏捷开发框架. 我们主要的业务是做OA.CRM.ERP一类的管理系统,一个通用的后台搭出来,再配合一些快速开发的组件开发效率能提高 ...

  9. Jquery Validation 多按钮,多表单,分组验证

    真正做到了 多按钮的验证. 在用户输入的时候就可以验证,而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证. 研究了两天终于弄出来了,不知道两天是过长还是过段,现在分享给小伙伴们. 小伙伴们支持 ...

  10. 验证坐标在某片坐标区域内 php 代码

    之前碰到的这样一个需求,要将公司的服务范围在地图中显示出来,并将用户每天的访问坐标进行统计看有多少用户是在所能达到的服务范围半径内. 以下是PHP代码的实现 (仅验证坐标在某片坐标区域内) <? ...