$.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.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="https://code.jquery.com/jquery-3.0.0.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)

设置元素的样式和内容,并返回此对象,以便于链式调用。

$.extend()和$.fn.extend()函数用法,这样的场景在实际项目中还是用的比较多的,关于$.extend()和$.fn.extend()函数用法就介绍到这了。

回复

我来回复
  • 暂无回复内容