jQuery_jquery に付属するいくつかの一般的なメソッドの概要

メソッド自体 ($.each,$.map,$.contains,$ajax)

一般的なツールと方法

(1)$.trim

$.trim メソッドは、文字列の先頭と末尾にある余分なスペースを削除するために使用されます。

コードをコピー コードは次のとおりです:

$.trim(' Hello ') // こんにちは

(2)$.contains

$.contains メソッドは、DOM 要素 (2 番目のパラメーター) が別の DOM 要素 (1 番目のパラメーター) の下位要素であるかどうかを示すブール値を返します。

コードをコピー コードは次のとおりです:

$.contains(document.documentElement, document.body); // true
$.contains(document.body, document.documentElement); // false

(3) $.each、$.map

$.each メソッドは、配列とオブジェクトを反復処理して、元のオブジェクトを返すために使用されます。データ コレクションとコールバック関数の 2 つのパラメーターを受け入れます。

コードをコピー コードは次のとおりです:

$.each([ 52, 97 ], function( インデックス, 値 ) {

console.log( インデックス ": " 値 );
});
// 0:52
// 1:97
var obj = {
p1: 「こんにちは」、
p2:「世界」
};
$.each( obj, function( key, value ) {
console.log( key ": " value );
});
// p1: こんにちは
// p2: ワールド


なお、jQuery オブジェクトのインスタンスにも each メソッド ($.fn.each) があり、両者は同様の機能を持っています。

$.map メソッドは配列やオブジェクトの走査にも使用されますが、新しいオブジェクトを返します。

コードをコピー コードは次のとおりです:

var a = ["a", "b", "c", "d", "e"];

a = $.map(a, function (n, i){
return (n.toUpperCase() i);
});
// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

$.inArray メソッドは、配列内の値の位置 (0 から始まる) を返します。値が配列にない場合は、-1 が返されます。

コードをコピー コードは次のとおりです:

var a = [1,2,3,4];

$.inArray(4,a) // 3

(5)$.extend

$.extend メソッドは、複数のオブジェクトを最初のオブジェクトにマージするために使用されます。

コードをコピー コードは次のとおりです:

var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"


$.extend のもう 1 つの用途は、元のオブジェクトを継承する新しいオブジェクトを生成することです。現時点では、最初のパラメータは空のオブジェクトである必要があります。

コードをコピー コードは次のとおりです:

var o1 = {p1:'a',p2:'b'};

var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
o
// オブジェクト {p1: "c", p2: "b"}


デフォルトでは、extend メソッドによって生成されるオブジェクトは「浅いコピー」です。つまり、プロパティがオブジェクトまたは配列の場合、オブジェクトまたは配列へのポインターのみが生成され、値はコピーされません。 「ディープ コピー」が必要な場合は、extend メソッドの最初のパラメータにブール値 true を渡すことができます。

コードをコピー コードは次のとおりです:

var o1 = {p1:['a','b']};

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 = "";
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 リクエストを行うことができます。ただし、スクリプト要素 (<script>) を現在の Web ページに挿入すると、別のドメイン名に GET リクエストを行うことができます。この回避策は JSONP (JSON with Padding) と呼ばれます。 </script>

ajax メソッドは、object パラメーターで dataType を JSONP として指定することで、JSONP リクエストを発行できます。

コードをコピー コードは次のとおりです:

$.ajax({
URL: '/data/search.jsonp',
データ: {q: 'a'},
データ型: 'jsonp',
成功: function(resp) {
$('#target').html('結果: ' resp.results.length);
}
});)

JSONP への通常のアプローチは、リクエストする URL の後にコールバック関数の名前を追加することです。 ajax メソッドでは、要求された URL が「callback=?」のような形式で終わる場合、自動的に JSONP 形式になることが規定されています。したがって、上記のコードは次のように書くこともできます。

コードをコピー コードは次のとおりです:

$.getJSON('/data/search.jsonp?q=a&callback=?',
関数(それぞれ) {
$('#target').html('結果: ' resp.results.length);
}
);