如今做web开发,jQuery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 

  1. (function($){
  2. $.fn.extend({
  3. color:function(options){
  4. var defaults = {color:'blue', size: "30px"};
  5. options = $.extend({},defaults, options);
  6. return $(this).each(function(){
  7. $(this).css({'color':options.color});
  8. $(this).css({'font-size':options.size});
  9. });
  10. }
  11. });
  12. })(window.jQuery);//此处也可写成(jQuery);

这里大家也许会抱怨,这根本看不懂,别急,看下去会让你明白

首先可以告诉大家,这个插件实现的功能是对一个标签的字体大小以及颜色设置。

下图是显示在网页上的代码:


如上的代码得到的效果如下图:


如此,大家不要疑惑,就将color()这个函数当做系统给你提供的函数即可。

在这里首先要和大家讲解自执行的匿名函数/闭包的运用

1.解释什么事闭包,下面这种形式的就是自执行的匿名函数/闭包

  1. (function($){
  2. //Code
  3. })();

 

2.坑爹的报错代码

  1. //这个代码放在javascript代码中不会报错
  2. (function($){
  3. //Code
  4. })();
  5. //而下面的代码会报错
  6. function($){
  7. //Code
  8. }();

3.解释表达式和函数声明

表达式:

  1. (function($){
  2. //Code
  3. })

 

函数声明:

  1. function($){
  2. //Code
  3. }

如此大家可以大概猜想到对象的使用方法,首先是要创建一个对象:new C()

其中C就是相当于(function($){//Code}),()便是后面的()了。

以上是一种理解方式, 实际情况如下:

js在"预编译"阶段, 会解释函数声明, 但却会忽略表达式。

JavaScript执行到function() {//Code}()d时由于function() {//code}在"预编译"阶段已经被解释过,javascript会跳过function(){//code}试图去执行()故会报错;
当javascript执行到(function {// Code})()时由于(function {// code})是表达式, javascript会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到()时, 便会被执行。

另外,函数转换为表达式的方法并不一定要靠分组操作符()我们还可以用!操作符等操作符,只要是表达一个表达式的即可。

如此大家大概知道插件得书写为什么要加个().

然后就是写插件得步骤了:基本格式如下

  1. (function($){
  2. //插件书写部分
  3. })(jQuery);

接下来有两种插件书写的形式

一种是一个函数:$.fn.函数名 = function([options]){}

另外一种自然是可以多个函数:$.fn.extend({函数名:function(){}});

第一种真能一次搞一个函数,而第二个可以一次声明多个函数

接下来讲解$.extend()的用法

有两种

一种$.extend(defaults, options);

其中defaults为默认设置,options为传入的参数

这个函数的作用是用后面的参数与第一个参数进行合并然后返回它的值

代码实现如下:



用chrome显示的效果如下:

 


看到如上的结果,大家可能已经知道了,defaults被改变了,竟然变成了options的值,同时大家可以注意到$.extend(defaults, options)返回值是被覆盖的值

这就造成了一般的插件不会用$.extend(defaults, options)原因就是他改变了默认的值

接下来就是另外一种方法

$.extend({},defaults, options);

效果如下图:



大家可以注意到用这个函数的话不会导致defaults被替代,所以一般的插件书写是用$.extend({}, defaults, options);

至于插件得调用,很简单

$("").函数名

即可。

接下是讲解一下书写插件时的一些细节部分

看如下代码

这里的return有什么作用

对于一般的插件代码,如果没有加一个return 回到一个问题:那就是只能用一次

$(".afters").color().css({})这就会报错,因为没有返回本身这个对象,所以使用完color()是没有返回值得话,那么css调用时是undefined,所以会报错,因此当我们写完插件代码时,最后要返回jQuery对象本身,否则就只能调用一次就不能调用了。

 

如果讲解有误,请大家进行纠正。

jq插件写法的更多相关文章

  1. JQ插件写法 扩展JQ方法

    目录: 1.基本JQ扩展插件js的格式 2.对JQ选中元素的方法的扩展,调用类似于$("selector").myMethod(),这里的myMethod是自己扩展的方法,与.cl ...

  2. jq 插件写法

    1.一次声明一个函数 $.fn.函数名 = function([options]){} $.fn.red=function(options){ var defaults = { 'color': 'r ...

  3. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  4. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  5. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

  6. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  7. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  8. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  9. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

随机推荐

  1. 机器学习-Matplotlib绘图(柱状图,曲线图,点图)

    matplotlib 作为机器学习三大剑客之一   ,比热按时无比强大的 matplotlib是绘图库,所以呢我就分享一下简单的绘图方式 #柱状图 #导报 柱状图 import matplotlib. ...

  2. redis哨兵集群环境搭建

    一.哨兵的介绍 哨兵(sentinal)是redis集群架构中非常重要的一个组件,主要功能如下: 集群监控,负责监控redis master和slave进程是否正常工作 消息通知,如果某个redis实 ...

  3. opencv2函数学习之blur,GaussianBlur,medianBlur和bilateralFilter:实现图像平滑处理

    在opencv2中,可能使用blur对图像进行平滑处理,这种方法就是最简单的求平均数. 平滑 也称 模糊, 是一项简单且使用频率很高的图像处理方法. 平滑处理的用途有很多, 但是在很多地方我们仅仅关注 ...

  4. 输入两棵二叉树A,B,判断B是不是A的子结构(c++实现)

    #include <iostream> #include <cstdio> #include <stdio.h> #include <string> # ...

  5. [个人项目] echarts 实现数据(tooltip)自动轮播插件

    前言 最近, 工作中要做类似这种的项目. 用到了百度的 echarts 这个开源的数据可视化的框架. 因为投屏项目不像PC端的WEB, 它不允许用户用鼠标键盘等交互. 有些图表只能看到各部分的占比情况 ...

  6. 全网最详细的Windows系统里Oracle 11g R2 Client客户端(64bit)安装后的初步使用(图文详解)

    不多说,直接上干货! 前期博客 全网最详细的Windows系统里Oracle 11g R2 Client(64bit)的下载与安装(图文详解) 命令行方式测试安装是否成功 1)   打开服务(cmd— ...

  7. j2ee高级开发技术课程第八周

    介绍一. hashCode()方法和equal()方法的作用其实一样,在Java里都是用来对比两个对象是否相等一致,那么equal()既然已经能实现对比的功能了,为什么还要hashCode()呢? 因 ...

  8. JDBC Oracle sys 用户连接

    Class.forName("oracle.jdbc.driver.OracleDriver"); conn = DriverManager.getConnection( &quo ...

  9. Nodejs+Express构建网站

    1.预先安装(系统环境widows): nodejs  可在官网下载安装  https://nodejs.org/en/ visual studio code  可在官网下载安装  http://co ...

  10. java调用第三方的webservice应用实例【转载】

    互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示. 一些常用的webservice网站的链接地址: ...