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

[HTML] 纯文本查看 复制代码运行代码
1
2
3
jQuery.fn = jQuery.prototype = {
   //代码
}

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

[HTML] 纯文本查看 复制代码运行代码
1
jQuery.fn.extend(object)

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

[HTML] 纯文本查看 复制代码运行代码
1
jQuery.extend(object);

以上代码可以为jQuery"类"添加方法，当然js中并没有类这个概念，不过就是那个意思。
相关阅读:
1.jQuery.extend()函数可以参阅jQuery.extend()方法一章节。

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

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

[HTML] 纯文本查看 复制代码运行代码
1
jQuery.extend(deep, target, object1,object2,.. objectN)

参数列表:

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

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

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<!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类即可引用，例如:

[HTML] 纯文本查看 复制代码运行代码
1
2
$.extend({minValue:function(a,b){return a<b?a:b;}})
$.minValue(5.6);

一般也可以把这类函数称作为工具函数，它们不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作。
更多相关$.extend()函数的用法可以参阅$.extend()函数用法详解一章节。
二.$.fn.extend():
此方法则是用来扩展jQuery的实例方法，也就是说jQuery类的实例对象可以调用此函数，代码如下:

[HTML] 纯文本查看 复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<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")就是一个对象实例，这样它就可以调用添加的方法，当然在实际的开发中，几乎不可能有这么简单的例子，这里只是讲述一下原理。

jQuery.fn的作用是什么的更多相关文章

  1. jQuery - jQuery的$.extend和$.fn.extend作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...

  2. jquery的$.extend和$.fn.extend作用及区别.txt

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); (1)类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax ...

  3. jquery的$.extend和$.fn.extend作用及区别

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); (1)类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax ...

  4. jquery的$.extend和$.fn.extend作用及区别/用span实现进度条/腾讯云IIS端口号修改

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...

  5. jquery.fn.extend() 与 $.jquery 作用及区别

    原文:http://www.cnblogs.com/liu-l/p/3928373.html jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax()这种,要不就是拓展 ...

  6. jQuery中 $.extend 和 $.fn.extend 作用及区别

    jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 虽然 javascript没有明确的类的概念,但是可以构建类似类的 ...

  7. 区别和详解：jQuery extend()和jQuery.fn.extend()

    1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...

  8. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  9. jQuery源码-dom操作之jQuery.fn.text

    写在前面 jQuery.fn.text在jQuery是个使用频率比较高的接口,它的作用无非是设置/获取dom节点的内容文本,下文会通过几个简单的例子来说明.text()接口的使用,以及最后会对源码进行 ...

随机推荐

  1. 房上的猫：HTML5基础

    一.W3C标准 1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior) 2)不很严谨的 ...

  2. Spark源码剖析（八）：stage划分原理与源码剖析

    引言 对于Spark开发人员来说,了解stage的划分算法可以让你知道自己编写的spark application被划分为几个job,每个job被划分为几个stage,每个stage包括了你的哪些代码 ...

  3. 使用Python批量下载ftp服务器中的内容

    使用ftplib,轻松实现从ftp服务器上下载所需要的文件,包括目录结构等,支持了一下断点续传 from ftplib import FTP import sys import os import r ...

  4. Python学习_13_继承和元类

    继承 继承的含义就是子类继承父类的命名空间,子类中可以调用父类的属性和方法,由于命名空间的查找方式,当子类中定义和父类同名属性或者方法时,子类的实例调用的是子类中的属性,而不是父类,这就形成了pyth ...

  5. js基础查漏补缺（更新）

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  6. spring boot RESTFul API拦截 以及Filter和interceptor 、Aspect区别

    今天学习一下RESTFul api拦截 大概有三种方式 一.通过Filter这个大家很熟悉了吧,这是java规范的一个过滤器,他会拦截请求.在springboot中一般有两种配置方式. 这种过滤器拦截 ...

  7. 小子给大家分享一个或者多个新手创建tableview经常会遇到的坑（动态创建控件，xib的重用）

    小子最近做了一个根据接口返回的数据在Cell中动态创建控件,感觉应该会一部分人卡在这里,小子就跟大家分享一下: 1.控件重复创建:这个问题出现的原因是动态创建的cell内容的时候,无法进行重用设置,所 ...

  8. YDKJS:作用域与闭包

    作用域与闭包 什么是作用域 编译器 理解作用域 嵌套的作用域 词法作用域 词法分析时 欺骗词法作用域 函数与块作用域 函数中的作用域 隐藏标识符于普通作用域 函数作为作用域 块作为作用域 提升 先有鸡 ...

  9. es6 模板字变量和字符串占位符

    开发者一直在寻找一种创建多行字符串的形式,但要使用单引号双引号字符串一定要在同一行才行. 老办法: 还有其他办法,虽然能实现,但是太啰嗦 es6模板自变量 使用反撇好(`)替换了单双引号 反撇好中的所 ...

  10. Android 服务_笔记

    Service服务 服务(Service)是Android中的四大组件之一,适用于开发无界面.长时间运行的应用功能,服务是在后台运行,服务的创建与Activity类似,只需要继承Service和在An ...