jQueryを基本からまとめてみた

## jQueryとは？

- JavaScriptのライブラリ
- JavaScriptでできるWEBページの操作を短いコードで多くのことが開発できる技術
⇨ HTML/DOM操作・CSS操作とエフェクトとアニメーション・イベント処理・AjaxによるHTTPリクエスト

## jQueryをインポートする

[jQuery](https://releases.jquery.com/)

①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける

```
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
```
②scriptの間で、$を書いて呼び出す


※Jquaryでは、同じ関数を使ってDOMプロパティの修正と取得が可能で、渡す引数の数によって動作が決まる

```
//取得
$("selector").css("プロパティ");
```

```
//更新
$("selector").css("プロパティ","値");
```
## DOMの中身を更新する

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div>Hello world</div>
    <div class="test-class">Hello world</div>
    <div class="test-id">Hello world</div>
    <p>Test</p>
    <input type="button" value="登録" />

    <script>
      // ②scriptの間で、$を書いて呼び出す
      $('div').css('background-color', 'red');
      console.log($('div').css('background-color'));
      //   ③DOMの中身を更新する
      $('input[tyep="button"]').val('submit');
    </script>
  </body>
</html>
```

## DOMのスタイルを更新する

※toogleClassは、指定したクラスが存在しない場合は追加して、存在する場合は削除するメソッド

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <!-- ④DOMのスタイルを更新する-->
    <style>
      .test-class {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>
    <div class="test-class">Hello world</div>
    <div class="test-id">Hello world</div>
    <p>Test</p>
    <input type="button" value="登録" />

    <script>
      // ②scriptの間で、$を書いて呼び出す
      $('div').css('background-color', 'red');
      console.log($('div').css('background-color'));
      //   ③DOMの中身を更新する
      $('input[tyep="button"]').val('submit');

      $('p').addClass('test-class');
    </script>
  </body>
</html>
```
## 親子・兄弟関係の管理

※childeren関数について

- 直接の小要素を選択するが、孫やそれよりネストが深い要素は選択しない
⇨ 深いネストを検索する場合はその代わりにfind関数を使う

- childeren関数は引数と受け取れる
- その場合は通常セレクタと同じようにタグを絞る

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <!-- ④DOMのスタイルを更新する-->
    <style>
      .test-class {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>
    <div class="test-class">Hello world</div>
    <div class="test-id">Hello world</div>
    <div>Test</div>
    <div>Test</div>
    <div class="test-child">Test</div>

    <input type="button" value="登録" />

    <script>
      //②scriptの間で、$を書いて呼び出す
      $('div').css('background-color', 'red');
      console.log($('div').css('background-color'));
      //③DOMの中身を更新する
      $('input[tyep="button"]').val('submit');
      //④DOMのスタイルを更新する
      $('p').addClass('test-class');
      //⑤DOMのスタイルを更新する
      $('#test-id').children().text('Hoge');
      $('#test-id').parent().css('background-color', 'green');
    </script>
  </body>
</html>
```

## イベントの管理

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <!-- ④DOMのスタイルを更新する-->
    <style>
      .test-class {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>
    <div class="test-class">Hello world</div>
    <div class="test-id">Hello world</div>
    <div>Test</div>
    <div>Test</div>
    <div class="test-child">Test</div>

    <input type="button" value="登録" />

    <script>
      //②scriptの間で、$を書いて呼び出す
      $('div').css('background-color', 'red');
      console.log($('div').css('background-color'));
      //③DOMの中身を更新する
      $('input[tyep="button"]').val('submit');
      //④DOMのスタイルを更新する
      $('p').addClass('test-class');
      //⑤DOMのスタイルを更新する
      $('#test-id').children().text('Hoge');
      $('#test-id').parent().css('background-color', 'green');
      //⑥イベントの管理
      $('input[type="button"]').click(function () {
        $('*').css('background-color', '#225').css('color', '#ddf');
      });
      $('input[type="button"]').dblclick(function () {
        $('*').css('background-color', '#FFF').css('color', '#000');
      });
    </script>
  </body>
</html>
```
## ビルドイン関数

```index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ①jQuery 3.xのminifiedをコピペしてheaderに貼り付ける -->
    <script
      src="https://code.jquery.com/jquery-3.7.1.min.js"
      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
      crossorigin="anonymous"
    ></script>
    <!-- ④DOMのスタイルを更新する-->
    <style>
      .test-class {
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>
    <div class="test-class">Hello world</div>
    <div class="test-id">Hello world</div>
    <div>Test</div>
    <div>Test</div>
    <div class="test-child">Test</div>
    <input type="button" value="登録" />
    <!-- ⑦ビルドイン関数 -->
    <p>Test</p>
    <input type="button" value="非表示" />

    <script>
          //②scriptの間で、$を書いて呼び出す
          $('div').css('background-color', 'red');
          console.log($('div').css('background-color'));
          //③DOMの中身を更新する
          $('input[tyep="button"]').val('submit');
          //④DOMのスタイルを更新する
          $('p').addClass('test-class');
          //⑤DOMのスタイルを更新する
          $('#test-id').children().text('Hoge');
          $('#test-id').parent().css('background-color', 'green');
          //⑥イベントの管理
          $('input[type="button"]').click(function () {
            $('*').css('background-color', '#225').css('color', '#ddf');
          });
          $('input[type="button"]').dblclick(function () {
            $('*').css('background-color', '#FFF').css('color', '#000');
          });
          //⑦ビルドイン関数
          $('input[type="button"]').dblclick(function () {
            if ($('input[type="button"]').val() === '表示') {
              $('p').fadeOut(500);
              $('input[type="button"]').val('表示');
            } else {
              $('p').fadeOut(500);
              $('input[type="button"]').val('非表示');
            }
          });
          //⑧fadeTggle関数
          <p>Test</p>
          <input type="button" value="非表示">
          $(document).ready(function().on('click',function() { $('p').fadeToggle(500);
          $(this).val($(this).val() === '表示'? '非表示': '表示');
        });
      });
    </script>
  </body>
</html>

```




## 参考サイト
[jQuery超入門講座２０分でマスター！](https://www.youtube.com/watch?v=ViIs4NHjlMc)