【これだけ覚えて!】jQueryの書き方

前回はJavaScriptの基礎的な文法を学びました。
今回はJavaScriptのライブラリであるjQueryについて紹介するよ!!

この記事はjQueryを学ぶステップの連載の第三回です!
以下のステップでWebデザイナーが抑えておくべき知識を学びましょう😊

  1. 【事例で学ぶ】JavaScriptとは何か?
  2. Webデザイナーが知っておくべきJavaScriptの最低限の文法
  3. 【これだけ覚えて!】jQueryの書き方(この記事です)
  4. 【コピペでできる!】jQueryを使用したハンバーガーメニューの作り方

jQueryとは

jQueryとはJavaScriptのライブラリの一つです。ライブラリというのは、プログラムの処理をまとめたもののことを言います。JavaScriptでそのまま書くと何行にも及ぶ処理を、jQueryを使用することで簡単に書くことができます。

jQueryを使用すると、JavaScriptの記述が短くて済むと覚えておけば問題ないです。

jQueryの使い方

jQueryを使用するための準備

実際にjQueryを使用してみましょう。まずは準備です!

index.htmlとscript.jsという2つのファイルを用意して、index.htmlには以下のように記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  
  
  <script src="script.js"></script>
</body>
</html>

そうしたら「jQuery cdn Google」で検索してみましょう。以下のサイトが検索トップに出てくるはずです。

Hosted Libraries | Google Developers

A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.

サイトにアクセスしたら、最新バージョンのjQueryのCDNをコピーします。そうしたら、index.htmlのbodyタグの閉じタグの直前にペーストしましょう。

このときにjsファイルを読み込む記述の上に貼り付けるように気をつけてください。順番が違うとうまく作動しない場合があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

