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


Posted in jQuery onJuly 08, 2017

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend();

jQuery.extend();

jQuery.fn

jQuery.fn = jQuery.prototype = {init: function( selector, context ) {//….//……};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object)

为jQuery类添加类方法,可以理解为添加静态方法。如:

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // 2 
jQuery.max(4,5); // 5
Objectj Query.extend( target, object1, [objectN])

用一个或多个其他对象来扩展一个对象,返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options); //结果:settings == { validate: true, limit: 5, name: "bar" }
jQuery.fn.extend(object);

对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

$.fn.extend({     
  alertWhileClick:function() {      
     $(this).click(function(){         
         alert($(this).val());      
      });      
   }    
});    
$("#input1").alertWhileClick(); // 页面上为:  
$("#input1") //为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的 prototype里去,这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于
var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery );

以上这篇深入理解jquery的$.extend()、$.fn和$.fn.extend()就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现简单三级联动效果
Sep 05 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
使用 jQuery 实现表单验证功能
Jul 05 #jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 #jQuery
You might like
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
node使用request请求的方法
2019/12/20 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
浅谈Python中range和xrange的区别
2017/12/20 Python
Python 忽略warning的输出方法
2018/10/18 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
python各种excel写入方式的速度对比
2020/11/10 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
自我评价范文点评
2013/12/04 职场文书
护士演讲稿范文
2014/01/05 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年路政工作总结
2014/12/10 职场文书
自考生自我评价
2019/06/21 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Java字符串逆序方法详情
2022/03/21 Java/Android
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers