SONICMOOV Googleページ

さくっと見れる初心者向けjQueryの使い方

さくっと見れる初心者向けjQueryの使い方

  • このエントリーをはてなブックマークに追加

静的なWebページをHTMLである程度コーディングができるようになったら次のステップとして動きのある動的なページを作りたくなると思いますが、そんな時にjQueryを使うといいでしょう。

初心者の方向けにjQueryの使い方について紹介したいと思います。

jQueryとは?

Webページで動きのあるページを作る方法に、Webブラウザで利用できるプログラミング言語の一つであるJavascriptを使う方法がありますが、それを使うにはある程度の知識と習得する時間や検証などが必要となり手間暇がかかります。

そこで登場するのがjQuery。
jQueryはJavascriptで書かれたライブラリで、簡単な記述で様々な動きのあるページを作成することができます。

例えば、ざっとですがこんなことができます。

  • 動きのあるアコーディオンメニュー
  • 画像を自動で再生するスライドショー
  • ブラウザウィンドウの要素やサイズを取得
  • カレンダー(デートピッカー)
  • CSSの制御
  • イベントの制御
  • 色の変更
  • フェードイン・フェードアウト
  • etc…

jQueryの読み込み

さくっと使い方を見ていきたいと思います。

まずはライブラリファイルを読み込む方法です。
読み込む方法は二通りあり、Googleがホストしているライブラリから読み込む方法と本家からファイルをダウンロードして読み込む方法があります。

Googleライブラリから読み込む

まずはこちらにアクセス。
https://developers.google.com/speed/libraries/#jquery

下記のような感じでバージョン1から3までのライブラリを読み込む記述がありますので、それをコピーして使います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

ダウンロードして使う

本家のサイトにアクセスします。
https://jquery.com/download/

この記事を執筆している時点ではバージョンが「3.1.1」となっていますが、下記のようなテキストリンクがありますので、それをクリックしてダウンロード&保存します。
「Download the compressed, production jQuery 3.1.1」

ダウンロード保存したファイルを下記のように記述してライブラリを読み込みます。
実際の処理は「sample.js」に書いていきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
  </head>
  <body>
    <a href="#" class="btn_trigger demo01_trigger">ボタン</a>
    <!-- bodyを閉じる直前でjQueryを読み込む -->
    <script src="js/jquery-3.1.1.min.js"></script>
    <!-- jQueryを読み込んだ後に実行するスクリプトを読み込む -->
    <script src="js/sample.js"></script>
  </body>
</html>
続きを読む

処理の書き方

sample.jsにはこんな感じで処理を書いていきますが、このように簡単な処理を書くだけで利用できます。

$(function() {
  // ここに処理を書く
  $('.demo01_trigger').on('click', function(){
      alert('アラート');
  });
});

ここまでの詳細、及び他のサンプルはこちらで確認できます。
【jQuery入門 1】超基本! jQuery のダウンロードと書き方

セレクタ要素の取得

CSSのセレクタの書き方とほぼ同じで、jQueryを記述するときに$()の中に記述する要素のことです。

classセレクタ

