深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习
1、定义插件的方法
对象级别的插件扩展,即为jQuery类的实例增加方法,
调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(options);
定义的方式:
$.fn.extend({
"函数名":function(自定义参数){
//这里写插件代码
}
}); //或者是 $.fn.函数名 = function(options){ //这里写插件代码 }
类级别的方法,就是扩展jQuery类本身的方法,为它增加新的方法,
调用:$.函数名(arguments); $.add(3,4);
$.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.函数名=function(自定义参数){ //这里写插件代码 }
你会发现他们的区别仅仅是少了一个fn而已,而jQuery.fn = jQuery.prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
如果A.prototype = new B();就相当于A.prototype是B的实例,A可以使用B中的所有方法。
那么在我们这里,不就正是扩展了对象的方法么,使对象能够使用我们所定义的方法。
关于prototype,可以参考这篇文章:JS中的prototype
那么extend又是什么意思呢?在我们这里extend就只有一个参数,
"函数名:function(自定义参数){ //这里写插件代码 }
此时,我们的这个函数就被合并到jquery的全局对象中去,就相当于扩展了jQuery类的方法。
因为,extend是有多个参数的,extend的所用就是合并参数到一个新的参数中,例如
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}); //结果就是 result={name:"Jerry",age:21,sex:"Boy"}
关于extend可以参考这篇文章:jQuery.extend 函数详解
以上还参考:jquery的extend和fn.extend
2、实例分析,定义一个带参数的插件。
一般我们都会在很多地方看到,不要js污染全局环境,其实也对,要不然你定义一个变量,在你引用别人的插件中也定义了,那就冲突了,这就涉及到了js作用域的问题,我们得“封装”作用域,于是我们知道一个函数的作用域仅仅在一个函数中,但函数执行完毕,变量也就会被注销。
于是这里我们得用到立即执行函数,用一个函数将我们定义的插件代码包裹起来,这样就形成了一个局部的作用域,从而不会影响到全局的环境,关于立即执行函数,可以参考这篇:js中(function(){…})()立即执行函数写法理解
那么,我们的写法将是:
(function($){ $.fn.extend({ 函数 : function(options){ } }); })(jQuery);
我想自定义一个弹出层插件,可以设置背景颜色,宽和高,不设置即为默认的。
首先,在html元素中,我想设置按钮点击,
<a id="dialog">点击弹出层</a>
<div class="dialog"></div>
其实这里的div.dialog是可以动态创建的,在这里就没有。动态创建可参考:jQuery – 添加元素
$('body').append($('<div></div>').addClass('dialog'));//后面有疑问
css样式当然最初是隐藏的
.dialog{
width:300px;
height: 200px;
background:green;
position: absolute;
left:50%;top:30%;
margin-left: -150px;
display: none;
}
最后就是定义插件的js
(function($){
$.fn.extend({
dialog : function(options){
//$('body').append($('<div></div>').addClass('dialog')); //此处有疑问,我如果在这里动态创建元素后,为什么要点击2次才能看到效果?不理解,求告知。
var setting = $.extend({}, {background:'green', width:300, height:200}, options);
return this.css({'width':setting.width, 'height':setting.height, 'background':setting.background}).show('slow');
}
});
})(jQuery);
这里的return this的作用是使我们定义的插件方法可以链式调用,也就是维护链接性。
插件内部的this指向的是jQuery对象,而非普通的DOM对象。因为DOM对象是没有css()方法的,这是jQuery对象的方法,那么,jQuery对象的写法不应该是$(this)吗?在这里我们把this换成$(this)一样可以用,关于$(this)和this的区别,可以参考:jQuery中this与$(this)的区别,但我还是不清楚这里用this和$(this)为什么是一样的?
最后调用初始化就可以了。
$('#dialog').click(function(){
$('.dialog').dialog({
background:'red',
width:500,
height:100
});
});
效果可以查看代码演示,上面的疑问希望给出解释。
以上还参考:创建一个自定义 jQuery 插件
深入学习jQuery自定义插件的更多相关文章
- jquery自定义插件——以 选项卡插件为例
一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- 你的专属定制——JQuery自定义插件
前 言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...
- jQuery自定义插件--banner图滚动
前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...
- 代码:jquery自定义插件 demo
jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...
- fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用
使用fullpage的步骤 1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...
- jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
上一篇记录了BaiduTemplate模板引擎使用示例附源码,在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { ...
- jquery自定义插件-参数化配置多级菜单导航栏插件
1 自定义菜单导航栏插件的必要性 看图说话,下面是利用自定义的菜单导航栏插件simpleMenu创建的网站导航示例: 插件默认提供的是如上图的导航栏样式,即一二级菜单为横向分布:三四级菜单为纵向分布. ...
随机推荐
- NiceMark——我的Markdown编辑器
NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...
- MVVM模式和在WPF中的实现(二)数据绑定
MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- Matlab slice方法和包络法绘制三维立体图
前言:在地球物理勘探,流体空间分布等多种场景中,定位空间点P(x,y,x)的物理属性值Q,并绘制三维空间分布图,对我们洞察空间场景有十分重要的意义. 1. 三维立体图的基本要件: 全空间网格化 网格节 ...
- 关于Layer弹出框初探
layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...
- vue.js初探
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...
- .NET面试题集锦①(Part一)
一.前言部分 文中的问题及答案多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.面向对象的思想主要包括什么? 答:任何事物都可以理解为对象,其主要特征: 继承.封装.多态.特点:代码好维护,安 ...
- mongodb
修改所有的记录: > db.t_express_apply.update({},{$set:{"isStatus" : 0}},{multi:true})WriteResul ...
- scanf类型不匹配造成死循环
int i = 0; while (flag) { printf("please input a number >>> "); scanf("% ...
- php 基础代码大全(不断完善中)
下面是基础的PHP的代码,不断完善中~ //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任何输出. /* [命名规则] */ 常量名 类常量建议全大写,单词间用下划线 ...
- SAP CRM 树视图(TREE VIEW)
树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...