ホームページ > 記事 > ウェブフロントエンド > jQuery ネイティブ メソッドを変更または拡張するコード例
jQuery ネイティブ メソッドを変更または拡張するコード例
- PHPz転載
- 2016-05-16 16:20:481202ブラウズ
この記事では、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 ビデオ チュートリアルをご覧ください。