jQuery.fn.extend()

admin發表於2017-02-19
jQuery

要想了解此方法的用法，建議首先了解jquery.fn，先看一下jQuery的中相關的原始碼:

[JavaScript] 純文字檢視 複製程式碼
jQuery.fn = jQuery.prototype = { 
　init: function( selector, context ) {//….　 
　　//…… 
};

可見jQuery.fn作用等同於jQuery.prototype。所以jquery.fn.extend()功能是為jQuery例項物件新增方法和屬性，也就是jQuery物件例項才可以呼叫的方法和屬性。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
jQuery.fn.extend(object)

引數解析:

object:一個物件，用來合併到jQuery的原型物件。

jQuery1.0版本新增。

程式碼例項:

[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>
$(document).ready(function(){
  $.fn.extend({
    check: function () {
      return this.each(function () {
        this.checked = true;
      });
    },
    uncheck: function () {
      return this.each(function () {
        this.checked = false;
      });
    }
  });
  $("input").check()
})
</script>
</head>
<body>
<input type="checkbox" value="1"/>
<input type="checkbox" value="2" />
</body>
</html>

為jQuery物件例項新增兩個方法，可以實現核取方塊的全選和全不選。

相關文章