首頁  >  文章  >  web前端  >  修改或擴充jQuery原生方法的程式碼實例

修改或擴充jQuery原生方法的程式碼實例

PHPz
PHPz轉載
2016-05-16 16:20:481203瀏覽

這篇文章主要介紹了修改或擴展jQuery原生方法的程式碼實例,本文用一個擴展jquery原生方法val的例子,講解瞭如何對jquery原生方法修改或擴展,需要的朋友可以參考下

修改或擴充jQuery的方法程式碼實例:

毫無疑問,jQuery是一款功能強大且使用方便的類別庫。

從它的廣泛應用可以證實上面的觀點,但是正所謂人無完人,金無足赤,jQuery也是如此,並非在任何時候或者場合都能夠完美的完成我們的任務,所以有事以後就需要對jQuery原有的方法進行擴充修改,但是最好方法還是有原來的功能。

程式碼實例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$.prototype.val = function (base) {
  return function () {
    var s = this;
    var a = "data-property";
    var p = s.attr(a);
    var isset = arguments.length > 0;
    var v = isset ? arguments[0] : null;
         
    if (isset&&typeof(base)=="function") { 
      base.call(s, v); 
    } 
    else { 
      v = base.call(s); 
    }
    if (p) {
      if (isset) { 
        s.attr(p, v); 
        return s 
      }
      else { 
        return s.attr(p) 
      }
    }
    else {
      if (!s.is(":input")){ 
        if (isset) { 
          s.text(v); return s; 
        } 
        else { 
          return s.text(); 
        } 
      }
      else { 
        return isset ? s : v; 
      }
    }
  }
}($.prototype.val);
$(document).ready(function(){
  $("#show").html($("#lbl").val()+"<br>"+$("#txt").val());
})
</script>
</head>
<body>
<span id="lbl">php中文网</span>   
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<p id="show"></p>
</body>
</html>

上面的程式碼毫無疑問是對jQuery的val()方法做的擴展,下面介紹一下它的實作過程。

程式碼註解:

1、$.prototype.val = function (base) {}(($.prototype.val),修改jQuery原來的val()方法,這裡採用閉包的方式,傳遞的參數是原來的val()方法,以保持原來val()方法的函數。 >3、var s = this,將this的指向引用賦值給變數s,這裡的this是指向jQuery物件實例的。 ,關於它的更多內容面會介紹。 。 ,如果傳遞參數,那麼久獲取第一個參數,其他的忽略。傳遞了參數,且base參數是一個函數,那麼就調用base函數設定元素

以上就是本章的全部內容,更多相關教程請訪問

jQuery視頻教程

陳述:
本文轉載於:jb51.net。如有侵權,請聯絡admin@php.cn刪除