jQuery基础集锦——插件开发
jQuery为开发插件提拱了两个方法,分别是:jQuery.fn.extend();和jQuery.extend();
jQuery.fn
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
//….
//……
}
};
可以看出, jQuery.fn = jQuery.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
Object jQuery.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 );
转载于:https://www.cnblogs.com/cemaster/p/5984544.html
jQuery基础集锦——插件开发相关推荐
- 【Java Web开发指南】JQuery基础笔记
文章目录 JQuery 基础: 1. JQuery 基础:1. 概念2. 快速入门3. JQuery对象和JS对象区别与转换4. 选择器5. DOM操作6. 案例 JQuery 基础: 1. 概念: ...
- Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
- Ajax、jQuery基础入门视频教程
关注公众号,免费获取资料 本视频是Ajax和jQuery基础入门视频,该视频针对接触过javaScript基础的学员录制,授课讲究通俗易懂.通过该视频的学习,相信您能够轻轻松松地掌握Ajax和jQue ...
- jQuery小测试系列之jQuery基础知识
日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识. 来源:jQuery小测试系列之jQuery基础知识
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- JQuery-学习笔记01【基础——JQuery基础】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 06 Jquery 基础
06 Jquery 基础 前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script>//基本选择器/ ...
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
最新文章
- Linux最大打开文件描述符数
- [PWA] Show Notifications when a Service Worker is Installed or Updated
- SpringBoot+Vue 完整的外卖系统,手机端和后台管理,可以玩一下!
- 【STM32】DAC相关函数和类型
- 程序员偷偷深爱的9个不良编程习惯
- 非插件实现回复可见效果
- tidb时间转字符串_如何使用TiDB节省时间
- 响应式API的设计、实现和应用
- 实现c++BMP图像的读取合成拆解加边框
- linux 新老软件切换,Linux下非常重要的软件切换命令
- stm32移植paho_paho.mqtt.c开源代码的ARM移植
- 卡巴斯基企业版本杀毒软件防火墙,支持windows服务器系统安装
- 南京毕业生租房补贴发票开具地点一览表
- python录音功能,python实现录音功能可随时停止录音代码
- 【无标题】研究过程中的一些经验感悟
- 数字分割(拆数字)的两种方法
- 洗车行业可以使用会员管理系统吗?
- Linux 基础命令入门 文件压缩
- C认证笔记 - 计算机通识 - 进制转换
- 第五届“泰迪杯”数据分析技能赛
热门文章
- 当局为器,人民为水。当局什么样,人民就什么样
- 博客V7之后,喜庆排名进入2000之内
- 管理感悟:出了事故,关键是想想自己哪里能改进
- 移动通信matlab实现,现代移动通信中的调制技术研究及Matlab实现
- Windows下,Unicode、UTF8,GBK(GB2312)互转
- mysql 重放binlog_【MySQL】老版本重放binlog的罕见报错
- ecs服务器配置git_ecs安装git
- 服务器修改lang值,golang设置http response响应头与填坑记录
- html5植物生长,关于植物生长的知识
- Oracle1518,redhat 5.4 Oracle 10g r2