Zenn
Open7

jQueryを使ってみよう

かいかい

jQueryは、

JavaScriptのライブラリであり、
簡単にWebページの操作やイベント処理ができるようにするためのツールです。
以下のような特徴があります：

  • 簡単なDOM操作: HTML要素の選択や変更がシンプルなコードで実行できる。
  • イベント処理: クリックやスクロールなどのイベントを簡単に設定できる。
  • アニメーション: 要素のフェードインなどのアニメーション効果を簡単に実装できる。
  • クロスブラウザ対応: 異なるブラウザ間の互換性を気にせずに操作ができる。

jQueryを使うことで、少ないコードで効果的にWebページを操作できます。

かいかい

rails でのjQueryの使い方

index.htmlファイルに書き込む時

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="jquery.min.js"></script>　　　　//jQueryの読み込み
    <script src="app.js"></script>　　　　　　　  //jsファイルの読み込み
  </body>
</html>

jsファイルより先にjQueryを読み込む必要があります。必ずjQueryを最初に記述する

かいかい

jsファイルにjQueryを書く

一番最初に書く必要があるコードを書く！

app.js
$(function(){


  // jQueryプログラムの内容


});

これを書けば「HTMLの読み込みが終わってからjQueryが実行されるように記述する」になる

かいかい

jQueryの基本書式

$( セレクタ ).メソッド ( パラメータ );

$('body').html('<h1>Hello JQuery!!</h1>');

//bodyタグ内のHTMLを、<h1>Hello JQuery!!</h1>で書き換える

$があることでjQueryであることが分かる

$('body')はjQuery('body')と同じ意味です。

逆に考えると、jsファイル内でjQueryでは無い変数には$は不要

ただし、jQueryでは慣習的にjQueryオブジェクトやjQueryを利用して取得した要素を
変数に格納する場合、$を変数名の先頭に付けることがあります。

例えば：

var $element = $('#myElement'); // jQueryオブジェクト
var myVar = 10; // 通常の変数

このようにすることで、
$elementがjQueryオブジェクトであることを分かりやすくする役割があります。
ただし、これは単なるコーディングの習慣であり、必須ではありません。

かいかい

1. コンテンツの操作

text()

基本的な書き方：

$('セレクタ').text();
$('セレクタ').text('新しいテキスト');

具体例：

$('#example').text(); // テキストを取得
$('#example').text('こんにちは、世界！'); // テキストを設定

説明：要素のテキスト内容を取得または設定します（HTMLタグは無視されます）。

html()

基本的な書き方：

$('セレクタ').html();
$('セレクタ').html('<b>新しいHTML</b>');

具体例：

$('#example').html(); // HTMLを取得
$('#example').html('<b>太字のテキスト</b>'); // HTMLを設定

説明：要素のHTMLコンテンツを取得または設定します（HTMLタグも含めます）。

val()

基本的な書き方：

$('セレクタ').val();
$('セレクタ').val('新しい値');

具体例：

$('#textInput').val(); // フォームの値を取得
$('#textInput').val('新しい入力値'); // フォームの値を設定

説明：フォーム要素の値を取得または設定します（テキストボックスやセレクトボックスなどに使用）。

2. 表示・非表示の操作

show()

基本的な書き方：

$('セレクタ').show();

具体例：

$('#hiddenDiv').show(); // 要素を表示

説明：要素を表示します。

hide()

基本的な書き方：

$('セレクタ').hide();

具体例：

$('#visibleDiv').hide(); // 要素を非表示

説明：要素を非表示にします（display: noneと同じ効果）。

fadeIn()

基本的な書き方：

$('セレクタ').fadeIn(時間);

具体例：

$('#fadeDiv').fadeIn(1000); // 1秒間かけてフェードイン

説明：要素をフェードイン（徐々に表示）させます。時間はミリ秒で指定します。

fadeOut()

基本的な書き方：

$('セレクタ').fadeOut(時間);

具体例：

$('#fadeDiv').fadeOut(500); // 0.5秒間かけてフェードアウト

説明：要素をフェードアウト（徐々に非表示）させます。時間はミリ秒で指定します。

slideDown()

基本的な書き方：

$('セレクタ').slideDown(時間);

具体例：

$('#slideDiv').slideDown(700); // 0.7秒間でスライドダウン

