深入理解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 extend()详解及简单实例
May 06 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery实现动态操作table行
Nov 23 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
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
基于python实现对文件进行切分行
2020/04/26 Python
python是怎么被发明的
2020/06/15 Python
Linux文件系统类型
2012/02/15 面试题
韩国商务邀请函
2014/01/14 职场文书
电钳工人个人求职信
2014/05/10 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
2014最新实习证明模板
2014/10/02 职场文书
升职自荐信范文
2015/03/27 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
Mysql Online DDL的使用详解
2021/05/20 MySQL