首页 > 代码库 > JQuery插件编写之封装对象

JQuery插件编写之封装对象

2024-07-16 09:26:49   222人阅读

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，其他的不解释。

 


联系
我们