JQuery のスタイル設定、追加、削除、switching_jquery の実装方法

この記事の例では、JQuery がスタイルの設定、追加、削除、切り替えを実装する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JQuery を使用すると、要素のスタイル操作が非常に簡単になります。 JQuery を使用して要素スタイルの取得、設定、追加、削除などの操作を行う方法を見てみましょう。

スタイルの取得と設定

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

var p_class = $("p").attr("class");
//获取p元素的class

attr() メソッドを使用して p 要素のクラスを設定します。JQuery コードは次のとおりです。

$("p").attr("'class", "high");
//设置p元素的class为 "high"

ほとんどの場合、元のクラスに新しいクラスを追加するのではなく、元のクラスを新しいクラスに置き換えます。

スタイルを追加

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

.high{ color:red; }
.another{ font-style:italic; color:blue; }

次に、Web ページに「クラスを追加」ボタンを追加します。ボタンのイベント コードは次のとおりです。

$("#btn_3").click(function(){
  $("#nm_p").addClass("another");
  // 追加样式
});

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

1. 複数のクラス値が要素に追加される場合、それはそれらのスタイルを結合することと同じです。

2. 異なるクラスが同じスタイル属性を設定する場合、後者が前者をオーバーライドします。

上記の例では、次のスタイルを p 要素に追加するのと同じです:

color : red;  /* 字体颜色设置红色*/ 
font-style:italic; 
color:blue;

上記のスタイルには 2 つの「color」属性があり、後の「color」属性は前の「color」属性を上書きするため、最終的な「color」属性の値は「red」ではなく「blue」になります。

スタイルを削除

ユーザーがボタンをクリックしたときにクラスの特定の値を削除したい場合は、addClass() メソッドの逆の機能であるremoveClass() メソッドを使用できます。その機能はすべての要素または指定された要素を削除することです。一致する要素から。たとえば、次の JQuery コードを使用して、p 要素の値が「high」を持つクラスを削除できます:

$("p").removeClass("high");
//移除p元素中值为"high"的class

p 要素の両方のクラスを削除する場合は、removeClass() メソッドを 2 回使用する必要があります。コードは次のとおりです。

コードをコピー コードは次のとおりです:$("p").removeClass("high").removeClass (「別の」);

JQuery はより簡単な方法を提供します。複数のクラス名をスペースで削除できます。コードは次のとおりです:

コードをコピーします コードは次のとおりです。$("p").removeClass("high another");

さらに、removeClass() メソッドの機能を使用して同じ効果を実現することもできます。パラメータを受け取らない場合、すべてのクラス値が削除されます。JQuery コードは次のとおりです。

スタイルを切り替える

$("p").removeClass();
//移除p元素的所有class

JQuery には toggle() メソッドがあります。JQuery コードは次のとおりです。

ここでの

toggle()メソッドの機能は、コード③とコード④の2つの機能を交互に実行することです。要素が元々表示されている場合は非表示にし、要素が元々非表示である場合は表示します。このとき、toggle()メソッドは主に動作の繰り返しの切り替えを制御します。

toggleBtn.toggle(function(){
  //元素显示 代码③
}, function(){
  //元素隐藏 代码④
})

さらに、JQuery はスタイルの繰り返しの切り替えを制御する toggleClass() メソッドも提供します。クラス名が存在する場合は削除し、クラス名が存在しない場合は追加します。たとえば、p 要素に対して toggleClass() メソッドを実行します。

「スタイル切り替え」ボタンを押し続けると、p要素のクラスの値が「myClass」と「myClass another」の間で繰り返し切り替わります。

$("p").toggleClass("another");
//重复切换类名“another”

特定のスタイルが含まれているかどうかを判断します

hasClass() は、要素に特定のクラスが含まれているかどうかを判断するために使用できます。含まれている場合は true を返し、そうでない場合は false を返します。たとえば、次のコードを使用すると、p 要素にクラス「another」が含まれているかどうかを判断できます。

コードをコピー

コードは次のとおりです。$("p").hasClass("another");

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

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

$("p").is(".another"); //is ("." クラス);

この記事が皆さんの jQuery プログラミングに役立つことを願っています。