jQuery插件实践之轮播练习(一)
所有文章搬运自我的个人主页:sheilasun.me
因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法。
新建插件文件
在讨论细节之前,先新建插件文件(当然也可以把代码直接放在页面的script标签中,只是复用麻烦些),如:'jQuery.carousel.js'。在文件中首先加入以下代码:
(function($){
//...具体的实现
})(jQuery);
为什么一定要用闭包包裹一层?原因有二:
- 为插件创建私有的作用域。这样包裹以后,外面的代码不能直接访问插件内部的代码,插件内部声明的临时变量也不会污染到全局。
- 在插件内部可以无顾忌地使用'$'符号代替'jQuery',写起代码来更简便。
写jQuery插件的两种方式
- 扩展jQuery全局函数
相当于c#中的静态方法,可以理解为给jQuery类添加静态方法。jQuery的全局函数也就是jQuery命名空间下的函数(如$.ajax(),$.each()等),这种添加方式也就是给jQuery命名空间下添加新函数。这种函数的特征是它不直接操作dom元素,可以说是工具类函数,因此不挂载在jQuery对象上。
这种方式下的函数写法也有多种:
第一种
$.myAlert=function(){
window.alert("message from XX");
}
调用
$.myAlert();
第二种 (可以一次添加多个函数)
$.extend({
myAlert:function(){
window.alert("message from XX");
},
myLog:function(){
window.console.log("message from XX");
}
}
);
调用
$.myAlert();$.myLog();
第三种
在jQuery下再添加一层命名空间,将插件函数挂载在自定义的命名空间下,可以避免和jQuery以及其他插件的变量名或函数名冲突。$.myPlugin.myAlert=function(){
window.alert("message from XX");
}
调用
$.myPlugin.myAlert();
- 扩展jQuery对象(实例)方法
给jQuery对象添加方法,也就是说,只有经过实例化的jQuery对象才可以调用我们添加的方法。
这种方式下的函数写法也有多种:
第一种
$.fn.myAlert=function(){
window.alert("message from XX");
}
调用
$('.myButton').myAlert();
第二种 (可以一次添加多个函数)
$.fn.extend({
myAlert:function(){
window.alert("message from XX");
}
}
);
调用
//正确的调用
$('.myButton').myAlert();
$(this).myAlert();
$('#test li').myAlert();
//错误的调用
$.myAlert();//error
查看jQuery的源码就能知道,$.fn也就是jQuery.prototype,如果对原型有所了解就会知道,我们对它进行扩展,自然所有的jQuery类的实例都可以访问到方法了。
很多的jQuery插件都是用这种方式,这样用jQuery选择器获取到jQuery对象以后,就可以调用插件方法。
本文的轮播插件也将依照这种类型来写。
写插件的标准
使用过jQuery的人都知道它有一些非常棒的特性,如选择器后的隐式迭代、链式调用。
- 隐式迭代
什么是隐式迭代?看下面这行代码,它会将整个页面上所有的p元素设成背景红色。
$('p').css('background','red');//隐式迭代
我们自己写的插件也要尽量支持这种隐式迭代,实现的方式也很简单,用each方法来遍历即可,代码如下:
$.fn.myLog=function(){
this.each(function(){//显式迭代
window.console.log(this);
});
}
要注意的是,插件函数体内的'this'(上段代码中的第一个'this')即指的是当前通过选择器获取到的jQuery对象数组,而不像通常事件函数内部的'this'指的是dom元素。而代码中的第二个'this'则确实指的是一个dom元素了。
连缀语法
连缀指的是每次调用完把当前对象返回,供下次调用,这样可以一个方法接一个方法的连缀调用,中间用'.'隔开即可,除了连缀以外,我喜欢叫它链式调用更方便自己理解。下面这行代码就是连缀语法的一个例子。$('p').css('background','red').slideDown();
可以看出,为了支持这种链式调用,插件除了执行自己的逻辑以外,最后还应该把当前的jQuery对象数组返回。所以上面的代码我们可以修改如下:
$.fn.myLog=function(){
return this.each(function(){//return 当前对象
window.console.log(this);
});
}
设置默认参数
插件内部可以设置默认参数,让用户在不传入参数的情况下也可以调用。当用户传入自己的参数时,对于用户有设置值的属性,用户设置的值覆盖默认值,对于用户没有设置值的属性,插件内部就用属性的默认值。这个覆盖操作可以用$.extend()方法实现,$.extend()用法可以戳官方API文档→http://api.jquery.com/jQuery.extend/。(function($) {
var defaults = {
name: 'test',
message: 'test message'
};
$.fn.myLog = function() {
return this.each(function(options) {
//也可以用下面注释这句,只是这样defaults也会被改变
//var options=$.extend(defaults,options);
var options = $.extend({}, defaults, options);
window.console.log(options.name + ":" + options.message);
});
}
})(jQuery);
调用:
$('.className').myLog();//使用默认值
$('.className').myLog({name:'sheilasun'});//传入参数,覆盖默认值
还可以进一步改进,现在defaults在外界是无法获取的,我们可以把它暴露出来,让用户可以在使用插件之前修改默认值。
(function($) {
$.fn.myLog.defaults = {
name: 'test',
message: 'test message'
};
$.fn.myLog = function() {
return this.each(function(options) {
var options = $.extend({}, $.fn.myLog.defaults, options);
window.console.log(options.name + ":" + options.message);
});
}
})(jQuery);
调用:
$.fn.myLog.defaults={name:"sheilasun.me",message:'message from sheilasun.me'};
//或者
$.fn.myLog.defaults.name="sheilasun.me";
总结
- jQuery插件可以用两种方式添加,分别是针对jQuery全局函数的扩展和jQuery对象(实例)方法的扩展
- 插件要尽量返回当前对象,支持连缀写法
- 插件内部可以用$.each()方法遍历选择器获取到的所有jQuery对象,支持隐式迭代
- 插件内部可以设置默认值,或将其暴露出来,供外界修改
关于轮播的逻辑实现,放在下一篇写。
jQuery插件实践之轮播练习(一)的更多相关文章
- jQuery插件实践之轮播练习(二)
所有文章搬运自我的个人主页:sheilasun.me 上一篇中学习了jQuery插件的写法,这篇该着手实现啦.首先明确一下轮播要具备哪些功能: 可以点击"向后"按钮向后翻页 可以点 ...
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- jquery插件讲解:轮播(SlidesJs)+验证(Validation)
SlidesJs(轮播支持触屏)——官网(http://slidesjs.com) 1.简介 SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件.支持键盘,触摸,css3转换. 2.代 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- jQuery轻量级京东图片轮播代码等
http://sc.chinaz.com/jiaoben/jiaodiantu.html jQuery轻量级京东图片轮播代码 查看全图点击预览 顶(17)踩(4)报错评论(0)下载地址 更新时间: ...
- 使用Bootstrap 3开发响应式网站实践02,轮播
本篇体验图片轮播.html部分为: <div class="carousel slide" id="myCarousel" > <!--Ind ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- JQuery slidebox实现图片轮播
jQuery图片轮播(焦点图)插件jquery.slideBox,简单设置下参数就可以多个多种动画效果,左右,上下,速度,还可指定默认显示第N张,点击的按钮在现代浏览中可以实现圆形或圆角效果,插件代码 ...
随机推荐
- numpy笔记—np.squeeze用法
import numpy as np x = np.array([[[0], [1], [2]]]) print(x.shape) d = np.squeeze(x) # 从数组的形状中删除单维条目, ...
- Keil stm32 printf到Debug窗口
使用JlinkV8+Keil41.在main.c输入以下代码 #include <stdio.h> #define ITM_Port8(n) (*((volatile unsigned c ...
- TCP/IP详解 卷1 第十九章 TCP的交互数据流
19.1 引言 成块数据:比如ftp.电子邮件.Usenet新闻 交互数据:Telnet.Rlogin 成块数据的报文段基本上都是满长度(full-size)的,而交互数据小的多(Telnet和Rlo ...
- APR欺骗
ARP欺骗简介 ARP欺骗是一种在局域网中常用的攻击手段,目的是让局域网中指定的(或全部)的目标机器的数据包都通过攻击者主机进行转发,是实现中间人攻击的常用手段,从而实现数据监听.篡改.重放.钓鱼等攻 ...
- dense prediction
Dense prediction fully convolutional network for sementic segmentation 先用feature extractor 提特征,然后再使 ...
- adb环境变量配置
针对win10系统: 搜索“高级系统设置”,点击“环境变量”按钮: 找到“path”双击: 双击“path”,在弹出的环境变量列表中新建,填入adb的文件路径 检查配置是否成功,运行命令adb,出现如 ...
- linux笔记_day03
1.命令行展开{} mkdir -p a/b/{c,d/e} 2.-v verbose 详细的 3.touch touch - change file timestamps 4.stat 文件 显示 ...
- 基于theano的降噪自动编码器(Denoising Autoencoders--DA)
1.自动编码器 自动编码器首先通过下面的映射,把输入 $x\in[0,1]^{d}$映射到一个隐层 $y\in[0,1]^{d^{'}}$(编码器): $y=s(Wx+b)$ 其中 $s$ 是非线性的 ...
- 【网络编程1】网络编程基础-TCP、UDP编程
网络基础知识 网络模型知识 OSI七层模型:(Open Systems Interconnection Reference Model)开放式通信系统互联参考模型,是国际标准化组织(ISO)提出的一个 ...
- openstack常见问题解决方法总结
一.创建实例失败: 首先用下面命令查看服务是否正常 1. nova-manage service list 如果不正常,则使用下面命令重启,如果还不行,则查看日志, 1. service nova-a ...