この記事でやること・やらないことなど

基本的に初心者向けの内容です。
JavaScriptは少しかじったけどjQueryはそこまで…みたいな方を想定しています。
JavaScriptの構文をさらっとおさらいしてからjQueryの導入手順、簡単なDOM操作をやります。
詳細な説明はあまりしません。ざっくりいきます。
jQueryのバージョンは3系を使用します。
npm/yarnなどのパッケージマネージャーは使用しません。
jQuery UI/プラグインの導入に関する詳細な手順は紹介しません。
Ajaxはやりません。
~~jQueryオワコンとか言ってはいけない~~

JavaScriptとは

プログラミング言語
Webブラウザ上で動作する
Webで快適なUIを構築したいのであればほぼ必須スキル

jQueryとは

JavaScriptのライブラリ
使用することでJavaScriptを短い記述量で書ける
(JavaScriptだけでもなんとかなることはなる)

速習JavaScript 基本構文

// 変数
var hello = "Hello World";
console.log(hello);

// 変数（再宣言不可）
let hello2 = "Hello JavaScript";
// let hello2 = "Hello"; // エラー発生
// hello2 = "Hello"; // 実行可能
console.log(hello2);

// 定数（再代入不可）
const hello3 = "Hello jQuery";
// hello3 = "Hello"; // エラー
console.log(hello3);

// 関数宣言
function showMessage(message) {
    console.log(message);
}
// 定義した関数を実行
showMessage("executed");

// if文
var isTrue = true;
if(isTrue) {
    console.log("OK");
} else {
    console.log("NG");
}

// for文
for(var i = 0; i < 10; i++) {
    console.log(i + "番目");
}

速習JavaScript DOM

① 要素を取得し、その中のテキストを表示する(onclickで呼ぶパターン)

<script>
// 関数定義
function button1Pushed() {
    // 要素取得
    var sample1 = document.getElementById("sample1");
    // 表示
    alert(sample1.textContent);
}
</script>

<h1 id="sample1">Hello JavaScript</h1>
<!-- scriptタグ内で定義されている関数をクリック時に呼ぶ -->
<button onclick="button1Pushed()">Push</button>

② クリック時にtargetに要素を追加する(addEventListenerを使うパターン)

<script>
window.onload = function() {
    // ページが読み込まれたらこの中身が実行される

    // ボタン取得
    var button = document.getElementsByTagName("button")[0];
    // クリックイベントを付与する
    button.addEventListener("click", function() {
        // idがtargetの要素を取得
        var target = document.getElementById("target");
        // div要素を作成し、Hogeというテキストをセット
        var child = document.createElement("div");
        child.innerText = "Hoge";
        // targetの中に作成したdivを追加
        target.appendChild(child);
    });
}
</script>

<button>Push</button>
<div id="target"></div>

jQuery

document.getElement~やdocument.createElementでやっていたことを$でできる
CSSセレクタと同じような使い方で要素を取得できる

導入方法

方法① CDNを使う

簡単
インターネットにつながってないと使えない

以下にアクセス
https://code.jquery.com/
jQuery Core 3.4.1のminifiedをクリック

(どれでも良いですが、slim系のを選ぶと純粋なjQueryの機能に絞ったものになるので最後に紹介するjQueryUIなどが使えません)
出てきたscriptタグをコピーして適用したいHTMLのheadタグ内に記述する

以下記述例

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
    <!-- jQuery読み込み部分 -->
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <script>
    $(function() {
        $("body").append($("<div>jQueryが使えるようになりました。</div>"))
    })
    </script>
</head>
<body>

</body>
</html>

方法② ローカルにダウンロードして使う

以下にアクセス
https://jquery.com/
Download jQueryをクリック
Download the compressed, production jQuery 3.4.1を右クリックし、名前を付けて保存する
適用したいHTMLのheadタグ内にscriptタグを記述し、src属性でダウンロードしたファイルを読み込む。

（以下の例ではhtmlファイルと同じ階層にjsフォルダを作成し、そこにjqueryのファイルを配置しています）

以下記述例

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sample</title>
    <!-- jQuery読み込み部分 -->
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $(function() {
        $("body").append($("<div>jQueryが使えるようになりました。</div>"))
    })
    </script>
</head>
<body>

</body>
</html>

jQueryの記述例

headタグ等省略してます

① 要素を取得し、その中のテキストを表示する

<script>
function button1Pushed() {
    // idがsample1の要素のテキストを取得して、アラートに出す
    alert($("#sample1").text());
}
// buttonタグのonclickを消して以下で書く方が方が良いといわれることもある
// $(function () {
//     $("button").on("click", function() {
//         alert($("#sample1").text());
//     });
// })
</script>

<h1 id="sample1">Hello JavaScript</h1>
<!-- scriptタグ内で定義されている関数をクリック時に呼ぶ -->
<button onclick="button1Pushed()">Push</button>

② クリック時にtargetに要素を追加する

<script>
$(function() {
    $("button").on("click", function() {
        // idがtargetの要素にdivタグを作成して追加
        $("#target").append($("<div>Hoge</div>"));
    });
});
</script>

<button>Push</button>
<div id="target"></div>

③ 削除も増やしてみた

<script>
$(function() {
    $("#add").on("click", function() {
        $("#target").append($("<div>Hoge</div>"));
    });
    $("#remove").on("click", function() {
        $("#target").empty();
    });
});
</script>

<button id="add">ADD BUTTON</button><button id="remove">REMOVE BUTTON</button>
<div id="target"></div>

セレクタ

基本的にはCSSのセレクタと同じように扱える。

サンプル
https://jsfiddle.net/45cq2nk7/1/

イベントハンドラ

選択した要素（jQueryオブジェクト）のonメソッドを使用することでイベントと処理を結び付けられる。

サンプル
https://jsfiddle.net/tv1n76ak/

よく使うメソッド

メソッド名	説明
val()	引数なしの場合、inputタグなどで入力されている値を取得する。また、引数を設定すると引数の値をinputタグのvalueにセットする。
text()	引数なしの場合、タグ内のテキストを取得する。また、引数を設定すると引数の値をタグ内にセットする。
css()	引数が１つの場合、引数に設定したスタイルの値を取得する。引数が２つの場合、引数に設定したスタイルを適用する。
attr()	引数が１つの場合、引数に設定したプロパティの値を取得する。また、引数が2つの場合、引数に設定したプロパティを設定する。
append()	引数にjQueryオブジェクトを指定することで、タグ内に子要素に引数の要素を追加する。
remove()	そのタグを削除する。
empty()	そのタグの中身を削除する。

サンプル
https://jsfiddle.net/ftv97mkj/

その他

jQuery UIを使う

jQuery UIを使うと、すでに用意された部品を使用できます。
こちらもCDNで導入する方法とローカルにダウンロードして使う方法があります。
https://jqueryui.com/

datepickerなどが有名です。

サンプル
https://jsfiddle.net/j4fa6vo8/

プラグインを使う

jQuery UI以外にも様々な開発者が作成したプラグインを導入することもできます。
導入方法は各プラグインによるので、それぞれの公式ページを参照するなどしてください。

LIGHTBOX（個人的になんとなく好きなプラグイン）
https://lokeshdhakar.com/projects/lightbox2/

最後に

今回は初学者向けにボリュームを絞った形になりましたが、
他にもできることがたくさんあるので調べて使ってみてください。

https://api.jquery.com/

JavaScriptからjQueryへの第一歩