深入理解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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现增删改查
Dec 22 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 cookie名使用点号(句号)会被转换
2014/10/23 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
js生成随机数之random函数随机示例
2013/12/20 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
微信小程序 教程之WXML
2016/10/18 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python多进程原理与用法分析
2018/08/21 Python
Django之腾讯云短信的实现
2020/06/12 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
中层干部岗位职责
2013/12/18 职场文书
简单的辞职信范文
2014/01/18 职场文书
十佳护士获奖感言
2014/02/18 职场文书
满月酒主持词
2014/03/27 职场文书
捐书倡议书
2014/08/29 职场文书
合作经营协议书范本
2014/09/16 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书