【学習ログ14】 JavaScript jQueryメソッドについて

2020年9月21日2020年9月27日

こんにちは、つるぴよ(@tsurupiyoo)です！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

マンガJavaScript　第２２話　jQueryの利用

jQueryはJavaScriptのライブラリの一つです。
以前記事にまとめたので概要はこちらをご覧ください。

https://tsurupiyoblog.com/j-query-programing

「セレクタ」とは

「jQuery」のオブジェクト
「jQuery」または「$」で表す
「セレクタ」は「jQuery」で操作対象の要素を選択するために使います。

$(".change")

jQuery(".change")

この場合はクラスが「change」の要素を選択したという意味です。
＄の方が短く書けるので一般的には＄を使います。

「セレクタ」の書き方は「jQuery」独自の書き方もあります。

$(".change:even")    // 偶数
 
$(".change:odd")    // 奇数

この場合は上が偶数番目の要素を指定、下が奇数番目の要素を指定しています。

jQueryのメソッド

メソッドの種類がたくさんあるので表にまとめました。

式	意味	使い方
$(セレクタ)	「セレクタ」に合致するDOM要素の集合を、「jQuery」オブジェクトにして返す	j = $(“div”) j.fadeOut()
$(elements)	DOM要素を「jQuery」オブジェクトにして返す	j = $(document.getElementById(“id”)); j.fadeOut()
[n]	「jQuery」オブジェクトから、n番目のDOM要素を取得	element = $(“div”)[0]; alert(element.innerHTML);
.length	「jQuery」オブジェクトの要素数を返す	len = $(“div”).length;
.each(関数)	全ての要素に関数の処理を行う（関数内の「this」は処理対象のDOM要素）	$(“div”).each(function(){ alert($(this).html()); });
.html()	要素の HTML文字列を取得	s = $(“div”).html();
.html(s)	要素にHTML文字列を設定	$(“div”).html(s);
.text()	要素の文字列部分を取得	s = $(“div”).text();
.text(s)	要素の文字列部分を設定	$(“div”).text(s);
.val()	要素の「value」の値を取得	s = $(“div”).valt();
.val(s)	要素に「value」の値を設定	$(“div”).val(s);
.fliter(セレクタ）	要素の集合を「セレクタ」で絞りこむ	$(“div”).filter(“.cls”);
.css(s)	要素のstyleの「s」の値を取得	s = $(“div”).css(“color”);
.css(s, s2)	要素のsyleの「s」の値を「s2」にする	$(“div”).css(“color”,”red”);
.css(obj)	要素のstyleにオブジェクトのキーと値を適用	$(“div”).css({color:”red”,fontSize:”2em”});
$(関数);	DOMが操作可能になれば関数を実行（「$(document).ready(関数);」の短縮版)	$(function(){ alert(関数); });
.click(関数)	クリック時の動作を設定（各イベントに同様のメソッドあり)	$(“div”).click(function(){ alert($(this).html()); });
.click()	クリックを実行（各イベントに同様のメソッドあり)	$($(“div”).click();
.show()	要素を表示	$(“div”).show();
.hide()	要素を隠す	$(“div”).hide();
.toggle()	要素の表示・非表示の切り替え	$(“div”).toggle();

このほかにもたくさんのメソッドがあります。
詳しくはこちらから

操作対象

要素を操作するメソッドは、対象が複数ある場合全ての要素が対象になります。

つるぴよ

「jQuery」を使った一般的な書き方で処理を書いてみよう！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『check』の要素に、クリック時の処理を登録
            $("#check").click(function() {
                alert($(".targets").text());          // 文字列を表示
                $(".targets").html("全て書き換え");   // 全てのHTMLを書き換え
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="check" value="複数対象確認">
        <div class="targets">目標の<br>文字列1</div>
        <div class="targets">目標の<br>文字列2</div>
        <div class="targets">目標の<br>文字列3</div>
    </body>
</html>

【複数対象確認ボタンを押した結果１】

目標の文字列1目標の文字列2目標の文字列3
上記がアラートで出てくる

【複数対象確認ボタンを押した結果２】

全て書き換え
全て書き換え
全て書き換え

解説
①「targets」クラスの要素全ての内部文字列をアラートで表示。
②文字列を全て書き換える。
③「セレクタ」で選択し、メソッドを実行。
④選択した全ての要素に対して処理が実行される。

jQueryの代表的な処理「アニメーション」

つるぴよ

「feadOut」「feadIn」というメソッドを使ったアニメーション例を紹介します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『anim』の要素に、クリック時の処理を登録
            $("#anim").click(function() {
                // 『jQuery』の代表的な処理1『アニメーション』
                $("#target").fadeOut();   // id『target』の要素をフェードアウト
                $("#target").fadeIn();    // id『target』の要素をフェードイン
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="anim" value="アニメ">
        <div id="target">目標の<br>文字列</div>
    </body>
</html>

解説
①<script>タグ内ではDOMの準備が整うと$function()として登録されている処理が行われる（DOMの準備が整っていない場合は動作しない）
②＄(#”anim” ).click(function(){〜}で「id」がクリックされたときの処理を登録（id「anim」の要素は「アニメ」と書かれたボタン)
③「アニメ」ボタンをクリックすると「anim」関数が実行される
④「id」が「target」の要素である「目標の文字列」がフェードアウトしてフェードインする。

処理の流れ

jQueryの「feadOut()」や「feadIn()」といった「アニメーションを実行させるメソッド」は「アニメーションを登録」するためのメソッドです。
アニメーション自体は登録後に自動で実行されています。

jQueryの代表的な処理「要素の書き換え」

つるぴよ

jQueryでは通常の方法よりも簡単にWebページの要素を書き換えたり、削除、追加したりできるよ！

そういった要素の操作でよく使われるのは内部HTMLの書き換えです。
DOM操作での書き方と jQuerでは書き方に違いがあります。

DOM操作→「document.getElementById(“targets”).innerHTML = “変更！”;」
jQuery→「$(“#targets”).html(“変更!”);」

【jQueryで書くメリット】
①短くかける
②クラスが「targets」の要素を全て書き換えられる
つまり→jQueryを使うとWebページの要素の操作を効率よく行える！

実際のコードで確認してみましょう！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // id『change』の要素に、クリック時の処理を登録
            $("#change").click(function() {
                // 『jQuery』の代表的な処理2『要素の書き換え』
                $(".targets").html("変更！");
                    // クラス『targets』要素の内部HTMLを『変更！』と書き換え
            });
        });
        </script>
    </head>
    <body>
        <input type="button" id="change" value="変更">
        <div>変更しない文字列</div>
        <div class="targets">変更する文字列</div>
        <div class="targets">変更する文字列</div>
        <div>変更しない文字列</div>
    </body>
</html>

動き
①WebブラウザでこのHTMLページを読み込むと画面には
「変更」ボタンと「変更しない文字列」と「変更する文字列」が表示される。
②「変更」ボタンを押すと$(“.targets”).html(“変更！”);が実行される。
③「targets」クラス要素全てが「変更！」に書き換えられる。

プラグイン

つるぴよ

jQueryのプラグイン「 jquery.colblink.js」を使ってみよう！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="jquery.colblink.js"></script>
        <script>
        // DOMの準備が整ったら実行する処理を登録
        $(function() {
            // 『colblink()』は、『jquery.colblink.js』で拡張したメソッド
            $("#target1").colblink();    // id『target1』の要素を色付き点滅
            $("#target3").colblink();    // id『target3』の要素を色付き点滅
        });
        </script>
    </head>
    <body>
        <div id="target1">目標1</div>
        <div id="target2">目標2</div>
        <div id="target3">目標3</div>
    </body>
</html>

「jquery.colblink.js」という外部ファイルがjQueryの「プラグイン」です。
「jQuery」本体を読み込んだ後に「jquery.colblink.js」を読み込みます。
この「jquery.colblink.js」は「jQuery」に「colblink」というメソッドを追加します。
「セレクタ」の後に「colblink」メソッドを使用して、選択した要素に色付き点滅を実行させています。

「メソッドチェーン」

「jQuery」メソッドは「自分自身（jQueryオブジェクト）」を返します。そのため「メソッドチェーン」と呼ばれる書き方で処理をつなげて書くことができます。
こんな感じです

$(".targets").fadeOut().fadeIn();

この１行で「targets」クラスの要素をフェードアウトしてフェードインしています。

ブラウザ依存の解消

つるぴよ

ブラウザにはたくさんの種類があるよ

ブラウザの種類
・Internet Explorer
・Firefox
・Google Chrome
・Opera
etc‥

上記のブラウザは少しずつ使用が異なっているのでJavaScriptを使うときに問題が出ることがあります。

jQueryではブラウザの細かな違いを内部で処理して使用者から見えないようにしてくれます。
そのためブラウザ依存を解消することができます。

マンガJavaScript第２２話　まとめ

ここまで学んだことをまとめます。
jQueryの利用
セレクタ
jQueryのメソッド
操作対象
アニメーション
　「feadOut」「feadIn」
要素の書き換え
プラグイン
メソッドチェーン
ブラウザ依存の解消