jQuery_jquery に付属するいくつかの一般的なメソッドの概要-jsチュートリアル-php.cn

メソッド自体 ($.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 = "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 リクエストを行うことができます。ただし、スクリプト要素 (

人気のチュートリアル

詳細>

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

').text(json.title).appendTo('body'); } 関数 errorCallback(xhr, status){ console.log('何か問題が発生しました!'); } function completeCallback(xhr, status){ console.log('Ajax リクエストが終了しました。'); }

').text(json.title).appendTo('body');
}
関数 errorCallback(xhr, status){
console.log('何か問題が発生しました!');
}
function completeCallback(xhr, status){
console.log('Ajax リクエストが終了しました。');
}