你的位置:首页 > Java教程

[Java教程]$.extend()和$.fn.extend()函数用法简单介绍


$.extend()和$.fn.extend()函数用法简单介绍:
标题中的两个方法在jQuery插件开发中非常的重要,下面通过简单的代码实例介绍一下它们的用法。
本章节不会介绍它的原理,而是只给出它们的作用是什么,能够做什么事情。
jQuery.extend()可以为jQuery类添加新的方法,类似于c#或者java中的静态方法。
jQuery.fn.extend()可以为jQuery的对象实例添加新的方法。
代码实例:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> $(document).ready(function(){ jQuery.fn.Plugin=function(options){   $options=$.extend({    html:"没有内容",    css:{     "color":"red",     "font-size":"12px"    }  },   options);   return $(this).css({    "color":$options.css.color,  }).html($options.html);  }  $('.antzone').Plugin({html:"蚂蚁部落",css:{"color":"green","font-size":"12px"}}); })</script></head><body><ul> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li> <li class="antzone">分享互助</li></ul></body></html>

上面的代码自定义了一个简单插件,这里只介绍了$.fn.extend()的使用,其实$.extend()的使用也是同样的道理,下面介绍一下上面代码的实现过程,更多内容可以参阅相关阅读。
一.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.jQuery.fn.Plugin=function(options){},为jQuery类的对象实例添加新的方法Plugin,参数是一个对象直接量,传递一些相应的参数,如果省略,则使用默认的参数。
3.$options=$.extend({ 
  html:"没有内容", 
  css:{ 
    "color":"red", 
    "font-size":"12px" 
  }
}, 
options)
合并对象,从这个也可以看出来如果新添加的函数不传递参数,那么就采用默认的参数,否则使用传递的参数。
4.return $(this).css({ 
  "color": $options.css.color,
}).html($options.html)
设置元素的样式和内容,并返回此对象,以便于链式调用。
二.相关阅读:
1.jQuery.fn可以参阅jQuery.fn的作用是什么一章节。 
2.jquery.extend()可以参阅jquery.fn.extend()与jquery.extend()函数的作用一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14441

更多内容可以参阅:http://www.softwhy.com/jquery/