Web テクノロジーの急速な発展により、JavaScript は Web アプリケーションに必要な言語の 1 つになりました。最も人気のある JavaScript ライブラリの 1 つである jQuery は、DOM を操作するためのわかりやすく強力な API のセットを開発者に提供します。 jQuery では、DOM 要素の属性とスタイルを直接操作できるだけでなく、DOM 内のメソッドを呼び出すこともできるため、開発者は Web アプリケーションをより便利かつ迅速に開発できます。

jQuery では、addClass、removeClass、attr などの一般的な DOM メソッドを使用して要素を操作し、要素の追加、削除、更新などの操作を完了できます。 jQuery には、要素スタイルを簡単に追加および削除できる addClass メソッドとremoveClass メソッド、要素をすばやく非表示および表示できる Hide メソッドと show メソッド、子要素を簡単に追加できる appendTo メソッドと prependTo メソッドなど、いくつかの独自のメソッドも用意されています。

同時に、jQuery は、DOM 内のメソッドを直接呼び出して、対応する結果を返すことができるいくつかのメソッドも提供します。たとえば、jQuery の width メソッドと height メソッドは要素の幅と高さを返すことができ、offset メソッドとposition メソッドはドキュメント内の要素の位置を返すことができます。さらに、jQuery は、prop、val、html、text メソッドなど、要素の属性と値にアクセスして変更するためのメソッドも提供します。

jQuery の DOM でメソッドを呼び出す方法を詳しく見てみましょう。

1. width メソッドと height メソッド

jQuery では、width メソッドと height メソッドを通して、 height メソッドは、要素の幅と高さを直接取得または設定できます。たとえば、次の方法で要素の幅と高さを取得できます。

//获取元素宽度 var width = $("#element").width(); //获取元素高度 var height = $("#element").height();

要素の幅と高さを設定したい場合は、対応する値をメソッドに渡すことができます。以下に示すように:

//设置元素宽度 $("#element").width(200); //设置元素高度 $("#element").height(200);

ここでの値は数値、文字列、またはコールバック関数であることに注意してください。コールバック関数の戻り値は、以下に示すように設定される値です。

//使用回调函数设置元素宽度 $("#element").width(function(index, width){ return width * 2; });

この例では、コールバック関数のインデックスはコレクション内の要素のインデックスであり、幅は要素の現在の幅です。コールバック関数で返される値は新たに設定する幅で、ここでは元の幅の2倍が返されます。

2. offset メソッドとposition メソッド

offset メソッドとposition メソッドは、ドキュメント内の要素の位置と、その親要素に対する相対的な位置をそれぞれ取得できます。 width メソッドと height メソッドと同様に、これら 2 つのメソッドでも値を渡して要素の位置を設定できます。

//获取元素在文档中的位置 var offset = $("#element").offset(); //获取元素相对于其父元素的位置 var position = $("#element").position();

要素の位置を設定する場合は、次のようにメソッドを呼び出すことができます。

//设置元素在文档中的位置 $("#element").offset({ top: 100, left: 200 }); //设置元素相对于其父元素的位置 $("#element").position({ top: 100, left: 200 });

これら 2 つのメソッドを使用して要素の位置を設定する場合、渡される値はコールバック関数も使用でき、関数の戻り値が設定される値になります。

3. prop メソッドと val メソッド

prop メソッドと val メソッドは、要素のプロパティと値にアクセスして変更するために使用できます。このうち、prop メソッドは、チェックされた属性や無効な属性などの要素の属性にアクセスして変更するために使用され、val メソッドは、要素の値にアクセスして変更するために使用されます。

//获取元素属性值 var checked = $("input[type='checkbox']").prop("checked"); //设置元素属性值 $("input[type='checkbox']").prop("checked", true); //获取元素值 var value = $("input[type='text']").val(); //设置元素值 $("input[type='text']").val("Hello, jQuery!");

この例では、チェックボックス要素の selected 属性値を取得して true に設定し、テキスト ボックスの値も取得して "Hello, jQuery!" に設定します。

4. html メソッドとテキスト メソッド

html メソッドとテキスト メソッドは、要素の HTML コンテンツとプレーン テキスト コンテンツを取得または設定するために使用できます。パラメータが渡された場合、対応する値が要素のコンテンツに設定され、それ以外の場合、これらのメソッドは要素のコンテンツを返します。

//获取元素HTML内容 var html = $("#element").html(); //设置元素HTML内容 $("#element").html("
Hello, jQuery!
"); //获取元素纯文本内容 var text = $("#element").text(); //设置元素纯文本内容 $("#element").text("Hello, jQuery!");

html メソッドと text メソッドを使用して要素のコンテンツを設定する場合、受信パラメーターに HTML タグが含まれている場合は html メソッドが使用され、それ以外の場合は text メソッドが使用されることに注意してください。

概要

jQuery では、DOM 要素の属性とスタイルを直接操作できるだけでなく、DOM 内のメソッドを呼び出すこともできるため、開発者は Web アプリケーションをより便利かつ迅速に開発できます。この記事では、実際の開発で使用すると便利になる、よく使われるメソッドをいくつか紹介します。なお、jQuery は DOM 内のメソッドを呼び出すことができますが、リソース消費に問題がある場合があるため、実際の開発では状況に応じて合理的に使用する必要があります。

以上がjqueryはdom内のメソッドを呼び出すことができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。