この記事でやること・やらないことなど
- 基本的に初心者向けの内容です。
- 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/