jQueryとは
JavaScriptはプログラミング言語。jQueryはJavaScriptを簡単に呼び出すためのライブラリ。jQueryを使えば少ない命令文でJSを実行できる。
基本の型
$('対象のHTML').実行したい処理();
→$( )の中に対象となるHTML要素を指定し、【.（ドット）】に続けて実行したい処理を記述。
(例) p要素に記述されているテキストを取得する。
<script>
const text = $('p').text();
</script>
対象のHTML
CSSセレクタを使ってHTML要素を簡単に指定できる。
①タグセレクタ：<div>, <p>などのHTMLタグ名で要素を選択可能。例えば$('div')はすべての<div>要素を選択できる。
②クラスセレクタ: 要素のクラス名で選択可能。$('.my-class')はクラスが "my-class" の要素を選択している。
③IDセレクタ: IDで要素を選択可能。$('#my-id')はIDが "my-id" の要素を選択している。
④属性セレクタ: []を使って特定の属性を持つ要素を選択します。例えば、$('input[type="text"]')はタイプが "text" のすべての<input>要素を選択している。
$('[date-delete]')だとdata-deleteという属性を持つすべての要素を選択できる。
その他、複数のセレクタをANDやORなどでまとめることで、さらに複雑なセレクタ指定も可能になる。
ANDの場合は、.（ドット）で繋げて複数のセレクタを連続して繋げることが可能。
$('.test.sample.text') → 3種類のclass属性が付与されたHTML要素だけを特定
ORの場合は、,（カンマ）で繋げて複数のセレクタを選択可能。
$('#test, #sample') → 2種類のid属性のどちらかが付与されているHTML要素を特定
①組み合わせセレクタ: 例えば$('div.my-class')はクラス "my-class" を持つ<div>要素を選択している。
②親子関係セレクタ: 例えば$('div > p')は、<div>の直接の子供である<p>要素を選択している。
③疑似クラスセレクタ: 例えば、:first-childや:last-childなど、特定の条件に基づいて要素を選択できる。
実行したい処理
基本：.on( イベント名, 実行したい処理 )
イベント名に指定できるものの例
| イベント名 |
内容 |
|
|
|
|
| click |
要素がクリックされた時
例: $('#button').on(click,function() { alert('Button clicked!'); });
|
|
|
|
|
| change |
フォーム部品の状態変化があった時
例: $('input').on(change,function() { console.log('Input changed'); });
|
|
|
|
|
| forcus / blur |
要素にフォーカスが当たった時 / 外れた時
例: $('input').on(focus,function() { console.log('Input focused'); });
|
|
|
|
|
| load |
ページや要素が読み込まれた時
例: $(window).on(load,function() { console.log('Window loaded'); });
|
|
|
|
|
| scroll |
|
|
|
|
|
| keydown / keyup |
|
|
|
|
|
| mousedown / mouseup |
|
|
|
|
|
| submit |
フォームが送信された時
例: $('form').submit(function(e) { e.preventDefault(); console.log('Form submitted'); });
|
|
|
|
|
| resize |
ウィンドウサイズが変化した時
例: $(window).resize(function() { console.log('Window resized'); });
|
|
|
|
|
使用例
・画面をリロードして2秒後にアラートを出す
JSのコード
<script>
// setTimeout普通のfunction関数で書いた場合
window.addEventListener('load', function() {
setTimeout(function() {
alert('2秒経過');
}, 2000);
});
// setTimeoutアロー関数で書いた場合
window.addEventListener('load', () => {
setTimeout(() => {
alert('2秒経過');
}, 2000);
});
</script>
同じものをjQueryで書いた場合のコード
<script>
// setTimeout普通のfunction関数で書いた場合
$(window).on('load',function(){
setTimeout(function(){
alert('2秒経過');
},2000);
});
// setTimeoutアロー関数で書いた場合
$(window).on('load',function(){
setTimeout(() => {
alert('2秒経過');
}, 2000);
})
</script>
