$.contains メソッドは、DOM 要素 (2 番目のパラメーター) が別の DOM 要素 (1 番目のパラメーター) の下位要素であるかどうかを示すブール値を返します。
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]
上記のコードでは、o2 は浅いコピー、o3 は深いコピーです。その結果、元の配列のプロパティが変更されると、o2 はそれに伴って変更されますが、o3 は変更されません。
(6)$.proxy
$.proxy メソッドは、ECMAScript 5 のバインド メソッドに似ています。関数のコンテキスト (つまり、このオブジェクト) とパラメーターをバインドし、新しい関数を返すことができます。
jQuery.proxy() の主な用途は、コンテキスト オブジェクトをコールバック関数にバインドすることです。
var o = {
タイプ: "オブジェクト"、
テスト: function(event) {
console.log(this.type);
}
};
$("#ボタン")
.on("click", o.test) // 出力なし
.on("クリック", $.proxy(o.test, o)) // オブジェクト
上記のコードでは、最初のコールバック関数はコンテキストをバインドしないため、結果は空になり、出力はありません。2 番目のコールバック関数はコンテキストをオブジェクト o にバインドし、結果は object になります。
この例を記述する別の同等の方法は次のとおりです:
$("#button").on( "click", $.proxy(o, test))
上記のコードの $.proxy(o, test) は、o のメソッド test を o にバインドすることを意味します。
この例は、プロキシ メソッドを記述する主な方法が 2 つあることを示しています。
jQuery.proxy(関数, コンテキスト)
// または
jQuery.proxy(コンテキスト, 名前)
1 つ目の書き方は、関数 (function) のコンテキスト オブジェクト (context) を指定する方法で、2 つ目の書き方は、コンテキスト オブジェクト (context) とそのメソッド名 (name) の 1 つを指定する方法です。
別の例を見てください。通常の状況では、次のコードの this オブジェクトは、クリック イベントが発生する DOM オブジェクトを指します。
$('#myElement').click(function() {
$(this).addClass('aNewClass');
});
コールバック関数を遅延して実行したい場合に setTimeout メソッドを使用すると、コードが間違ってしまいます。これは、setTimeout によってコールバック関数がグローバル環境で実行され、これがグローバル オブジェクトを指すことになるためです。
$('#myElement').click(function() {
setTimeout(function() {
$(this).addClass('aNewClass');
}, 1000);
});
上記のコードでは、グローバル オブジェクト ウィンドウをポイントしているため、エラーが発生します。
現時点では、プロキシ メソッドを使用して、このオブジェクトを myElement オブジェクトにバインドできます。
$('#myElement').click(function() {
setTimeout($.proxy(function() {
$(this).addClass('aNewClass')
}, this), 1000);
});
(7)$.data、$.removeData
$.data メソッドを使用して、DOM ノードにデータを保存できます。
//データを保存
$.data(document.body, "foo", 52 );
//データを読み取る
$.data(document.body, "foo");
// すべてのデータを読み取ります
$.data(document.body);
上記のコードは、キー名「foo」とキー値 52 を持つキーと値のペアを Web ページ要素本体に保存します。
$.removeData メソッドは、$.data メソッドに保存されているデータを削除するために使用されます。
$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");
(8)$.parseHTML、$.parseJSON、$.parseXML
$.parseHTML メソッドは、文字列を DOM オブジェクトに解析するために使用されます。
$.parseJSON メソッドは、ネイティブの JSON.parse() と同様に、JSON 文字列を JavaScript オブジェクトに解析するために使用されます。ただし、jQuery には、JSON.stringify() に似たメソッド、つまり JavaScript オブジェクトを JSON オブジェクトに変換するメソッドが提供されていません。
$.parseXML メソッドは、文字列を XML オブジェクトに解析するために使用されます。
var html = $.parseHTML("こんにちは、私の名前は jQueryです。");
var obj = $.parseJSON('{"name": "John"}');
var xml = "RSS タイトル";
var xmlDoc = $.parseXML(xml);
(9)$.makeArray
$.makeArray メソッドは、配列のようなオブジェクトを実際の配列に変換します。
var a = $.makeArray(document.getElementsByTagName("div"));
(10)$.merge
$.merge メソッドは、1 つの配列 (2 番目のパラメーター) を別の配列 (1 番目のパラメーター) にマージするために使用されます。
var a1 = [0,1,2];
var a2 = [2,3,4];
$.merge(a1, a2);
a1
// [0, 1, 2, 2, 3, 4]
(11)$.now
$.now メソッドは、1970 年 1 月 1 日の 00:00:00 UTC からの現在時刻に対応するミリ秒数を返します。これは (new Date).getTime() と同等です。
$.now()
// 1388212221489
データ型を決定するメソッド
jQuery は、JavaScript のネイティブ typeof 演算子の欠点を補うデータ型を決定するための一連のツール メソッドを提供します。以下のメソッドはパラメータを判定し、ブール値を返します。
jQuery.isArray(): 配列かどうか。
jQuery.isEmptyObject(): 空のオブジェクト (列挙可能なプロパティを含まない) かどうか。
jQuery.isFunction(): 関数かどうか。
jQuery.isNumeric(): 配列かどうか。
jQuery.isPlainObject(): ブラウザによってネイティブに提供されるオブジェクトの代わりに、「{}」または「新しいオブジェクト」を使用して生成されたオブジェクトであるかどうか。
jQuery.isWindow(): ウィンドウ オブジェクトかどうか。
jQuery.isXMLDoc(): DOM ノードが XML ドキュメント内にあるかどうかを判断します。
以下にいくつかの例を示します。
$.isEmptyObject({}) // true
$.isPlainObject(document.location) // false
$.isWindow(window) // true
$.isXMLDoc(document.body) // false
上記のメソッドに加えて、変数のデータ型を返すことができる $.type メソッドもあります。その本質は、Object.prototype.toString メソッドを使用してオブジェクト内の [[Class]] 属性を読み取ることです (「標準ライブラリ」の「オブジェクト」セクションを参照)。
$.type(/test/) // "正規表現"
Ajax 操作
$.ajax
jQuery オブジェクトは、Ajax 操作を処理するための Ajax メソッド ($.ajax()) も定義します。このメソッドを呼び出した後、ブラウザは HTTP リクエストをサーバーに送信します。
$.ajax() はさまざまな方法で使用できますが、最も一般的なのはオブジェクト パラメーターを提供することです。
$.ajax({
非同期: true、
URL: '/url/to/json',
入力: 'GET'、
データ : { id : 123 },
データ型: 'json',
タイムアウト: 30000、
成功: successCallback、
エラー: errorCallback、
完了: completeCallback
})
関数 successCallback(json) {
$('
').text(json.title).appendTo('body');
}
関数 errorCallback(xhr, status){
console.log('何か問題が発生しました!');
}
function completeCallback(xhr, status){
console.log('Ajax リクエストが終了しました。');
}
上記のコードのオブジェクトパラメータには複数の属性があり、その意味は次のとおりです:
async: この項目のデフォルトは true で、false に設定すると、同期リクエストが発行されることを意味します。
キャッシュ: この項目のデフォルトは true です。 false に設定すると、ブラウザーはサーバーから返されたデータをキャッシュしません。ブラウザ自体は POST リクエストによって返されたデータをキャッシュしないため、false に設定されていても、HEAD リクエストと GET リクエストに対してのみ有効であることに注意してください。
url: サーバー側の URL。これは唯一の必須属性であり、他の属性は省略できます。
type: サーバーに情報を送信するために使用される HTTP 動詞。デフォルトは GET です。その他の動詞には、POST、PUT、および DELETE があります。
dataType: サーバーから要求されたデータ型。text、html、script、json、jsonp、xml に設定できます。
data: サーバーに送信されるデータ。GET メソッドが使用される場合、この項目はクエリ文字列に変換され、URL の末尾に追加されます。
success: リクエストが成功したときのコールバック関数。関数パラメータは、サーバーから返されたデータ、ステータス情報、およびリクエストを発行した元のオブジェクトです。
timeout: 待機する最大ミリ秒数。この時間を過ぎてもリクエストが返されない場合、リクエストのステータスは自動的に失敗に変更されます。
error: リクエストが失敗したときのコールバック関数。関数パラメータは、リクエストを発行した元のオブジェクトと返されたステータス情報です。
complete: リクエストが成功したか失敗したかに関係なく実行されるコールバック関数。関数パラメータは、リクエストを発行した元のオブジェクトと返されたステータス情報です。
これらのパラメーターのうち、url は独立して、ajax メソッドの最初のパラメーターとして使用できます。つまり、上記のコードは次のように書くこともできます。
$.ajax('/url/to/json',{
入力: 'GET'、
データ型: 'json',
成功: successCallback、
エラー: errorCallback
})
簡単な書き方
ajax メソッドを記述する簡単な方法もいくつかあります。
$.get(): GET リクエストを実行します。
$.getScript(): JavaScript スクリプト ファイルを読み取り、実行します。
$.getJSON(): GET リクエストを発行して JSON ファイルを読み取ります。
$.post(): POST リクエストを作成します。
$.fn.load(): HTML ファイルを読み取り、現在の要素に置きます。
一般に、これらの便利なメソッドは、URL、データ、成功時のコールバック関数という 3 つのパラメータを順番に受け入れます。
(1)$.get()、$.post()
これら 2 つのメソッドは、それぞれ HTTP の GET メソッドと POST メソッドに対応します。
$.get('/data/people.html', function(html){
$('#target').html(html);
});
$.post('/data/save', {name: 'Rebecca'}, function (resp){
console.log(JSON.parse(resp));
});
get メソッドは、サーバー側 URL とリクエストが成功した後のコールバック関数の 2 つのパラメーターを受け入れます。 post メソッドには、これら 2 つのパラメーターの間に、サーバーに送信されるデータを表す別のパラメーターがあります。
上記のpostメソッドに対応するajaxの記述メソッドは以下の通りです。
$.ajax({
入力: 'POST'、
URL: '/data/save',
データ: {名前: 'レベッカ'}、
データ型: 'json'、
成功: function (それぞれ){
console.log(JSON.parse(resp));
}
});
(2)$.getJSON()
ajax メソッドを記述するもう 1 つの簡単な方法は、getJSON メソッドです。サーバーが JSON 形式でデータを返す場合、$.ajax メソッドの代わりにこのメソッドを使用できます。
$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(データ);
});
上記のコードは次の記述と同等です。
$.ajax({
データ型: "json",
URL: '/url/to/data',
データ: {'a': 1},
成功: function(data){
console.log(データ);
}
});
(3)$.getScript()
$.getScript メソッドは、サーバー側からスクリプト ファイルをロードするために使用されます。
$.getScript('/static/js/myScript.js', function() {
FunctionFromMyScript();
});
上記のコードは、まずサーバーから myScript.js スクリプトをロードし、次にコールバック関数内のスクリプトによって提供される関数を実行します。
getScript のコールバック関数は、スクリプト ファイルの内容、HTTP 応答のステータス情報、および ajax オブジェクト インスタンスの 3 つのパラメーターを受け取ります。
$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){
console.log( data ); // test.js
の内容
console.log( textStatus ); // 成功
console.log( jqxhr.status ); // 200
});
getScript は、ajax メソッドを記述する簡単な方法であるため、遅延オブジェクトを返し、遅延インターフェイスを使用できます。
jQuery.getScript("/path/to/myscript.js")
.done(function() {
// ...
})
.fail(function() {
// ...
});
(4)$.fn.load()
$.fn.load は jQuery のツール メソッドではなく、jQuery オブジェクト インスタンスに定義されたメソッドであり、サーバー側の HTML ファイルを取得して現在の要素に配置するために使用されます。このメソッドも ajax の操作に属するため、ここで一緒に説明します。
$('#newContent').load('/foo.html');
$.fn.load メソッドでは、セレクターを指定し、セレクターに一致するリモート ファイルの一部を現在の要素に配置し、操作完了時のコールバック関数を指定することもできます。
$('#newContent').load('/foo.html #myDiv h1:first',
関数(html) {
console.log('コンテンツが更新されました!');
});
上記のコードは、「#myDiv h1:first」に一致する foo.html の部分のみを読み込みます。読み込みが完了すると、指定されたコールバック関数が実行されます。
アヤックス イベント
jQuery は、特定の AJAX イベントのコールバック関数を指定するための次のメソッドを提供します。
.ajaxComplete(): ajax リクエストが完了しました。
.ajaxError(): Ajax リクエスト エラー。
.ajaxSend(): ajax リクエストが発行される前。
.ajaxStart(): 最初の ajax リクエストの発行が開始されます。つまり、まだ完了していない ajax リクエストはありません。
.ajaxStop(): すべての ajax リクエストが完了した後。
.ajaxSuccess(): ajax リクエストが成功した後。
以下に例を示します。
$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});
戻り値
ajax メソッドは遅延オブジェクトを返します。then メソッドを使用してオブジェクトのコールバック関数を指定できます (詳細については、「遅延オブジェクト」セクションを参照してください)。
$.ajax({
URL: '/data/people.json',
データ型: 'json'
}).then(関数 (それぞれ){
console.log(resp.people);
})
JSONP
ブラウザの「同一ドメイン制限」により、ajax メソッドは現在の Web ページのドメイン名に対してのみ HTTP リクエストを行うことができます。ただし、スクリプト要素 (
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
