jQueryはJavaScriptのライブラリです
利用するには.htmlファイルなどのheader内にscriptタグで導入しないと使えません
jQueryでclassを追加する方法 addClass
JavaScriptでclassを追加するには『classList.addメソッド』を使用します
今回はjQueryを利用してclassを追加してみます
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p>jQueryで書いてます</p>
<script src="src/index.js"></script>
</body>
</html>p.change-red {
color: red;
}まず、.htmlファイルと.cssファイルを用意して、以上のように記述します
<p>jQueryで書いてます</p>のpタグに「change-red」のclassを追加して文字を赤色に変えてみます
クラス名で困った方は是非こちらを！！
| CSS設計完全ガイド 〜詳細解説＋実践的モジュール集 | ||||
|
.jsファイルを作成し、以下の用意に記述しclassを追加します
$(function () {
$("p").addClass("change-red");
});jQuery 記述方式
$(function () {
/ jQueryのコード記述 /
});
基本構文
- $(“セレクタ”).メソッド(“パラメータ[引数]”);
セレクタ・・・HTML要素
メソッド・・・記述したセレクタに命令
ここでは、pタグ要素に.addClassでクラスを追加
何のclassか？⇨「change-red」のクラス
の、流れになります
メソッド名はキャメルケースでの記述になります
jQueryはJavaScriptのライブラリです利用するには.htmlファイルなどのheader内にscri…
classを削除する方法 removeClass
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<p class="red">jQueryで書いてます</p>
<script src="src/index.js"></script>
</body>
</html>p.red {
color: red;
}
この状態は、pタグにclass="red"が当たっています
これからclassを削除します
$(function () {
$("p").removeClass("red");
});削除する場合はremoveClassを使用します
removeClassメソッドを当てるとclass="red"が削除された文字は、黒色＝何もcssが当たってない状態になるわけです！(´ｰ｀)
jQuery おすすめ書籍
| jQuery最高の教科書 | ||||
|
jQuery チュートリアル
