深入理解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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现简单QQ聊天框
Aug 27 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中的数组操作函数整理
2008/08/18 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
node.js读取文件到字符串的方法
2015/06/29 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
layui表格实现代码
2017/05/20 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
在pycharm中显示python画的图方法
2019/08/31 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
2014信息公开实施方案
2014/02/22 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
勇敢的心观后感
2015/06/09 职场文书
婚育证明格式
2015/06/17 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
JavaScript执行机制详细介绍
2021/12/06 Javascript
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