jQueryの導入方法

  
    2025/6/26日の使用時
    使用時に最新版を確認すること
    
    jQuery 本体
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    jQuery UI 本体
    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"> </script>

    </body>
  

jQuery=CSS

  
    jQuery UI CSS
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
  

基礎構文

あまり使わないのでざっくり解説

$('p').text()

jQueryの基本的な構文は、セレクタとメソッドを組み合わせて使用します。

セレクタは、HTML要素を選択するためのもので、メソッドはその要素に対して操作を行うための関数です。

例えば、$('p')はすべての要素を選択
.text()はその要素のテキストを取得または設定するメソッドです。

このように、jQueryを使用すると、HTML要素の操作が非常に簡単になります。

実用例

タイトル

こんにちは

  
  HTML
  <h1 id="title">タイトル</h1>
  <p class="message">こんにちは</p>

  jQuery
  $(function() {
    const title = $('#title').text();
    const list = $('.message').text();
    console.log(title);
    console.log(list);
  });
  

属性フィルタ

HTML要素の属性（たとえば id や href、type など）に基づいて要素を選択できる便利な機能

あまり使用しないのでざっくり解説

  
  HTML
  <a href="#">Google</a>
  <a href="#">Example</a>
  <a href="">Yahoo!</a>

  jQuery
              #から始まるリンクを赤くする
  $('a[href^="#"]').css('color', 'red');
  

イベント処理

クリックやマウス操作、キーボード入力などに反応して動作を実行する仕組み

ON()メソッド

画像を開くボタン 画像を閉じるボタン

  
  HTML
  <button id="on-btn">画像を開くボタン</button>
  <button id="off-btn">画像を閉じるボタン</button>
  <img class="body-img" id="target-image" src="../img/study/jQuery6.jpg" alt="jQuery">

  jQuery
  $(function() {
  // 対象の画像を特定（IDで指定）
  const $targetImage = $('#target-image');
  
  // ページ読み込み時に画像を非表示にする
  $targetImage.hide();
  
  // 画像を開くボタンのクリックイベント
  $('#on-btn').on('click', function() {
    $targetImage.fadeIn(500); // フェードイン効果で表示（数字大きいと時間かかる）
    $(this).prop('disabled', true); // 開くボタンを無効化
    $('#off-btn').prop('disabled', false); // 閉じるボタンを有効化
  });
  
  // 画像を閉じるボタンのクリックイベント
  $('#off-btn').on('click', function() {
    $targetImage.fadeOut(500); // フェードアウト効果で非表示（数字大きいと時間かかる）
    $(this).prop('disabled', true); // 閉じるボタンを無効化
    $('#on-btn').prop('disabled', false); // 開くボタンを有効化
  });
  
  // 初期状態で閉じるボタンを無効化
  $('#off-btn').prop('disabled', true);
  });
  

  
    css
    #on-btn, #off-btn, #btn, #stop {
      margin: 10px;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    #on-btn:hover, #off-btn:hover {
      background-color: #0056b3;
      transform: translateY(-2px);
    }
    #on-btn:disabled, #off-btn:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
      transform: none;
    }
    #on-btn:disabled:hover, #off-btn:disabled:hover {
      background-color: #6c757d;
    }
  

  
  HTML
  <button id="btn">クリック</button> 
  <button id="stop">クリックイベント解除</button>
  <p id="log"></p>

  jQuery
  function clickHandler() {
  $('#log').text('ボタンがクリックされました');
  }
  $('#btn').on('click', clickHandler);
  // イベント解除
  $('#stop').on('click', function() {
    $('#btn').off('click', clickHandler);
    $('#log').text('イベントを解除しました');
  });

  // ページ読み込み完了時のイベント処理
  $(function() {

  // 初期状態で#load要素を非表示にする
  $('#load').hide();

  // ページの読み込みが完全に完了したら表示
  $(window).on('load', function() {
    $('#load').fadeIn(5000).css({
      'color': '#28a745',
      'font-weight': 'bold',
      'background-color': '#d4edda',
      'padding': '10px',
      'border-radius': '5px',
      'border': '1px solid #c3e6cb'
      });
    });
  });
  

