码迷,mamicode.com
首页 > Web开发 > 详细

JQuery插件编写之封装对象

时间:2014-08-08 01:48:45      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   io   strong   ar   

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

JQuery插件编写之封装对象

标签:style   blog   color   java   使用   io   strong   ar   

原文地址:http://www.cnblogs.com/angular/p/3898282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!