jqueryでクラスを追加および削除する方法-フロントエンドQ&A-php.cn

jqueryでクラスを追加および削除する方法

青灯夜游

リリース： 2022-11-22 19:24:31

オリジナル

2453 人が閲覧しました

AddClass() とremoveClass() は、jquery でクラスを追加および削除するために使用できます。 addClass() は、選択した要素に 1 つ以上のクラスを追加します。構文は "$(selector).addClass(class name)" です。複数のクラスを追加する必要がある場合は、スペースを使用してクラス名を区切ります。 RemoveClass() は選択した要素から 1 つ以上のクラスを削除します。構文は "$(selector).removeClass(class name)" です。パラメータは省略でき、すべてのクラスがクリアされます。

jqueryでクラスを追加および削除する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

クラスを追加および削除するための jquery メソッド

##メソッド説明addClass()指定されたクラス名を一致する要素に追加します。 removeClass()一致するすべての要素からすべてのクラスまたは指定されたクラスを削除します。

jquery addClass()Add class

addClass() メソッドは、1 つまたは複数のクラスを追加します。

このメソッドは既存のクラス属性を削除しませんが、1 つ以上のクラス属性を追加するだけです。

ヒント: 複数のクラスを追加する必要がある場合は、スペースを使用してクラス名を区切ってください。

構文:

$(selector).addClass(class)

ログイン後にコピー

パラメータ説明クラス必須。 1 つ以上のクラス名を指定します。

#例:

最初の p 要素にクラスを追加します

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").addClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<button>向第一个 p 元素添加一个类</button>
	</body>
</html>

ログイン後にコピー

jqueryでクラスを追加および削除する方法

jQueryremoveClass() クラスの削除 RemoveClass() メソッドは、選択した要素から 1 つ以上のクラスを削除します。

注: パラメータが指定されていない場合、このメソッドは選択した要素からすべてのクラスを削除します。

構文:

$(selector).removeClass(class)

ログイン後にコピー

パラメータクラスオプション。削除するクラスの名前を指定します。 #例:

説明
	複数のクラスを削除する必要がある場合は、スペースを使用してクラス名を区切ってください。このパラメータが設定されていない場合、すべてのクラスが削除されます。

説明

複数のクラスを削除する必要がある場合は、スペースを使用してクラス名を区切ってください。

このパラメータが設定されていない場合、すべてのクラスが削除されます。

すべての

の「イントロ」クラスを削除

<!DOCTYPE html>
<html>
	<head>
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p").removeClass("intro");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="h1">This is a heading</h1>
		<p class="intro">This is a paragraph.</p>
		<p>This is another paragraph.</p>
		<button>从第一个段落中删除类</button>
	</body>
</html>

ログイン後にコピー

##【推奨学習:

jQuery ビデオチュートリアル jqueryでクラスを追加および削除する方法、