深入理解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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery手风琴的简单制作
May 12 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php中curl使用指南
2015/02/05 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
js获取单选按钮的数据
2006/11/27 Javascript
js的回调函数详解
2015/01/05 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
javascript实现倒计时关闭广告
2021/02/09 Javascript
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
党校培训思想汇报
2014/01/03 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
先进个人申报材料
2014/12/30 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript