jQuery（ジェイクエリー）
JavaScriptのライブラリです。短く記述することができます。
【例】JavaScriptでクリックイベント
var btn = document.getElementById("title");
btn.addEventListener("click", function() {
console.log("Hello");
});
【例】jQueryでクリックイベント
$(function() {
$("#button").on("click", function() {
console.log("Hello");
});
});
jQueryを導入
jQueryへのリンク先
とりあえずバージョンは一番新しいのでいいと思います。
jQueryは他のJavaScriptファイルよりも先に読み込まないとエラーが出てしまいます。仮にJSがmain.jsだとしたらそのファイルより先に記述します。
【例】
〜省略〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./main.js"></script>
〜省略〜
HTML要素を取得
HTML要素の取得します。
$("セレクタ")
$(function() {
console.log($(".menu_item"));
});
クラスがmenu_itemの要素を取得されます。
次はよく使用する4つのセレクタを紹介します。
IDセレクタ
HTML要素のid属性で指定し、取得したいid属性の値に#を付けたセレクタのことです。
【例】
$("#idSelector") // idがidSelectorの要素を取得します
クラスセレクタ
HTML要素のclass属性で指定し、取得したいclass属性の値に.を付けたセレクタのことです。
【例】
$(".classSelector") // classがclassSelectorの要素をすべて取得します
要素セレクタ
h1やpのようなHTML要素を対象とし、取得したい要素名をそのままセレクタとして利用します。
【例】
$("h1") // h1要素をすべて取得
属性セレクタ
HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
【例】
$("input[ type='radio' ]"); // <input type="radio">のHTML要素を取得します
JavaScriptで書いていたDOM要素の取得を$("セレクタ名")で取得できるようになります。
クリックイベントの取得
click()で使用できます。
【例】
tabs.click(Switch);
this
関数の中でthisを使用すると、イベントの発生元となった要素を取得することができます。
※thisは、使用する場面によって取得できるものが異なります。
【例】JSの場合
console.log(this);
jQueryで使う場合は、$(this)と指定します。
【例】
console.log$(this);
removeClass()
タブのクラス要素を削除します。[0]と指定しなくても、最初の要素を指定してくれます。
addClass()
タブにクラス要素を追加します。[0]と指定しなくても、最初の要素を指定してくれます。
index()
配列に変換しなくても、集合したDOM要素から引数に指定したDOMと同じ要素番号を戻します。
index("セレクタ") // セレクタと一致したDOMの要素番号を戻します
eq()
引数に要素番号を取り、集合したDOM要素から選択できます。
eq() // セレクタと一致したDOMの要素番号を戻します
submit
フォームが送信される時に呼び出されるイベントです。
【例】
$(function() {
$('form').on('submit', function(e) {
console.log('送信ボタンが押されました');
e.preventDefault();
});
});
関数の引数のeはeventのeです。関数の第一引数には自動でイベントオブジェクトが渡されます。
イベントオブジェクト
イベントに関する情報を持つオブジェクトです。イベントの発生元の要素や押されたキーの情報などが入っています。
preventDefault()
ブラウザが最初から持っているアクションをキャンセルするメソッドです。
find("セレクタ")
$(this)を使えばformタグに対して要素を取得できますが、inputタグの属性がcheckboxをという属性だけを取得したい場合、find()を使用します。
jQueryのfind()メソッドは、引数にセレクタを指定して、合致するセレクタを全て取得します。
each()
引数に要素番号を指定することが可能です。
prop()
要素のプロパティを取得するメソッドです。
attr()
要素の値を取得することができます。
var
変数を宣言し、任意で指定した値を初期化します。
【例】
var 変数名 = 値;
val()
HTMLタグ内に記述されているvalue属性を取得したり変更することができるメソッドです。
ユーザーがフォームに入力した内容や選択した項目をjQuery側から把握できるようにします。
【例】
<button id="btn-1" value="1">ボタン1</button>
var btn $(#btn-1).val();
console.log(btn);
上記の記述でHTMLからvalue値1を取得できました。