如今做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. SpringBoot配置文件application.properties详解

    喜欢的朋友可以关注下,粉丝也缺. 相信很多的码友在接触springboot时,不知道怎么去配置一些项目中需要的配置,比如数据源,tomcat调优,端口等等,下面我就给大家奉献出一些项目中常用的配置信息 ...

  2. npm私服搭建

    本文是在 centos7 下利用 nexus 搭建 npm 私服的整理 一.安装 JDK 1.下载 JDK 2.安装 tar zxvf jdk-8u191-linux-x64.tar.gz .0_19 ...

  3. 【liferay】5、使用PortletURL进行跨portlet通信 liferay6.2

    [问题] 1.当我们一个页面存在多一个portlet的时候,如在不同的portlet之间传参? [解决办法] 1.在liferay官方有几种方式,比较复杂麻烦,不是太实用,这里不再赘述. 2.通过fr ...

  4. rabbitmq系列五 之主题交换机

    1.主题 在前面的例子中,我们对日志系统进行了改进.使用了direct交换机代替了fanout交换机,从只能盲目的广播消息改进为有可能选择性的接收日志. 尽管直接交换机能够改善我们的日志系统,但是它也 ...

  5. 主成分分析(PCA)原理详解(转载)

    一.PCA简介 1. 相关背景 上完陈恩红老师的<机器学习与知识发现>和季海波老师的<矩阵代数>两门课之后,颇有体会.最近在做主成分分析和奇异值分解方面的项目,所以记录一下心得 ...

  6. 剑指offer二之替换空格

    一.题目: 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为I love you.则经过替换之后的字符串为I%20love%20You. 二.解题方法: 方法1:采用String ...

  7. Feign status 400 reading 问题分析

    背景:项目使用的是微服务架构,采用springboot来开发,所有的服务都是基于内嵌tomcat来运行 问题:项目部署到测试环境之后,偶尔在后台日志会看到这样的日志:Feign status 400 ...

  8. 自然语言处理(英文演讲)_2-gram

    这里利用2-gram模型来提取一篇英文演讲的初略的主题句子,这里是英文演讲的的链接:http://pythonscraping.com/files/inaugurationSpeech.txt n-g ...

  9. freerdp服务器共享屏幕,skype lync终端显示黑屏的原因分析

    问题描述:freerdp支持远程桌面共享协议rdp,使用freerdp与skype终端进行远程桌面共享时.发送1080p 视频数据时 skype终端显示黑屏 经过分析,发现rdp协商参数大于一定值时, ...

  10. 微信小程序网络封装-简单高效

    废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动 ...