开发插件的两个方法jquery.fn.extend与jquery.extend


Posted in Javascript onNovember 21, 2013

jQuery为开发插件提拱了两个方法,分别是:

JavaScript代码

jQuery.fn.extend(object); 
jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

JavaScript代码

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//….  

 //…… 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

XML/HTML代码

$.extend({ 
add:function(a,b){return a+b;} 
});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
JavaScript代码
$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
JavaScript代码

$.fn.extend({ alertWhileClick:function(){ 
$(this).click(function(){ 
alert($(this).val()); 
}); 
} 
}); 
$(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>

$(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

Javascript 相关文章推荐
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 #Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 #Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 #Javascript
jtable列中自定义button示例代码
Nov 21 #Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 #Javascript
JS两种定义方式的区别、内部原理
Nov 21 #Javascript
jQuery操作input值的各种方法总结
Nov 21 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
微信JS接口大全
2016/08/25 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
微信小程序位置授权处理方法
2019/06/13 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python基础教程之Hello World!
2014/08/29 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
详解python播放音频的三种方法
2019/09/23 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
酒店行政人事部经理职务说明书
2014/02/26 职场文书
党风廉设责任书
2014/04/16 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
门面房租房协议书
2014/12/01 职场文书
十佳少年事迹材料
2014/12/25 职场文书
年会邀请函范文
2015/01/30 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
停发工资证明范本
2015/06/12 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript