$.extend()和$.fn.extend()函式用法

admin發表於2017-12-04
函式

標題中的兩個方法在jQuery外掛開發中非常的重要，下面通過簡單的程式碼例項介紹一下它們的用法。

本章節不會介紹它的原理，而是隻給出它們的作用是什麼，能夠做什麼事情。

jQuery.extend()可以為jQuery類新增新的方法，類似於c#或者java中的靜態方法。

jQuery.fn.extend()可以為jQuery的物件例項新增新的方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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)

設定元素的樣式和內容，並返回此物件，以便於鏈式呼叫。

相關文章