イベント処理-1

  
  HTML
  <div id="load">loadイベントが発生中</div>
  <div id="scroll">scrollで色が変化</div>
  

  
  jQuery
  // ページ読み込み完了時のイベント処理
  $(function() {
  // 初期状態で#load要素を非表示にする
  $('#load').hide();
          
  // ページの読み込みが完全に完了したら表示
  $(window).on('load', function() {
    $('#load').fadeIn(5000).css({
      'color': '#28a745',
      'font-weight': 'bold',
      'background-color': '#d4edda',
      'padding': '10px',
      'border-radius': '5px',
      'border': '1px solid #c3e6cb'
      });
    });
  });

  // scrollイベント（スクロールするたびに色が変わる）
  $(window).on('scroll', function() {
    const scrollTop = $(window).scrollTop();
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'];
    const colorIndex = Math.floor(scrollTop / 100) % colors.length;
          
  $('#scroll').css({
    'color': colors[colorIndex],
    'font-weight': 'bold',
    'transition': 'color 0.3s ease'
    }).text(`scrollで色が変化 現在値 (${scrollTop}px)`);
  });
  

CSS操作

HTML要素のCSSスタイルを動的に変更可能

CSSの変更例

HTML要素(p)を変更

  
    HTML
    <p id="css-change">HTML要素(p)を変更</p>

    jQuery
    $('#css-change').css ({
      'padding': '10px',
      'background-color': 'tomato',
      'border': '1px solid black',
      'border-radius': '8px'
    });
  

  
    HTML
    <div id="error-message" class="error-message" style="display: none;">ここは押したら駄目なの！</div>
    <button id="css-btn">押す</button>

    jQuery CSSの変更応用例
    $('#css-btn').on('click', function() {
    const $errorMessage = $('#error-message');
    
    // エラーメッセージを表示
    $errorMessage.show();
    
    // 3秒後に自動で非表示にする
    setTimeout(function() {
      $errorMessage.addClass('fade-out');
      setTimeout(function() {
        $errorMessage.hide().removeClass('fade-out');
      }, 3000);
    }, 2000);
    });
  

  
  CSS
  #css-btn {
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
  }
  .error-message {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef5350;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    animation: shake 0.5s ease-in-out;
  }
  /* エラーメッセージのアニメーション */
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
  }
  /* エラーメッセージのフェードアウトアニメーション */
    .error-message.fade-out {
    animation: fadeOut 3s ease-in-out forwards;
  }
  @keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; display: none; }
  }  
  

class属性の操作

  
  HTML
  <p id="target">class属性の操作サンプル</p>
  <button id="add">押すとclass属性追加</button>

  CSS
  #add {
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
  }
  HTMLにいない架空の名前
  .css-class-sample {
    color: red;
    background-color: black;
  }

  jQuery
  $(function() {
    $('#add').on('click', function(){
      $('#target').addClass('css-class-sample');
    });                 HTMLにいない架空の名前を呼び出す
  });
  

DOM操作

  
  HTML
  <button id="change-btn">DOM操作開始ボタン</button>
  <p id="text-target">テキスト変更</p>

  jQuery
  $('#change-btn').on('click', function() {
    $('#text-target').text('DOM操作でテキストを変更完了');
  });
  

  
  HTML
  <button id="change-btn1">要素追加ボタン</button>
  <button id="change-btn2">要素削除ボタン</button>
  <p id="append-remove-target">要素追加.削除</p>

  jQuery

  要素追加（クラスを付ける）
  $('#change-btn1').on('click', function() {
    $('#append-remove-target').append('<p class="added-element">要素追加</p>');
  });

  要素削除
  $('#change-btn2').on('click', function() {
    $('#append-remove-target .added-element').remove();
  });
  

  
  HTML
  <button id="change-btn3">表示ボタン</button>
  <button id="change-btn4">非表示ボタン</button>
  <p id="show-target" style="display: none">要素表示</p>
  <p id="hide-target">要素非表示</p> 

  jQuery

  要素表示
  $('#change-btn3').on('click', function() {
    $('#show-target').show();
  });

  要素非表示
  $('#change-btn4').on('click', function() {
    $('#hide-target').hide();
  });
  

