jQueryクラス名セレクター(.class)の使い方を詳しく解説

今回は、jQuery クラス名セレクター (.class) の使い方について詳しく説明します。 jQuery クラス名セレクター (.class) を使用する際の 注意事項 について、実際のケースを見てみましょう。 。

1. はじめに

クラス名セレクターは、要素が所有する CSS クラスの名前によって一致する DOM 要素を検索します。

ページでは、要素に複数の CSS クラスを含めることができ、要素内に一致するクラス名がある場合は、CSS クラスをクラス名セレクターで選択できます。

クラス名セレクターは、ほとんどの人が大学時代にコースを選択したことがあるはずであり、学生は複数のコースを選択することができ、その要素を理解することができます。複数の生徒が選択できます。

CSS クラスと要素間の関係は、多対多の関係、1 対多、または多対 1 の関係になります。簡単に言えば、クラス名セレクターは要素の CSS クラス名に基づいて一致する要素を見つけます。

クラス名セレクターは次のように使用されます:

$(".class");

ここで、class は要素のクエリに使用される CSS クラス名です。

たとえば、CSS クラス名 word_orange を使用して要素をクエリするには、次の jQuery コードを使用できます。

$("word_orange");

2. アプリケーション

まず、ページに 2 つの

タグを追加します。そのうちの 1 つは CSS クラスを設定し、jQuery のクラス名セレクターを通じて CSS クラスが設定された

タグを選択し、その CSS スタイルを設定します。

3. コード

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<p class="myClass">注意观察我的样式</p>
<p>我的样式是默认的</p>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

4. 実行効果

5. 実行命令

上記のコードでは、そのうちの 1 つだけが

このタグは CSS クラス名を設定しますが、プログラム内に myClass という名前の CSS クラスがないため、このクラスには属性がありません。

クラス名セレクターは、myClass という名前の jQuery パッケージング セットを返します。

メソッドを使用して、対応する p 要素の CSS 属性値を設定します。ここでは、要素の背景色が濃い赤に設定され、テキストの色が設定されます。白に。 css()

複数の要素が同じ CSS スタイルを持つことができるため、クラス名セレクターは jQuery ラッパーのセットを取得することもあります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueの動的バインドコンポーネント、サブ親コンポーネント、マルチフォーム検証の実装手順の詳細な説明

jQuery要素セレクターのユースケースの詳細な説明

以上がjQueryクラス名セレクター(.class)の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。