jQueryについて

JavaScript

（ブログ記事の一覧は「こちら」）

jQueryは、JavaScriptのプログラムをより簡単に書くことができるライブラリです。

jQueryを使用する場合は、以下のように、headタグに利用するjQueryスクリプトを呼び出します。

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

</html>


簡単な例について、JavaScriptで書いた場合と、jQueryで書いた場合のそれぞれを説明します。（いずれも同じ動作になります）

ボタンを押すとアラームを表示

もっともシンプルな例を確認してみましょう。

index.htmlを実行して、ボタンを押すとアラームが表示されることを確認してください。

JavaScriptでの記述例（その1）

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <input type="button" value="アラート表示" onclick="callAlert()">
</body>
</html>

main.js

function callAlert() {
    alert("アラート表示");
}

JavaScriptでの記述例（その2）

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <input type="button" id="callAlert" value="アラート表示">
</body>
</html>

main.js

window.onload = function() {
    document.getElementById("callAlert").onclick = function() {
        alert("アラート表示");
    }
}

jQueryでの記述例

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
    <input type="button" id="callAlert" value="アラート表示">
</body>
</html>

main.js

$(function() {
    $("#callAlert").on("click", function() {
        alert("アラート表示");
    });
});

ボタンを押すとテキストが追加（idを使用）

idを使用する例を確認してみましょう。jQueryでは非常にシンプルに書き換えられることがわかると思います。

index.htmlを実行して、ボタンを押すとテキストが追加されることを確認してください。

JavaScriptでの記述例

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <div id="hoge"></div>
    <input type="button" value="テキスト追加" onclick="addText()">
</body>
</html>

main.js

function addText(){
    var element = document.getElementById("hoge");
    element.innerHTML = "JavaScriptでテキスト挿入";
}

「document.getElementById("hoge")」は、HTMLの「id="hoge"」を指しています。 「innerHTML」は、HTMLの要素の中身を指しています。

jQueryでの記述例

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
    <div id="hoge"></div>
    <input type="button" id="addText" value="テキスト追加">
</body>
</html>

main.js

$(function() {
    $("#addText").on("click", function() {
        $("#hoge").html("JavaScriptでテキスト挿入");
    });
});

HTMLにて「id="hoge"」と定義していたものを、jQueryでは「$("#hoge")」と記述しています。
「id」->「#」（シャープ）と覚えてしまうと良いでしょう。

ボタンを押すとテキストが追加（classを使用）

index.htmlを実行して、ボタンを押すとテキストが追加されることを確認してください。

JavaScriptでの記述例

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="main.js"></script>
</head>

<body>
    <div id="hoge1" class="fuga"></div>
    <div id="hoge2" class="fuga"></div>
    <div id="hoge3" class="fuga"></div>
    <input type="button" value="テキスト追加" onclick="addTextClass()">
</body>
</html>

main.js

function addTextClass(){
    var elements = document.getElementsByClassName("fuga");
    for (var i = 0; i < elements.length; i++) {
        elements[i].innerHTML = "JavaScriptでテキスト挿入　その" + i;
    }
}

「document.getElementsByClassName("fuga")」は、HTMLの「class="fuga"」を指しています。

jQueryでの記述例

index.html

<html>
<head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
    <div id="hoge1" class="fuga"></div>
    <div id="hoge2" class="fuga"></div>
    <div id="hoge3" class="fuga"></div>
    <input type="button" id="addTextClass" value="テキスト追加">
</body>
</html>

main.js

$(function() {
    $("#addTextClass").on("click", function() {
        $(".fuga").html("JavaScriptでテキスト挿入");
    });
});

HTMLにて「class="fuga"」と定義していたものを、jQueryでは「$(".fuga")」と記述しています。
「class」->「.」（ドット）と覚えてしまうと良いでしょう。