jQuery ネイティブメソッドを変更または拡張するコード例-jsチュートリアル-php.cn

jQuery ネイティブメソッドを変更または拡張するコード例

PHPz

リリース： 2018-09-29 17:29:58

転載

1166 人が閲覧しました

この記事では、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() メソッドの機能を維持するために渡されるパラメータは、関数 (){} を返し、関数オブジェクト var s = this を返します。 this の変数 s への参照。これは jQuery オブジェクトインスタンスを指します。 4. var a = "data-property"、変数を宣言し、値を割り当てます。

5. var p = s.attr(a)。実際、data-property はラベルのカスタム属性であるため、このコードは

6 の値を取得します。 isset = argument.length > 0、変更された val() メソッドがパラメーターを渡すかどうかを決定します。

7. var v = isset argument[0]: null、パラメーターが渡される場合、最初のパラメーターは8. if (isset&&typeof(base)=="function") {base.call(s, v);}、パラメータが渡され、base パラメータが関数の場合、基本関数は要素

を設定するために呼び出されます。上記はこの章の全内容です。その他の関連チュートリアルについては、

jQuery ビデオチュートリアル

をご覧ください。