JqueryUI-クラスを削除
この章では、 removeClass()メソッド。これは、jQueryUIの視覚効果を管理するために使用されるメソッドの1つです。removeClass（）メソッドは、適用されたクラスを要素から削除します。
removeClass（）メソッドは、すべてのスタイル変更をアニメーション化しながら、指定されたクラスを一致した要素から削除します。
構文
jQueryUIのバージョン1.0で追加されました
ザ・ removeClass() メソッドの基本的な構文は次のとおりです。
.removeClass( className [, duration ] [, easing ] [, complete ] )| シニア番号 | パラメータと説明 |
|---|---|
| 1 | className これは、削除する1つ以上のCSSクラス（スペースで区切る）を含む文字列です。 |
| 2 | duration これはタイプが数値または文字列であり、効果のミリ秒数を示します。値0は、進行せずに要素を新しいスタイルで直接取得します。デフォルト値は400です。 |
| 3 | easing これはString型であり、エフェクトを進める方法を示します。デフォルト値はswingです。可能な値はここにあります。 |
| 4 | complete これは、この要素の効果が完了したときに各要素に対して呼び出されるコールバックメソッドです。 |
jQueryUIのバージョン1.9で追加されました
バージョン1.9では、このメソッドは子オプションをサポートするようになりました。これにより、子孫要素もアニメーション化されます。
.removeClass( className [, options ] )| シニア番号 | パラメータと説明 |
|---|---|
| 1 | className これは、1つ以上のCSSクラス（スペースで区切られている）を含む文字列です。 |
| 2 | options これは、すべてのアニメーション設定を表します。すべてのプロパティはオプションです。可能な値は次のとおりです。
|
例
次の例は、removeClass（）メソッドの使用法を示しています。
シングルクラスの合格
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>上記のコードをHTMLファイルに保存しましょう removeclassexample.htmjavascriptをサポートする標準のブラウザで開くと、次の出力も表示されるはずです。今、あなたは結果で遊ぶことができます-
[クラスの追加]ボタンと[クラスの削除]ボタンをクリックして、ボックスに対するクラスの効果を確認します。