深入理解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之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jquery自定义组件实例详解
Dec 31 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
JavaScript之自定义类型
2012/05/04 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
基于python实现把图片转换成素描
2019/11/13 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
三孔导游词
2015/02/05 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2015年党总支工作总结
2015/05/25 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
国际贸易实训总结
2015/08/03 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
Python中常见的导入方式总结
2021/05/06 Python
浅谈Web Storage API的使用
2021/06/23 Javascript
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python+pyaudio实现音频控制示例详解
2022/07/23 Python