深入理解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实现div跟随鼠标移动
Aug 20 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery中库的引用方法
Jan 06 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
9种方法优化jQuery代码详解
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在Web开发领域的优势
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
php实现文件上传基本验证
2020/03/04 PHP
ie focus bug 解决方法
2009/09/03 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python 以16进制打印输出的方法
2018/07/09 Python
简单了解python的一些位运算技巧
2019/07/13 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
幼儿教师工作感言
2014/02/14 职场文书
捐书活动总结
2014/05/04 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
党支部承诺书
2015/01/20 职场文书
电影复兴之路观后感
2015/06/02 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL