jQuery插件的写法以及使用

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

(function($){$.fn.extend({color:function(options){var defaults = {color:'blue', size: "30px"};options = $.extend({},defaults, options);return $(this).each(function(){$(this).css({'color':options.color});$(this).css({'font-size':options.size});});}});})(window.jQuery);//此处也可写成(jQuery);

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

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

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

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

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

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

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

(function($){//Code
})();

2.坑爹的报错代码

//这个代码放在javascript代码中不会报错
(function($){//Code
})();
//而下面的代码会报错
function($){//Code
}();

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

表达式：

(function($){//Code
})

函数声明：

function($){//Code
}

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

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

以上是一种理解方式，实际情况如下：

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

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

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

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

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

(function($){//插件书写部分
})(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对象本身，否则就只能调用一次就不能调用了。

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

jQuery插件的写法以及使用相关推荐

JQuery插件的写法和规范
JQuery插件写法的总结最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户端UI的效率.JQuery本身提供 ...
jquery插件的写法
一.JQuery的插件主要分为3种: 1.封装对象方法的插件. 如JQuery的parent()方法,appendTo()方法,addClass()方法等. 2.封装全局函数的插件. 如JQuery. ...
用一个案例介绍jQuery插件的使用和写法
我们在做web的时候都会用到很多jQuery插件,这些插件可以很方便的使用.但对于初学者来说想要修改插件中的一些功能,或者想要自定义插件却不是容易的事情.自己也刚好在学习这部分的知识,这里用一个案例来 ...
jQuery 插件写法
一.jQuery插件的类型 1. jQuery方法很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...
JQuery闭包，插件的写法
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
自己动手开发jQuery插件
因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就蛋疼菊紧的人来说,一天时间8小时,保守估计有5个小时在 ...
jQuery插件simplePagination的使用-踩坑记_03
jQuery插件simplePagination的使用正在熟悉项目上的代码,新添加了一个需要,需要对表单进行分页,之前的代码中是有分页的代码的,看了老半天,也没看太明白.之前的项目比较久远,继续熟悉 ...
jQuery插件开发方式
一.jQuery扩展 1.$.extend(object) 类似于.Net的扩展方法,用于扩展jQuery.然后就可以用$.的方式调用. $(function(){$.extend({ fun1: f ...
尝试jquery插件的开发
尝试jquery插件的开发今天,尝试了一下jquery插件的开发,先看效果图: 就是鼠标点击下面三张缩略图的时候,显示大图和文字. $(document).ready(function() { $( ...

jQuery插件的写法以及使用

jQuery插件的写法以及使用相关推荐

最新文章

热门文章