如何开发自己的jQuery插件

1.在JQuery命名空间内声明一个特定的命名

  1. $.fn.hilight = function() {    
  2.    //在这里输入你的插件执行代码    
  3. };    

我们可以这样调用:

  1. $('#myDiv').hilight();  

2.接收参数来控制插件的行为;
来为我们的hilight插件添加指定前景和背景色的功能,我们需要在函数中允许一个object类型的选项设置。如下所展示的那样:

JavaScript代码
  1. $.fn.hilight = function(options) {        
  2. var defaults = {        
  3.     foreground: 'red',        
  4.     background: 'yellow'        
  5.   };        
  6.       
  7.     var opts = $.extend(defaults, options);        
  8.       
  9. };   

 

现在,我们的插件可以这样来调用:

JavaScript代码
  1. $('#myDiv').hilight({       
  2.   foreground:'blue'       
  3. });     

3.提供公有方法访问插件的配置项值;
上面的代码我们可以做一下改进,使得插件的默认值可以在插件之外被设置。这无疑是十分重要的,因为它使得插件用户可以使用最少的代码来修改插件配置,这其实是我们利用函数对象的开始。

JavaScript代码
  1. $.fn.hilight = function(options) {        
  2.   var opts = $.extend({}, $.fn.hilight.defaults, options);        
  3. };        
  4.          
  5. $.fn.hilight.defaults = {        
  6.   foreground: 'red',        
  7.   background: 'yellow'        
  8. };     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值