深入理解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插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 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
如何将数据从文本导入到mysql
2006/10/09 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js快速排序的实现代码
2013/12/08 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
js继承实现方法详解
2016/12/16 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
js实现随机点名功能
2020/12/23 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python批量制作雷达图的实现方法
2016/07/26 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python集合操作方法详解
2020/02/09 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
党的群众路线对照检查材料
2014/08/27 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
排查MySQL生产环境索引没有效果
2022/04/11 MySQL