index.htmlのbodyタグ内が空っぽなので、ブラウザには何も表示されない状態になっています。ブラウザにテキストとボタンを表示したいので、body以下のように記述しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text">テキスト</div>
  <div class="btn">ボタン</div>

  <style>
    .text{
      width: 700px;
      margin: auto;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      background-color: #dd4;
      color: #222;
    }
    .btn{
      width: 200px;
      line-height: 48px;
      margin: 30px auto 0;
      text-align: center;
      color: #fff;
      background-color: orange;
      font-weight: bold;
      border-radius: 24px;
    }
    .btn:hover{
      cursor: pointer;
      opacity: .8;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

※CSSは通常別ファイルにしますが、上記では簡易的にstyleタグ内に記述しています。

ブラウザの表示が以下のようになっていればOKです。

これだけ覚えて!jQueryの書き方

jQueryの書き方は、これだけ覚えましょう!

$("セレクタ01").on('イベント',function(){
  $("セレクタ02").メソッド(値);
});

上の記述を日本語にすると、「セレクタ01」を「イベント」すると、「セレクタ02」が「メソッド(値)」になるとなります。

セレクタの指定方法はCSSと同様でHTML要素名、class名、id名などを指定できます。シングルクオテーションまたはダブルクオテーションで囲みましょう。

イベントはjQueryの処理が動くタイミングを指定します。以下のものをよく使用します。

  • cllick:クリックしたとき
  • mouseover:カーソルが要素の上に乗ったとき
  • mouseout:カーソルが要素の上から移動したとき
  • scroll:スクロールしたとき
  • load:ローディングが完了したとき

メソッドでHTML要素の操作方法を指定します。例えば、addClassというメソッドを使用すると、指定した要素に対してclassを追加できます。

試しにscript.jsに以下のような記述をしてみましょう!

$(".btn").on('click',function(){
  $('.text').css('color','red');
});

.cssは、cssを上書きするメソッドです。
ブラウザを表示して、"btn"をクリックすると、"text"の文字色が赤くなることを確認してください。

このように、jQueryを使用するとユーザーの行動に合わせて、要素を操作することができます。

上の例では、"btn"を「クリック」すると、「this(クリックした"btn")」に対して「cssをcolor:red;に変更する」という内容の記述になります。

セレクタはCSSと同じように、classを指定する場合は「.」をつけ、HTML要素を指定する場合はHTML要素名をそのまま書きます。また、idを指定するときは「#」を先頭につけます。

イベントやメソッドは複数ありますが、全てを覚える必要はありません。以降、よく使うメソッドを使いながら、jQureryでかんたんな記述をしてみましょう!

jQueryを書いてみよう!

show、hide、toggle

まずは要素の表示・非表示を操作する、show,hide,toggleについて見てみましょう!index.htmlを以下のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text visible-text">テキスト</div>
  <div class="text invisible-text">テキスト</div>
  <div class="btn">ボタン</div>

  <style>
    .text{
      width: 700px;
      margin: auto;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      background-color: #dd4;
      color: #222;
    }
    .invisible-text{
      display: none;
    }
    .btn{
      width: 200px;
      line-height: 48px;
      margin: 30px auto 0;
      text-align: center;
      color: #fff;
      background-color: orange;
      font-weight: bold;
      border-radius: 24px;
    }
    .btn:hover{
      cursor: pointer;
      opacity: .8;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

.textを2つ用意して、visible-textと.invisible-textに分けました。
.invisible-textはdisplay:none;で非表示にしています。

script.jsには以下のように記述します。

$('.btn').on('click',function(){
  $('.visible-text').hide(500);
  $('.invisible-text').show(500);
});

showは非表示になっている要素を表示し、hideは表示されている要素を非表示にするメソッドです。

上の例では.btnをクリックしたら、.visible-textが500ミリ秒かけて非表示になり、.invisible-textが500ミリ秒かけて表示されます。

上の例では、1回.btnをクリックすると、以降は動かなくなります。そのため、.btnをクリックするたびに表示・非表示を切り替えたい場合はtoggleというメソッドを使用します。

$('.btn').on('click',function(){
  $('.text').toggle(500);
});

上の例では、.btnをクリックするたびに、テキストの表示・非表示が入れ替わります。

fadeIn、fadeOut、fadeToggle

今度はフェードインやフェードアウトさせてみましょう。
script.jsを以下のように書き換えます。

$('.btn').on('click',function(){
  $('.invisible-text').fadeToggle(500);
});

先程と表示されるときのアニメーションが変化しました。上記の例では、.btnをクリックすると、500ミリ秒かけて.invisible-textがフェードインしたり、フェードアウトしたりします。

1度のフェードイン・フェードアウトで完結させたい場合はfadeToggleではなく、fadeIn、fadeOutを使用します。

slideIn、slideOut、slideToggle

表示・非表示系はこれでラストです。
slideToggleはアコーディオンメニューを実装するときに使用することが多いメソッドです。

script.jsを以下のように書き換えましょう。

$('.btn').on('click',function(){
  $('.invisible-text').slideToggle(500);
});

これでアコーディオンの開閉のように.invisible-textが表示されたり非表示になったりします。

addClass、removeClass、tggleClass

jQueryを使用すると、HTML要素に対してclassを付与したり外したりする操作も簡単にできます。これはjQueryでハンバーガーメニューを作成する際にも必要になってきますので、しっかりと理屈を抑えておきましょう😊

まず、CSSの記述を追記します。今回は文字の色を変更するために.redという記述を追加しました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery基礎</title>
</head>
<body>
  <div class="text visible-text">テキスト</div>
  <div class="text invisible-text">テキスト</div>
  <div class="btn">ボタン</div>

  <style>
    .text{
      width: 700px;
      margin: auto;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      background-color: #dd4;
      color: #222;
    }
    .invisible-text{
      display: none;
    }
    .btn{
      width: 200px;
      line-height: 48px;
      margin: 30px auto 0;
      text-align: center;
      color: #fff;
      background-color: orange;
      font-weight: bold;
      border-radius: 24px;
    }
    .btn:hover{
      cursor: pointer;
      opacity: .8;
    }
    .red{  
      color: red;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

それではscript.jsを以下のように書き換えましょう。

$('.btn').on('click',function(){
  $('.text').toggleClass('red');
});

これで、.btnをクリックすると、.textに対して、.redというclassが付与されたり、外されたりすることになります。ブラウザを表示してボタンのクリックをするごとにテキストの文字色が変われば成功です!

最後に

jQueryのメソッドはいろいろありますが、とりあえずは上記で紹介したものを使用できれば問題ありません。特にtoggleClassは非常に汎用性が高いので、積極的に使用していきましょう!

お疲れさまでした!
jQueryは.onメソッドの使い方とtoggleClassを覚えればだいたい大丈夫だよ!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA