jQueryでクラスを取得する方法-フロントエンドQ&A-php.cn

jQueryでクラスを取得する方法

WBOY

リリース： 2023-05-08 21:03:08

オリジナル

4328 人が閲覧しました

jQuery はどのようにしてクラスを取得しますか?

jQuery は、HTML 要素や CSS 要素を操作するための使いやすい関数やメソッドを多数提供する人気の JavaScript ライブラリです。 Web ページでは、スタイルを定義したり、特別な要素をマークしたりするために、HTML クラス属性がよく使用されます。 jQuery では、.class セレクターを使用して、特定の要素を簡単に選択し、操作できます。しかし、クラスの値を取得するにはどうすればよいでしょうか?

jQuery には、要素のクラスを取得するためのメソッドがいくつか用意されています。一般的に使用されるいくつかのメソッドを次に示します:

.attr() メソッド

## attr() メソッドは、要素の属性値を取得または設定できます。 .attr('class') を呼び出すと、要素のクラス値が返されます。例:

let $element = $('.example');
let classValue = $element.attr('class');
console.log(classValue); // 输出元素的 class 值

ログイン後にコピー

.prop() メソッドは、属性値を取得または設定するために使用されます。 () メソッド。このメソッドは、checked、readonly などのブール型プロパティを取得するためにのみ使用できます。ただし、class 属性はブール値ではないため、.prop('className') を使用してその値を取得できます。例:

let $element = $('.example');
let classValue = $element.prop('className');
console.log(classValue); // 输出元素的 class 值

ログイン後にコピー

.hasClass() メソッドは、要素に特定のクラスが含まれているかどうかを確認するために使用されます。 true 、それ以外の場合は false を返します。例:

let $element = $('.example');
let hasClass = $element.hasClass('my-class');
if (hasClass) {
  console.log('该元素包含 my-class');
} else {
  console.log('该元素不包含 my-class');
}

ログイン後にコピー

上記のメソッドを使用すると、要素のクラス値を簡単に取得し、対応する操作を実行できます。ただし、要素に複数のクラスがある場合、上記のメソッドはそのうちの 1 つだけを返すことに注意してください。すべてのクラスを取得する必要がある場合は、.hasClass() メソッドと .split() メソッドを組み合わせて使用し、クラスを配列に分割します。例:

let $element = $('.example');
let classValue = $element.attr('class').split(' ');
console.log(classValue); // 输出元素的所有 class，以数组形式展示

ログイン後にコピー

summary

要素のクラス値の取得は、日常の Web 開発でよく使用されます。jQuery を使用すると、要素のクラス値を簡単に取得し、対応する操作を実行できます。上記は、一般的に使用されるメソッドをいくつかリストしたもので、その中で、.attr() メソッドと .prop() メソッドは要素の属性値を取得するためによく使用され、.hasClass() メソッドは要素の属性値を取得するためによく使用されます。要素には特定のクラスが含まれています。これらの方法を使用すると、Web ページ内のさまざまな要素をより適切に操作できるようになります。

以上がjQueryでクラスを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。