説明：下方向にスライドさせながら要素を表示します。時間はミリ秒で指定します。

slideUp()

基本的な書き方：

$('セレクタ').slideUp(時間);

具体例：

$('#slideDiv').slideUp(700); // 0.7秒間でスライドアップ

説明：上方向にスライドさせながら要素を非表示にします。時間はミリ秒で指定します。

3. クラスの操作

addClass()

基本的な書き方：

$('セレクタ').addClass('クラス名');

具体例：

$('#myDiv').addClass('highlight'); // クラスを追加

説明：指定したクラスを要素に追加します。

removeClass()

基本的な書き方：

$('セレクタ').removeClass('クラス名');

具体例：

$('#myDiv').removeClass('highlight'); // クラスを削除

説明：指定したクラスを要素から削除します。

hasClass()

基本的な書き方：

$('セレクタ').hasClass('クラス名');

具体例：

if ($('#myDiv').hasClass('highlight')) {
  alert('ハイライトされています');
}

説明：要素が指定したクラスを持っているかを判定します（真偽値を返します）。

4. スタイル（CSS）の操作

css()

基本的な書き方：

$('セレクタ').css('プロパティ名');
$('セレクタ').css('プロパティ名', '値');

具体例：

$('#myDiv').css('color', 'red'); // 色を赤に設定
var backgroundColor = $('#myDiv').css('background-color'); // 背景色を取得

説明：要素のスタイルを取得または設定します。複数のスタイルを設定することも可能です。

5. イベントの操作

onメソッドを使ったイベントの操作

on() メソッドは、jQueryにおいてイベントリスナーを設定するための非常に
重要で便利なメソッドです。以下の特徴があります。

基本的な使い方

$('セレクタ').on('イベント名', function(event) {
    // イベントが発生したときの処理
});

例

  1. クリックイベント:
$('#myButton').on('click', function() {
    alert('ボタンがクリックされました！');
});
  1. 複数のイベントを指定:
$('#myElement').on('click mouseover', function() {
    $(this).css('color', 'red');
});
  1. イベントデリゲーション（動的要素に適用）:
$('#parent').on('click', '.child', function() {
    $(this).fadeOut();
});
click

基本的な書き方：

$('セレクタ').click(function() {
  // 処理内容
});

具体例：

$('#myButton').click(function() {
  alert('ボタンがクリックされました');
});

説明：要素がクリックされたときに処理を実行します。

mouseover

基本的な書き方：

$('セレクタ').mouseover(function() {
  // 処理内容
});

具体例：

$('#myDiv').mouseover(function() {
  $(this).css('background-color', 'yellow');
});

説明：マウスが要素に乗ったときに処理を実行します。

mouseout

基本的な書き方：

$('セレクタ').mouseout(function() {
  // 処理内容
});

具体例：

$('#myDiv').mouseout(function() {
  $(this).css('background-color', 'white');
});

説明：マウスが要素から離れたときに処理を実行します。

hover()

基本的な書き方：

$('セレクタ').hover(function() {
  // マウスが乗ったときの処理
}, function() {
  // マウスが離れたときの処理
});

具体例：

$('#myDiv').hover(
  function() {
    $(this).addClass('hovered');
  }, 
  function() {
    $(this).removeClass('hovered');
  }
);

説明：マウスが要素に乗ったときと離れたときの両方のイベントを設定できます。

6. 属性や要素の追加・変更

attr()

基本的な書き方：

$('セレクタ').attr('属性名');
$('セレクタ').attr('属性名', '値');

具体例：

var title = $('#myImage').attr('title'); // 属性の取得
$('#myImage').attr('alt', '新しい代替テキスト'); // 属性の設定

説明：要素の属性を取得または設定します。

append()

基本的な書き方：

$('セレクタ').append('追加する内容');

具体例：

$('#myList').append('<li>新しいリスト項目</li>'); // リストに項目を追加

説明：要素の末尾に新しい要素やコンテンツを追加します。

prepend()

基本的な書き方：

$('セレクタ').prepend('追加する内容');

具体例：

$('#myList').prepend('<li>最初のリスト項目</li>'); // リストの最初に項目を追加

説明：要素の先頭に新しい要素やコンテンツを追加します。

かいかい

プラグインを紹介します。

