JQuery插件编写之封装对象

时间：2014-08-08 01:48:45 收藏：0 阅读：245

Jquery扩展插件有三大法宝，

1、封装对象方法 （本文详细介绍）：对通过选择器获取的jQuery对象进行操作。
2、封装全局函数
3、选择器插件

jQuery插件的机制：
　　jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能。
　　jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种，jQuery.extend()用于扩展后两种插件。

废话不多说，自己编写的插件建议命名为jquery.xxxx.js

本文JQuery库使用的版本是1.10.2

jquery.code.js

 1 (function ($) { 
 2 $.fn.code = function (options) { 
 3 var defaultVal = {
 4     color:‘blue‘
 5 };
 6 var obj=$.extend(defaultVal,options);
 7 return this.each(function(){
 8     var selObject = $(this);
 9         selObject.css(‘color‘,obj.color);
10     });
11 }; 
12 })(jQuery);

$.fn.code 就是按照第一种 $.fn.extend 的方法进行封装对象方法。
设置一个defaultVal的hash作为默认输入参数。
var obj = $.extend(defaultVal,options); 将用户输入参数options和默认参数defaultVal通过$.extend方法进行merge,比如说如果用户有给出color的值，则会override默认值blue。
关键词return的作用就是返回each操作后的对象，以便用户接下去使用JQuery的链式操作，如本文的code().fadeOut()

code.html

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <script src="/js/jquery.js" type="text/javascript"></script>
 5 <script src="/js/jquery.code.js" type="text/javascript"></script>
 6 <script>
 7 $(document).ready(function(){
 8     $(".mark").code({
 9         color:‘orange‘
10     }).fadeOut(‘slow‘);
11 });
12 </script>
13 </head>
14 <body>
15 <span class="mark">Hello World!</span>
16 <span class="mark">Hello University!</span>
17 </body>
18 </html>

发挥想象力之后，别忘记载入你自己写的js，其他的不解释。

JQuery插件编写之封装对象,布布扣,bubuko.com