プログラミング言語
jQuery

【jQuery入門③】メソッド紹介 ～HTML・CSS編～

プログラミング言語

この記事では、数あるjQueryのメソッドの中から、HTMLやCSSを書き換えたり、取得したりするものを紹介していきます。ぜひ一緒にコードを書いて、動かしてみましょう。

環境構築

一緒に練習する方は、3つのファイルを用意してください。
sample.html
sample.css
sample.js

同じフォルダに格納すれば、CSSとJSを読み込めるようになっています。

※jQuery入門①の記事で一緒に練習した方は、同名のファイルが既にあるかと思います。内容が異なりますので、復習したい方は別フォルダに移すなどしてバックアップを取ってくださいね。

それぞれのファイルに、下記のコードをコピーしてください。 

<!-- sample.html -->
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="sample.css">
  <title>サンプル</title>
</head>
<body>
  <h1>サンプルページです</h1>
  <p class="underline">これはpタグの文章です</p>
  <button type="button" name="button1">ボタン</button>
  <ul>
    <li>項目1</li>
    <li>項目2</li>
  </ul>

  <!-- ライブラリ読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <!-- jsファイル読み込み -->
  <script src="sample.js"></script>
</body>
</html>
/* sample.css */
.red {
  color: red;
}

.underline {
  text-decoration:underline solid blue
}
//sample.js
//このファイルにはまだ何も書かなくてOKです

それでは早速、練習していきましょう。

html()メソッド

HTML要素を取得したり、出力することができるメソッドです。

HTMLを取得する

指定したセレクタの要素を取得することができます。
result という変数を用意し、h1タグのコンテンツを取得してみましょう。

const result = $("h1").html();
console.log(result);

結果

サンプルページです

h1タグのデータを取得できました。

HTMLを出力する

セレクタで指定した要素の中に、HTMLを出力します。
html()メソッドには、元のHTMLを上書きするという性質があります。
実際に動かして確認してみましょう。

$("button").click(function () {
  $("ul").html("<li>項目3</li>");
});

結果

元々あったliタグの項目1・項目2がなくなることがわかりますね。
これは、html()メソッドによって、ulタグの中が上書きされたためです。

上書きではなく、追加したい場合に使えるのが、次に紹介するappend()メソッドです。

append()メソッド

セレクタで指定した要素の、子要素の一番うしろにHTMLを挿入することができるメソッドです。

$("button").click(function () {
  $("ul").append("<li>項目3</li>");
});

結果

セレクタで指定したulタグの、子要素(liタグ)の最後に、項目3が追加されました。
このように、append()メソッドを使えば、元からある要素を残して追加することができます。

text()メソッド

指定したセレクタのテキストを取得したり、取得したデータをテキストとして出力することができるメソッドです。

テキストを取得する

セレクタで指定した要素を、テキストとして取得することができます。
pタグの内容を取得してみましょう。

const pText = $("p").text();
console.log(pText);

結果

これはpタグの文章です

pタグの中をテキストとして取得することができました。

テキストを出力する

テキストを出力する場合、html()メソッドと同様に、出力した内容で上書きされます。

$("button").click(function () {
  $("p").text("テキストを上書きしました");
});

結果

一点注意しなければならないのは、text()メソッドの引数にHTMLタグを含む文字列を指定しても、あくまでテキストとして出力されるという点です。

$("p").text("<p>これはpタグの文章です</p>");

このように引数を指定すると、「<p>これはpタグの文章です</p>」という文字列として出力されてしまいます。HTMLとして出力したい場合は、html()メソッドを使用してください。

addClass()メソッド

addClass()は、クラスを追加するメソッドです。
pタグに、redクラスを追加してみましょう。

$("button").click(function () {
  $("p").addClass("red");
});

結果

redクラスが追加され、pタグの文字が赤くなりました。

removeClass()メソッド

removeClass()は、クラスを削除するメソッドです。
pタグのunderlineクラスを削除してみましょう。

$("button").click(function () {
  $("p").removeClass("underline");
});

結果

underlineクラスが削除され、pタグの下線が消えました。

toggleClass()メソッド

toggleClass()メソッドを使えば、「指定のクラスがあるときは削除、ないときは追加」という処理を一つのメソッドで行うことができます。

$("button").click(function () {
  $("p").toggleClass("underline");
});

結果

attr()メソッド

attr()メソッドを使うと、HTML要素の属性の取得・追加などができます。

属性を取得する

引数に取得したい属性を書くことで、その属性の値を取得することができます。

const buttonName = $('button').attr('name');
console.log(buttonName);

結果

button1

buttonタグのname属性「button1」を取得することができました。

属性を変更する

属性を変更する場合は、引数が2つ必要になります。
第一引数と第二引数は、カンマで区切ります。

.attr(“変更したい属性”, “変更する内容”)

pタグのクラスを、redに変更してみましょう。

$("button").click(function () {
  $("p").attr("class", "red");
});

結果

pタグのクラスがredに変更され、下線が消えて文字が赤くなりました。

css()メソッド

最後に紹介するcss()メソッドは、指定したセレクタのCSSを直接書き換えるメソッドです。
複雑なCSSの場合はクラスの変更で対応する方が分かりやすいのですが、簡単なCSSの変更であればこのメソッドを使ってもいいでしょう。

引数は次のように書いていきます。

.css(“プロパティ”, “値”);

$("button").click(function () {
  $("p").css("color", "green");
});

結果

pタグのCSSが上書きされて、文字が緑色になりました。

さいごに

jQueryには、ほかにも多くのメソッドが用意されています。
興味のある人はぜひ調べてみてください。

次の記事では、動きを付けた画像の表示など、アニメーションに関するメソッドを紹介します！

【jQuery入門④】メソッド紹介 ～アニメーション編～
この記事では、jQueryのメソッドの中から、アニメーションに関するメソッドを紹介していきます。ぜひ一緒にコードを書いて、動かしてみましょう。
snome.jp
2021.08.31
タイトルとURLをコピーしました