$.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/

你可能感兴趣的:($.extend()和$.fn.extend()函数用法简单介绍)