jQuery.fn的作用是什么
转自:http://blog.csdn.net/z69183787/article/details/17766703
jQuery.fn的作用是什么:
在自定义jQuery插件中,会经常见到jQuery.fn的身影,下面就简单介绍一下它的作用到底是什么。
想要认识它的本质,最好的办法直接看jQuery的源码,否则一切都是根据现象进行的猜测,难免出现失误。
jQuery1.83中的代码如下:
1
2
3
|
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
|
jQuery.extend(deep, target, object1,object2,.. objectN)
|
参数列表:
参数 | 描述 |
deep | 可选。如果设为true,则递归合并。 |
target | 可选。待修改对象。 |
object1 | 待合并到第一个对象的对象。 |
objectN | 可选。待合并到第一个对象的对象。 |
如果不指定target,则给jQuery命名空间本身进行扩展。
如果第一个参数设置为true,则jQuery返回一个深层次的副本,递归地复制找到的任何对象。否则的话,副本会与原对象共享结构。
未定义的属性将不会被复制,然而从对象的原型继承的属性将会被复制。
代码实例:
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类即可引用,例如:
1
2
|
$.extend({minValue:function(a,b){return a<b?a:b;}})
$.minValue(5.6);
|
一般也可以把这类函数称作为工具函数,它们不直接操作DOM元素,而是操作Javascript的非元素对象,或者执行其他非对象的特定操作。
更多相关$.extend() 函数的用法可以参阅 $.extend()函数用法详解 一章节。
二.$.fn.extend():
此方法则是用来扩展jQuery的实例方法,也就是说jQuery类的实例对象可以调用此函数,代码如下:
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的作用是什么相关推荐
- jquery的$.extend和$.fn.extend作用及区别(—)
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...
- jQuery源码-jQuery.fn.each jQuery.each
先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 $('div').each(function(index, elem){$(this).addClass('red'); ...
- Jquery源码中的Javascript基础知识(四)— jQuery.fn.init方法
$() 即调用了jQuery.fn.init方法 jQuery = function( selector, context ) {return new jQuery.fn.init( selector ...
- [jQuery] jquery.extend与jquery.fn.extend的区别?
[jQuery] jquery.extend与jquery.fn.extend的区别? 1.认识jQuery extend()和jQuery.fn.extend()jQuery的API手册中,exte ...
- jQuery.fn和jQuery.prototype区别。
近期在读jQuery的源码. 发现这里有个东西很难理解. 这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQu ...
- jQuery.fn是什么意思?
这里的fn是什么意思? jQuery.fn.jquery #1楼 fn实际上是指jquery prototype . 此行代码在源代码中: jQuery.fn = jQuery.prototype = ...
- 理解一下jQuery.extend()和jQuery.fn.extend()方法
为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法. 1. jQuery.extend() 方法有一个重载. jQuery.extend( ...
- jQuery.extend与jQuery.fn.extend的区别
jQuery.extend 对jQuery对象的扩展,可以理解为静态方法,不需要实例jQuery就可以使用. <script type="text/javascript"&g ...
- jQuery.extend与jQuery.fn.extend的区别分析与实例
jQuery.extend与jQuery.fn.extend都是为jquery开发插件. 不同是的: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQu ...
最新文章
- 【Linux】一步一步学Linux——Linux版本(03)
- ERWin 7.1 和7.2 的官方FTP下载地址
- [信息安全] 3.HTTPS工作流程
- nsis 修改exe执行权限
- 猎聘 大街_大街开放时
- Fiddler如何捕捉DefaultHttpClient的HTTP请求
- 《图解算法》第九章之动态规划
- 地理信息系统教程(汤国安)——重点总结
- 基于java高德地图经纬度转详细地址和GPS坐标转换为高德地图坐标
- 【批处理】快速批量修改特定文件夹的文件名
- OpenCV Python 图像矩阵的均值和标准差
- php全角符号转半角,php如何实现全角符号转半角
- 六一儿童节 | TcaplusDB祝大小朋友节日快乐
- 怼人神器(Windows)
- Java实现就诊排队叫号系统(使用ArrayList集合实现)
- markdown写作教程总结
- 乐华娱乐CEO杜华揭秘:捧红王一博 与孙一丁是配偶同居关系
- 9款高质量学习软件,原来学霸都是这么炼成的!
- 浅谈 MySQL 连表查询
- 计算机组装与维修教学重点,计算机组装与维修教学大纲.pdf