2015-10-20

jQuery.fn的作用是什么

jQuery.fn的作用是什么:

在自定义jQuery插件中，会经常见到jQuery.fn的身影，下面就简单介绍一下它的作用到底是什么。
想要认识它的本质，最好的办法直接看jQuery的源码，否则一切都是根据现象进行的猜测，难免出现失误。

jQuery1.83中的代码如下:

jQuery.fn
 = jQuery.prototype = {

   //代码

}

由上面的代码可以清晰的看出jQuery.fn执行jQuery的原型对象。
明白了上面的道理也可以有助于对其他函数的理解，例如

1	jQuery.fn.extend(object)

以上代码可以为jQuery对象添加方法，可以和以下方法一起学习:

1	jQuery.extend(object);

以上代码可以为jQuery”类”添加方法，当然js中并没有类这个概念，不过就是那个意思。

1.jQuery.extend()函数可以参阅jQuery.extend()方法一章节。

2.jQuery.fn.extend()函数可以参阅$.extend()和$.fn.extend()区别一章节。

jquery.extend()方法的定义和用法:

此方法用一个或多个其他对象来扩展一个对象，并返回被扩展的对象。
这有助于插件作者为jQuery增加新方法。
语法结构:

1 2	jQuery.extend(deep, target, object1,object2,.. objectN)

参数列表:

参数	描述
deep	可选。如果设为true，则递归合并。
target	可选。待修改对象。
object1	待合并到第一个对象的对象。
objectN	可选。待合并到第一个对象的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
代码实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author"	content="http://www.softwhy.com/"/>

<title>$.extend()用法详解-蚂蚁部落</title>

<script	type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  var settings={validate:false,limit:5,name:"foo"};

  var options={validate:true,name:"bar"};

  $.extend(settings,options);

  $.each(settings,function(i,n){

    alert("Item#" + i + ":"+ n);

  })

})

</script>

</head>

<body>

</body>

</html>

注意:运行编辑器之后，再按F5刷新网页即可查看演示。

$.extend()和$.fn.extend()用法和区别:

在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数，无论从外观还是作用都非常的类似，但是实际上它们的区别是巨大的，下面就简单介绍一下它们的区别是什么。
在JavaScript中，没有尽管没有类这个概念，但是作为一门面向对象的语言，其实是有着类似于类的实际应用，那么从标准面向对象的概念来说，jQuery就是一个封装好了的jQuery类，那么通过选择器获得的就是jQuery对象实例。

一.$.extend():

此方法是用来扩展jQuery类，它所方法是全局性，直接用jQuery类即可引用，例如:

$.extend({minValue:function(a,b){return
 a<b?a:b;}})

$.minValue(5.6);

一般也可以把这类函数称作为工具函数，它们不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作。
更多相关$.extend()函数的用法可以参阅$.extend()函数用法详解一章节。

二.$.fn.extend():

此方法则是用来扩展jQuery的实例方法，也就是说jQuery类的实例对象可以调用此函数，代码如下:

<script type="text/javascript">

$(document).ready(function(){

   $.fn.extend({

   theAlert:function(){

      alert("自定义的函数");

    }

  })

  $("thediv").theAlert()

})

</script>

</head>

<body>

  <div id="thediv">按钮</div>

</body>

</html>

以上代码通过$.fn.extend()方法为jQuery扩展一个实例方法，那么就必须要用对象实例来调用此方法，$(“thediv”)就是一个对象实例，这样它就可以调用添加的方法，当然在实际的开发中，几乎不可能有这么简单的例子，这里只是讲述一下原理。

赏

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