LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kanfutrooper(masaomi)

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

Last updated at Posted at 2024-12-29

jQueryとは？

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

jQueryをインポートする

jQuery

①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超入門講座２０分でマスター！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?