深入理解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中attr与prop的区别详解
May 27 jQuery
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
详解jquery和vue对比
Apr 16 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
JQuery animate动画应用示例
May 14 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery实现上传文件进度条
Mar 26 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
新浪新闻小偷
2006/10/09 PHP
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
php文件上传的两种实现方法
2016/04/04 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
django基础学习之send_mail功能
2019/08/07 Python
简单了解Python write writelines区别
2020/02/27 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
幼师专业求职推荐信
2013/11/08 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
李培根演讲稿
2014/05/22 职场文书
公司年底活动方案
2014/08/17 职场文书
商场父亲节活动方案
2014/08/27 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书