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
$.each メソッドは、配列とオブジェクトを反復処理して、元のオブジェクトを返すために使用されます。データ コレクションとコールバック関数の 2 つのパラメーターを受け入れます。
});
// 0:52
// 1:97
var obj = {
p1: 「こんにちは」、
p2:「世界」
};
$.each( obj, function( key, value ) {
console.log( key ": " value );
});
// p1: こんにちは
// p2: ワールド
なお、jQuery オブジェクトのインスタンスにも each メソッド ($.fn.each) があり、両者は同様の機能を持っています。
$.map メソッドは配列やオブジェクトの走査にも使用されますが、新しいオブジェクトを返します。
return (n.toUpperCase() i);
});
// ["A0", "B1", "C2", "D3", "E4"]
$.inArray メソッドは、配列内の値の位置 (0 から始まる) を返します。値が配列にない場合は、-1 が返されます。
$.extend メソッドは、複数のオブジェクトを最初のオブジェクトにマージするために使用されます。
$.extend(o1,o2);
o1.p1 // "c"
$.extend のもう 1 つの用途は、元のオブジェクトを継承する新しいオブジェクトを生成することです。現時点では、最初のパラメータは空のオブジェクトである必要があります。
var o = $.extend({},o1,o2);
o
// オブジェクト {p1: "c", p2: "b"}
デフォルトでは、extend メソッドによって生成されるオブジェクトは「浅いコピー」です。つまり、プロパティがオブジェクトまたは配列の場合、オブジェクトまたは配列へのポインターのみが生成され、値はコピーされません。 「ディープ コピー」が必要な場合は、extend メソッドの最初のパラメータにブール値 true を渡すことができます。
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 リクエストを行うことができます。ただし、スクリプト要素 (
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7396
15
1630
14
1358
52
1268
25
1217
29
jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド
Feb 27, 2024 pm 06:45 PM
jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか?
Feb 28, 2024 pm 03:12 PM
jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u
jQueryで要素の高さ属性を削除するにはどうすればよいですか?
Feb 28, 2024 am 08:39 AM
jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます
jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する
Feb 28, 2024 pm 09:06 PM
タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: <
徹底した分析: jQuery の長所と短所
Feb 27, 2024 pm 05:18 PM
jQuery は、フロントエンド開発で広く使用されている高速、小型、機能豊富な JavaScript ライブラリです。 2006 年のリリース以来、jQuery は多くの開発者にとって最適なツールの 1 つとなっていますが、実際のアプリケーションでは、いくつかの利点と欠点もあります。この記事では、jQuery の長所と短所を詳しく分析し、具体的なコード例で説明します。利点: 1. 簡潔な構文 jQuery の構文設計は簡潔かつ明確であるため、コードの読みやすさと記述効率が大幅に向上します。例えば、
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか?
Feb 29, 2024 am 09:03 AM
jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します
jQuery における eq の役割と応用シナリオを理解する
Feb 28, 2024 pm 01:15 PM
jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s
