jQueryの基本

備忘録的な感じです。初心者ですので間違っている箇所があるかもしれません。
お手柔らかにお願いいたします。

## jQueryとは
JavaScriptのコードを簡潔に書けるようにするために設計されたライブラリ。
[jQuery API](https://api.jquery.com)
## jQueryの適用方法
### HTMLの`<body>`要素内（`</body>`の直前）に`<script>`タグを使用して記述する。
```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <body>要素内（</body>の直前）に<script>タグを使用して記述する。-->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        $(function() {
            alert("HELLO");
            console.log("HELLO");
        });
    </script>
</body>
</html>
```
### JavaScriptファイルを作成してHTMLの`<body>`要素内（`</body>`の直前）で`<script>`タグを使用して読み込む。
```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- HTMLの<body>要素内（</body>の直前）で<script>タグを使用して読み込む。-->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="js/sample.js"></script>
</body>
</html>
```
```js:sample.js
"use strict"
$(function() {
    alert("HELLO");
    console.log("HELLO");
});
```
## ready関数
ready関数はブラウザがHTMLを読み込んでJavaScriptでDOM操作ができるようになった時点で実行される。jQueryではJavaScriptのコードで実装した内容をready関数で囲む。
```js
$(function() {
    alert("HELLO");
    console.log("HELLO");
});
```
```js
jQuery(document).ready(function() {
    alert("HELLO");
    console.log("HELLO");
});
```
```js
jQuery(function() {
    alert("HELLO");
    console.log("HELLO");
});
```
## jQueryの基本構文
### セレクタの種類
- 要素で指定する場合
```js
$('div')
```
- id属性で指定する場合
```js
$('#id')
```
- class属性で指定する場合
```js
$('.class')
```
### ブラウザ表示時に実行したい場合
```js
$(function() {
    $('#example').hide();
});
```
### イベント発生時に実行したい場合
```js
$(function() {
    $('#example').on('click', function() {
        $(this).hide();
    });
});
```
## 関数
### css関数
CSSを設定・取得する。
```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="message">HELLO</div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="js/sample.js"></script>
</body>
</html>
```
```js:sample.js
"use strict"
$(function() {
    $('.message').css('color', 'brown').css('font-size', '25px');
    console.log('color:' + $('.message').css('color'));
    console.log('font-size:' + $('.message').css('font-size'));
});
```
### on関数／text関数／val関数
イベント時に処理を実行する。
要素のテキストコンテンツを設定・取得する。
要素のVALUE値を設定・取得する。
```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="message">ここにメッセージを設定する</div>

    <button type="button" id="button">ボタン</button>

    <input type="radio" class="radio" name="gender" value="male">男性
    <input type="radio" class="radio" name="gender" value="female">女性

    <select id="quantity">
        <option value="1">1個</option>
        <option value="2">2個</option>
        <option value="3">3個</option>
        <option value="4">4個</option>
        <option value="5">5個</option>
    </select>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="js/sample.js"></script>
</body>
</html>
```
```js:sample.js
"use strict"
$(function() {
    $('#button').on('click', function() {
        $('#message').text("ボタンをクリックしました。");
        console.log($('#message').text());
    });
    
    $('.radio').on('change', function() {
        $('#message').text("ラジオボタンを選択しました。"
        + $('.radio:checked').val() + "を選択しました。");
    });

    $('#quantity').on('change', function() {
        console.log("セレクトボックスを変更しました。"
        + $('#quantity').val() + "を選択しました。");
    });
});
```
### show関数／hide関数
要素を表示する。
要素を非表示にする。
```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="message">ここのメッセージを表示・非表示にする</div>
    <button type="button" id="show_button">表示する</button>
    <button type="button" id="hide_button">非表示にする</button>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="js/sample.js"></script>
</body>
</html>
```
```js:sample.js
$(function() {
    $('#show_button').on('click', function() {
        $('#message').show();
    });

    $('#hide_button').on('click', function() {
        $('#message').hide();
    });
});
```
### 動的に追加した要素のイベント発生時に処理を実行する方法
```html.sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="parent">
        <button id="parent_button">ボタンを追加する</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="js/sample.js"></script>
</body>
</html>
```
```js.sample.js
"use strict"

$(function() {
    $('#parent_button').on('click', function() {
        $('#parent').append('<button class="child_button">追加したボタン</button>');
    });

    $('#parent').on('click', '.child_button', function() {
        console.log("追加したボタンをクリックしました。");
    });
});
```