深入理解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实现点击关注和取消功能
Jul 03 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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语法(5)
2006/10/09 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python采集微信公众号文章
2018/12/20 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python 实现字符串下标的输出功能
2020/02/13 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
毕业生求职自荐信怎么写
2014/01/08 职场文书
毕业设计计划书
2014/01/09 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
敬老月活动总结
2014/08/28 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
宣传委员竞选稿
2015/11/19 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技