深入理解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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery实现鼠标拖动图片功能
Mar 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高级编程-函数-郑阿奇
2011/07/04 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Python 实现向word(docx)中输出
2020/02/13 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
原装进口全世界:天猫国际
2016/08/03 全球购物
.net面试题
2016/09/17 面试题
中间件的定义
2016/08/09 面试题
最新销售员个人自荐信
2013/09/21 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
党支部鉴定意见
2015/06/02 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
导游词之镜泊湖
2019/12/09 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python