フォーム制御

  
  HTML
  <form id="form-test">
    <!-- 名前 -->
    <div>
      <span>名前：</span>
      <input type="text" name="username" />
    </div>
    <!-- 性別 -->
    <div>
      <span>性別：</span>
      <input type="radio" name="gender" value="male">男
      <input type="radio" name="gender" value="female">女
      <input type="radio" name="gender" value="other">その他
    </div>
    <!-- 血液型 -->
    <div>
      <span>血液型：</span>
      <select name="blood">
        <option value="a">A型</option>
        <option value="b">B型</option>
        <option value="o">O型</option>
        <option value="ab">AB型</option>
        <option value="unknown">不明</option>
      </select>
    </div>
    <!-- 趣味 -->
    <div>
      <span>趣味：</span>
      <input type="checkbox" name="hobby" value="book">読書
      <input type="checkbox" name="hobby" value="music">音楽
      <input type="checkbox" name="hobby" value="movie">映画
      <input type="checkbox" name="hobby" value="walk">散歩
    </div>
    <input type="button" id="check-btn" value="check" />
  </form>
  

  
  jQuery
  $(function () {
  // id属性がcheck-btnの要素がクリックされたら
    $('#check-btn').on('click', function () {
      // 名前(テキストボックス)を取得する
      const username = $('[name="username"]').val();

      // 性別(ラジオボタン)を取得する
      const gender = $('[name="gender"]:checked').val();

      // 血液型(セレクトボックス)を取得する
      const blood = $('[name="blood"]').val();

      // 趣味(チェックボックス)を取得する
      const hobbies = [];
      $('[name="hobby"]:checked').each(function() {
        //$(this)は1つずつの選択された要素を意味する
        hobbies.push($(this).val());
      });

      // 全ての値を一つのアラートで表示
      let result = '入力された値:\n';
      result += '名前: ' + (username || '未入力') + '\n';
      result += '性別: ' + (gender || '未選択') + '\n';
      result += '血液型: ' + blood + '\n';
      result += '趣味: ' + (hobbies.length > 0 ? hobbies.join(', ') : '未選択');
      
      window.alert(result);
    });
});

  

jQueryの便利機能-1

一番使用する箇所

jQuery公式URL

(例)Draggable

ドラッグして移動できるボックス

  
  HTML
  <div id="draggable" class="ui-widget-content">
    <p>ドラッグして移動できるボックス</p>
  </div>

  jQuery
  $( function() {
    $( "#draggable" ).draggable();
  });

  CSS
  #draggable { 
  width: 300px; 
  height: auto; 
  padding: 0.5em; 
  }
  

jQueryの便利機能-2

jQuery公式URL

(例)Accordion

Section 1

アコーディオン実装

Section 2

アコーディオン実装-1

Section 3

アコーディオン実装-List

• List-1
• List-2
• List-3

Section 4

アコーディオン実装-2

アコーディオン実装-3

  
  HTML
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      <p>アコーディオン実装</p>
    </div>
    <h3>Section 2</h3>
    <div>
      <p>アコーディオン実装-1</p>
    </div>
    <h3>Section 3</h3>
    <div>
      <p>アコーディオン実装-List</p>
      <ul>
        <li>List-1</li>
        <li>List-2</li>
        <li>List-3</li>
      </ul>
    </div>
    <h3>Section 4</h3>
    <div>
      <p>アコーディオン実装-2</p>
      <p>アコーディオン実装-3</p>
    </div>
  </div>

  jQuery
  $( function() {
  $( "#accordion" ).accordion();
  });
  

jQueryの便利機能-3

  
  HTML
  <button id="fadeOut">fadeOut</button>
  <button id="fadein">fadein</button> 
  <div class="jQuery-box">fadeOut<br>fadein<br>box</div>

  jQuery
  $('#fadeOut').on('click', function() {
    $('.jQuery-box').fadeOut();
  });

  $('#fadein').on('click', function() {
    $('.jQuery-box').fadeIn();
  });
  

  
  HTML
  <button id="slideUp">slideUp</button>
  <button id="slideDown">slideDown</button>
  <button id="slideToggle">slideToggle</button>
  <div class="jQuery-box">slideUp<br>slideDown<br>slideToggle<br>box</div>

  jQuery
  $('#slideUp').on('click', function() {
    $('.jQuery-box').slideUp();
  });

  $('#slideDown').on('click', function() {
    $('.jQuery-box').slideDown();
  });

  $('#slideToggle').on('click', function() {
    $('.jQuery-box').slideToggle();
  });