ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryでクラスをクリアする方法
jqueryでクラスをクリアする方法
- 青灯夜游オリジナル
- 2022-05-16 18:40:494199ブラウズ
3 メソッド: 1. "element object.removeClass("クラス名")" を使用して、指定したクラスを削除します。指定されたパラメーターがない場合は、クラスをクリアできます。 2. "element object.removeClass("クラス名") を使用します。指定したクラスを削除するには、toggleClass("クラス名") ",false)"を使用します。 3. クラスをクリアするには、"element object.attr("class","")" を使用します。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
#jquery でクラスをクリアする 3 つの方法
- #removeClass() を使用してクラスを削除する
- toggleClass() を使用してクラスを削除します
- attr() および prop() を使用してクラス属性の値を空に設定します
removeClass() メソッドは、選択した要素から 1 つ以上のクラスを削除します。
$(selector).removeClass(class)
注: パラメーターが指定されていない場合、このメソッドは選択した要素からすべてのクラスを削除します。
例: すべての
要素から「intro」クラスを削除します
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style type="text/css">
.intro {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p class="intro">这是一个段落。</p>
<p class="intro">这是另一个段落。</p>
<button>移除所有P元素的"intro"类</button>
</body>
</html>
#toggleClass() メソッドは、選択した要素の 1 つ以上のクラスの追加と削除を切り替えます。
このメソッドは、各要素で指定されたクラスをチェックします。クラスが存在しない場合は追加し、設定されている場合は削除します。これをトグル効果と呼びます。$(selector).toggleClass(class,switch)ただし、「switch」パラメータを使用すると、クラスのみを削除または追加のみを指定できます。 スイッチ: オプションのパラメータ、ブール値は、クラスを追加のみするか (true)、削除するか (false) を指定します。
- #
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function() { $("button").click(function() { $("p").toggleClass("main",false); }); }); </script> <style> .main { font-size: 120%; color: red; } </style> </head> <body> <button>删除P元素的"main"类</button> <p class="main">这是一个段落。</p> <p class="main">这是另一个段落。</p> </body> </html>
#3. attr() と prop() を使用してクラス属性の値を空に設定します
attr() と prop() は両方とも指定された属性と値を設定できます。実行すると、class 属性の値を空に設定してクラスを削除します $(document).ready(function() {
$("button").click(function() {
$("p").attr("class","");
// $("p").prop("class","");
});
});
#[推奨される学習:
jQuery ビデオ チュートリアル、
Web フロントエンド ビデオ
以上がjqueryでクラスをクリアする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。