JQuery中$.fn、$.extend、$.fn.extend小记

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>

时间: 2024-11-05 17:19:21

JQuery中$.fn、$.extend、$.fn.extend小记的相关文章

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

bootstrap form-group和form-control 如何行内布局,如何水平布局. jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类本身: $.fn.extend(object);扩展jQuery对象: 一.$.fn $.fn 等于 $.prototype:这样就好理解了,就好比对String.porotype增加一个函数,然后所有

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

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

jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//-. //-- }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦. 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1″) 会生成一个 jQuery类的实例. jQuery.ext

jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. jQuery.fn = jQuery.prototype = { init: function( selector, cont

jquery,fn,extend和jquery.extend

1 把jquery看成是一个类,jquery.extend()是扩展这个类的静态方法,也即是扩展的全局函数,扩展的方法只跟这个类本身有关,跟具体的jquery这个类的实例化对象无关. 例如:$.each(); 2 jquery.fn.extend扩展的是jquery原型对象的方法,扩展的方法只有jquery这个类的实例对象才能使用. 例如:$('#aa').eat();

juqery.fn.extend和jquery.extend

jquery.fn == jquery.prototype //true jquery.extend( obj1,obj2 ) 用一个或多个对象来拓展一个对象,返回拓展之后的对象 var aaa = { a:1, b:2 } var bbb = { a:3, b:4, c:5 } $.extend(aaa,bbb); //aaa=bbb={ a:3, b:4, c:5 } 对jquery.fn进行拓展,就是为jquery类添加"成员函数":jquery的实例可以使用这个函数.像$('d

jQuery原生框架中的jQuery.fn.extend和jQuery.extend

extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的,而区分这两个 extend 方法是理解 jQuery 的很关键的一部分.先看结论: 1)jQuery.extend(object) 为扩展 jQuery 类本身,为类添加新的静态方法: 2)jQuery.fn.extend(ob

jquery源码笔记(四): jquery.extend=jquery.fn.extend

extend()  方法,   合并两个或更多对象的属性到第一个对象中,jQuery后续的大部分功能都通过该函数扩展, 当参数只有一个对象时,则将对象的属性添加到jQuery对象中. jquery 中扩展插件的形式:  2种方法 $.extend({ //扩展工具方法 aaa:function(){ alert(10); }, bbb:function(){ alert(20) } }); $.fn.extend({ //扩展jquery实例方法 aaa:function(){ alert("f

jQuery $.extend $.fn.extend

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="te