DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 修改或擴展jQuery原生方法的代碼實例教程
修改或擴展jQuery原生方法的代碼實例教程
編輯:JQuery特效代碼     

修改或者擴展jQuery的方法代碼實例:

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

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

代碼實例:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>博客園</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">博客園</span>  
<input type="text" id="txt" value="softwhy.com" />
<input type="checkbox" value="antzone" />
<div id="show"></div>
</body>
</html>

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

代碼注釋:

1.$.prototype.val = function (base) {}(($.prototype.val),修改jQuery原來的val()方法,這裡采用閉包的方式,傳遞的參數是原來的val()方法,以保持原來val()方法的功能。
2.return function (){},返回一個函數對象。
3.var s = this,將this的指向引用賦值給變量s,這裡的this是指向jQuery對象實例的。
4.var a = "data-property",聲明一個變量並賦值,關於它的更多內容面會介紹。
5.var p = s.attr(a),其實data-property就是標簽上的一個自定義屬性,那麼這段代碼就是獲取此屬性值。
6.var isset = arguments.length > 0,判斷修改後的val()方法是否傳遞了參數。
7.var v = isset ? arguments[0] : null,如果傳遞參數,那麼久獲取第一個參數,其他的忽略。
8.if (isset&&typeof(base)=="function") {
  base.call(s, v);
},如果傳遞了參數,且base參數是一個函數,那麼就調用base函數設置元素

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved