jqueryがクラスstyles_jqueryを動的に追加および削除する方法の概要

スタイルの取得と設定 クラスの取得と設定はどちらも attr() メソッドを使用して行うことができます。たとえば、attr() メソッドを使用して p 要素のクラスを取得します。JQuery コードは次のとおりです。

コードをコピーします コードは次のとおりです:

var p_class = $("p").attr("class") //p 要素のクラスを取得します
[html] attr() メソッドを使用して p 要素のクラスを設定します。JQuery コードは次のとおりです:
[code]
1 $("p").attr("'class", "high" ); //p 要素のクラスを "high" に設定します

ほとんどの場合、元のクラスに新しいクラスを追加するのではなく、元のクラスを新しいクラスに置き換えます。
追加スタイル 追加クラスとは何ですか? p 要素の元のクラスが myClass の場合、high という名前のクラスを追加すると、クラス属性は「myClass high」になります。これは、myClass と high の 2 つのスタイルを重ね合わせたものになります。 JQuery には、スタイルを追加するための特別な addClass() メソッドが用意されています。例を理解しやすくするために、まずスタイル タグに別のスタイルのセットを追加します。

コードをコピーします コードは次のとおりです。

1 .high{ color:red; }
2 .another{ font-style:italic; color:blue; } 次に、「クラスを追加」ボタンを追加します。ボタンのイベント コードは次のとおりです:
1 $("#btn_3").click(function(){
2 $("#nm_p").addClass("another" ); // スタイルを追加
3 });


「クラスを追加」ボタンをクリックすると、p 要素のスタイルが斜体に変わり、前の赤色のフォントも に変わります。青。このとき、p要素は「高」と「別」という2つの階級値を同時に持ちます。 CSSには以下の2つの規定があります。

1. 複数のクラス値が要素に追加される場合、それはそれらのスタイルを結合することと同じです。 2. 異なるクラスが同じスタイル属性を設定する場合、後者が前者をオーバーライドします。 上記の例では、次のスタイルを p 要素に追加するのと同じです:

コードをコピーします コードは次のとおりです。 :

1 色 : 赤; /* フォントの色設定 赤*/

2 font-style:italic;
3 色:青;上記のスタイルの中には 2 つの「color」属性があり、後続の「color」属性は前の「color」属性を上書きするため、最終的な「color」属性の値は「red」ではなく「blue」になります。
スタイルの削除 ユーザーがボタンをクリックしたときにクラスの特定の値を削除したい場合は、addClass() メソッドの逆の機能である、removeClass() メソッドを使用して実行できます。一致するすべてのクラスまたは指定されたクラスから。たとえば、次の JQuery コードを使用して、p 要素の値が「high」であるクラスを削除できます:

コードをコピー

コードは次のとおりです。 1 $("p").removeClass("high") //p 要素の値「high」を持つクラスを削除します。 p 要素の両方のクラスを削除するには、removeClass() メソッドを 2 回使用する必要があります。コードは次のとおりです。 1 $("p").removeClass("high").removeClass ("another");

クエリはより簡単なメソッドを提供します。スペースを含む複数のクラス名を削除できます。コードは次のとおりです。

1 $("p").removeClass("high another");
さらに、removeClass() の機能を使用することもできます。 ) を使用して完了することもできます。パラメータを取らない場合、すべてのクラス値が削除されます。 JQuery コードは次のとおりです。
1 $("p").removeClass(); //p 要素のすべてのクラスを削除します。 style JQuery toggle()というメソッドがあり、JQueryのコードは以下の通りです:
1 toggleBtn.toggle(function(){
2 //要素表示コード③
3 }, function(){
4 // 要素非表示コード④
5 })


ここでのoggle()メソッドの機能は、コード③とコード④の2つの関数を交互に実行することです。が元々表示されている場合は、それを非表示にします: 要素が元々非表示であった場合は、それを表示します。このとき、繰り返し行われる動作の切り替えを制御するために主に toggle() メソッドが使用されます。
さらに、JQuery はスタイルの繰り返しの切り替えを制御する toggleClass() メソッドも提供します。クラス名が存在する場合は削除し、クラス名が存在しない場合は追加します。たとえば、p 要素に対して toggleClass() メソッドを実行します。

コードをコピー

コードは次のとおりです: 1 $("p").toggleClass ("another "); // クラス名 "another" を繰り返し切り替えます
「スタイルの切り替え」ボタンをクリックし続けると、p要素のクラスの値が「myClass」と「myClass another」の間で繰り返し切り替わります。
特定のスタイルが含まれているかどうかの判断 hasClass() を使用して、要素に特定のクラスが含まれている場合は true を返し、そうでない場合は false を返します。たとえば、次のコードを使用して、p 要素にクラス「another」が含まれているかどうかを判断できます。

コードをコピー コードは次のとおりです:

1 $("p").hasClass("another");

このメソッドは、コードの可読性を高めるために生成されます。 JQuery 内部では、この関数を完了するために is() メソッドが実際に呼び出されます。このメソッドは次のコードと同等です:

コードをコピー コードは次のとおりです:

ソースプリントを表示しますか? 1 $("p").is(".another");