深入理解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实现图片平滑滚动详解
Mar 22 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery treeview树形结构应用
Mar 24 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 MYSQL 数据备份类
2009/06/19 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP解决中文乱码
2017/04/28 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
对javascript继承的理解
2016/10/11 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python操作MySQL模拟银行转账
2018/03/12 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
函授本科毕业自我鉴定
2013/10/09 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
配件采购员岗位职责
2013/12/03 职场文书
老师自我鉴定范文
2013/12/25 职场文书
财务简历的自我评价
2014/03/05 职场文书
廉洁教育学习材料
2014/05/19 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
实验心得体会范文
2016/01/25 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android