深入理解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实现下拉菜单的实例代码
Jun 19 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
jQuery 动态粒子效果示例代码
Jul 07 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中计算程序运行时间的类代码
2012/11/03 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
对Python信号处理模块signal详解
2019/01/09 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
员工培训邀请函
2014/02/02 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
培训通知书模板
2015/04/17 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书