$('.demo').css(...

idセレクタ

$('#demo').css(...

下記は、セレクタの指定を使って色を替えるサンプルです。

html

<ul id="warabi">
    <li class="maccha">抹茶わらびもち</li>
    <li class="kuromitsu">黒蜜わらびもち</li>
    <li class="kinako">きなこわらびもち</li>
</ul>

sample.js

$(function() {
    // 「抹茶味」の色を変える
    $('.maccha').css('color', '#f2639c');
});

セレクタの基本詳細&デモサンプルはこちら。
【jQuery入門 2】セレクタって何?要素を取得しよう。基本編

機能的セレクタ

jQueryには様々な機能が使えるセレクタがあります。

  • .find()
    指定された条件に当てはまる要素を取得
  • .eq()
    指定された条件に当てはまるn番目の要素を取得
  • .not()
    指定された条件と一致しない要素を取得
  • etc…

「demo04_inner p」の4番目の要素を取得して、class「demo04_target」を追加するというサンプルです。
html

<div class="demo04_inner">
    <p>01</p>
    <p>02</p>
    <p>03</p>
    <p>04</p>
    <p>05</p>
    <p>06</p>
</div>

sample.js

$(function() {
     $('.demo04_inner p').eq(4).toggleClass('demo04_target');
});

実行するとこんな結果になります。
html

<div class="demo04_inner">
    <p>01</p>
    <p>02</p>
    <p>03</p>
    <p class="demo04_target">04</p>
    <p>05</p>
    <p>06</p>
</div>

より詳細なセレクタ機能はこちらを参照してください。
【jQuery入門 3】要素を取得しよう。セレクタって何?機能的セレクタ編

jQuery UIには様々なサンプルがありますので、どんなのがあるのか覗いてみるといいかもしれません。

イベント

クリックされた時や画面サイズが変更されたとき、スクロールがされた時など特定のイベントが発生した時に処理を実行することができます。

  • .click()
    クリックされたとき
  • .resize()
    画面サイズが変更されたとき
  • .scroll()
    スクロールされたとき
  • etc…

class「demo01_trigger」をクリックした時にアラート画面が表示されるサンプルです。
html

<a href="#" class="btn_trigger demo01_trigger">テキスト</a>

sample.js

$(function() {
    $('.demo01_trigger').on('click', function(){
        alert('アラート画面の登場');
    });
});

イベントの詳細とデモサンプルはこちら。
【jQuery入門 4】イベントって何?on、offを使ってみよう

属性の取得と書き換え

続いては、要素の属性の取得と書き換えです。
属性とは、widthやheight、href、titleなどで指定してる値や設定などで、要素の高さや横幅などを取得して変更したりすることができます。

  • .width()
    要素の幅を取得
  • .height()
    要素の高さを取得
  • .toggleClass()
    classを切り替える

ボタンをクリックしたら、高さが変わるというサンプルです。
html

<div class="btn_wrap">
    <button class="btn_trigger demo02_trigger1">40px</button>
    <button class="btn_trigger demo02_trigger2">80px</button>
</div>
<div class="demo02_target demo02_target1">40px</div>
<div class="demo02_target demo02_target2">80px</div>

sample.js

$(function() {
     $('.demo02_trigger1').on('click', function(){
        $('.demo02_target1').height(40);
    });
    $('.demo02_trigger2').on('click', function(){
        $('.demo02_target2').height(80);
    });
    $('.demo02_trigger3').on('click', function(){
        $('.demo02_target3').height(120);
    });
});

要素の属性の取得と書き換えとサンプルデモはこちら。
【jQuery入門 5】要素の属性の取得と書き換え

【jQuery入門 6】要素の書き換え、追加・削除

CSSの取得・追加・変更

続いては、CSSの取得・追加・変更を見ていきたいと思います。
CSSのプロパティを変更することで色を変更したり、要素の表示・非表示ができます。イベントと組み合わせることでユーザー操作による動きのあるコンテンツを作成できます。

リンクをクリックしたら、指定した要素を非表示にサンプルです。
html

<div class="btn">
    <a href="#">クリック</a>
</div>
<ul class="momotaro">
    <li class="saru">サル</li>
    <li class="inu">イヌ</li>
    <li class="kiji">キジ</li>
</ul>

sample.js

$(function() {
    $('.btn a').on('click', function(){
        $('.momotaro .kiji').hide();
    });
});

CSSの取得・追加・変更の詳細、サンプルはこちら。
【jQuery入門 7】CSSの取得・追加・変更をしよう

ウィンドウや要素の大きさを取得

ブラウザウィンドウの大きさを取得したい時に使用します。

リンクをクリックすると、横幅と縦幅の値をアラート画面で表示するサンプルです。
html

<div class="btn">
    <a href="#">クリック</a>
</div>

sample.js

$(function() {
    $('.btn a').on('click', function(event){
      // ウィンドウの幅
      var winW = $(window).width();
      // ウィンドウの高さ
      var winH = $(window).height();
      alert('幅 = ' + winW + '\n高さ = ' + winH);
    });
});

【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。

アニメーション

jQueryの得意なことの一つにアニメーションがありますが、それも簡単な記述をするだけでフェードイン・フェードアウトやスライドを実現することができます。

  • .fadeIn()
    非表示な要素をフェードイン表示
  • .fadeOut()
    表示している要素をフェードアウト表示
  • .slideDown()
    要素を開いた状態に
  • etc…

リンクをクリックしたら、要素がフェードアウトするサンプルです。
html

<div class="btn">
    <a href="#">クリック</a>
</div>
<div class="box">消えるよー</div>

sample.js

$(function() {
    $('.btn a').on('click', function(event){
      $('.box').fadeOut(1500);
    });
});

詳細はこちら。
【jQuery入門 9】様々なアニメーションをつけよう。

プラグイン

単純な操作だったら、jQuery単体とちょっとした記述で処理させることができますが、やはりちょっとした凝ったことをしようと思うとそれなりに記述する必要があります。

しかし、jQueryには様々なプラグインが開発、公開されています。それを利用するだけで凝った動きのあるサイトを作成できます。

こちらの記事「【jQuery入門 10】プラグインを使ってみよう。」では、サンプルでslickというプラグインの導入から使い方について紹介していますので、チェックしてみてください。

やり方が分かったら、こちらのオススメのプラグインもチェックしてみてください。
ちょちょいと簡単実装で凄い効果!おすすめの jQuery プラグイン 9選

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

運営管理者(マスター)

運営管理者です。たまに現れます。

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation