$.extend()和$.fn.extend()函数用法简单介绍

Posted 2020-06-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了$.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()函数用法简单介绍的主要内容，如果未能解决你的问题，请参考以下文章

理解jquery的$.extend()$.fn和$.fn.extend()

jquery的extend和fn.extend

理解jquery的$.extend()$.fn和$.fn.extend()