jQuery UI

説明：jQueryに追加することで、ドラッグ＆ドロップ、リサイズ、カレンダー選択などの機能を簡単に実装できるプラグインです。

特徴：

  • 多彩なインタラクション（ドラッグ、リサイズ、選択など）。
  • アニメーション効果やウィジェット（ダイアログ、スライダーなど）も豊富。

公式サイト：jQuery UI

Slick（スライダー）

説明：レスポンシブなスライダー（カルーセル）を簡単に作成できるプラグインです。

特徴：

  • シンプルな設定でスライダーを作成。
  • レスポンシブ対応なので、PCやスマートフォンでも問題なく動作。
  • オプション設定が豊富で、自由度の高いカスタマイズが可能。

公式サイト：Slick

AOS（Animate On Scroll）

説明：スクロール時に要素がアニメーション表示されるプラグインです。

特徴：

  • さまざまなアニメーションが用意されており、スクロールとともにコンテンツが動く演出が簡単にできる。
  • 設定がシンプルで、アニメーションのカスタマイズも容易。

公式サイト：AOS

Moment.js

説明：日付と時刻の操作を簡単に行うためのプラグインです。

特徴：

  • 日付のフォーマット変換、時刻の差分計算などが簡単にできる。
  • 多言語対応で、ロケールに合わせた表記も可能。

公式サイト：Moment.js

SweetAlert2

説明：デフォルトの「alert」や「confirm」ダイアログをカスタマイズして、見栄えの良いポップアップを表示できるプラグインです。

特徴：

  • アラートや通知ダイアログをリッチなデザインで表示。
  • イベントに応じた処理を設定することができる。
  • カスタマイズが簡単で、ボタンやアイコンの設定も可能。

公式サイト：SweetAlert2

Parsley.js

説明：フォームのバリデーションを簡単に行うためのプラグインです。

特徴：

  • 各種入力チェック（必須項目、メールアドレスの形式、文字数制限など）を簡単に設定。
  • 非同期でバリデーションの結果を表示できる。
  • 多言語対応。

公式サイト：Parsley.js

これらのプラグインをアコーディオン形式で整理することで、必要な情報を見やすくすることができます。

かいかい

animate() メソッドを使ってアニメーションさせる主なプロパティを整理しました。
それぞれのプロパティの基本的な説明と例を含めています。

animate() メソッドの主要なプロパティ

opacity
  • 要素の不透明度を設定します（0: 完全透明、1: 完全不透明）。
  • 例: { opacity: 0.5 }
width
  • 要素の幅を設定します。
  • 例: { width: '300px' }
height
  • 要素の高さを設定します。
  • 例: { height: '200px' }
margin
  • 要素の外側のマージンを設定します。
  • 例: { margin: '20px' }
padding
  • 要素の内側のパディングを設定します。
  • 例: { padding: '10px' }
left
  • 要素の左からの位置を設定します（相対位置で移動します）。
  • 例: { left: '100px' }
top
  • 要素の上からの位置を設定します（相対位置で移動します）。
  • 例: { top: '50px' }
right
  • 要素の右からの位置を設定します。
  • 例: { right: '10px' }
bottom
  • 要素の下からの位置を設定します。
  • 例: { bottom: '10px' }
fontSize
  • テキストのフォントサイズを設定します。
  • 例: { fontSize: '20px' }
borderWidth
  • ボーダーの幅を設定します。
  • 例: { borderWidth: '5px' }
scrollTop
  • 要素のスクロール位置を設定します。
  • 例: { scrollTop: 100 }

使用例

以下に、いくつかのプロパティを組み合わせたアニメーションの例を示します。

$('#myElement').animate({
    width: '200px',   // 幅を200pxに
    height: '100px',  // 高さを100pxに
    opacity: 0.5,     // 不透明度を0.5に
    left: '+=50px'    // 現在位置から50px右に移動
}, 1000);  // 1000ミリ秒かけて

注意点

  • アニメーションに使用するプロパティは、CSSで指定できる数値型の値に限ります。例えば、color や background-color などの色のプロパティは直接アニメーションできませんが、opacity や位置関連のプロパティは数値で指定できるため、アニメーションが可能です。
  • 文字列で指定する場合は、単位（px, emなど）を忘れずに含めてください。