深入理解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 03 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现弹幕特效
Nov 29 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在线生成ico文件的代码
2007/10/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
利用python实现周期财务统计可视化
2019/08/25 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
教师绩效考核方案
2014/01/21 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
美术毕业生求职信
2014/02/25 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python