作成日:2021/04/12 更新日:2022/06/03

#5 jQueryってなに?

jQueryジェイクエリー = JavaScriptのライブラリのひとつ

ライブラリとはJavaScriptなどのネイティブ言語を、より使いやすくさせたファイルのことです。
長くなる記述を短くできるメリットがある反面、ライブラリを読み込むことで、無駄な処理が発生したりするなど重くなったり、 他のライブラリとの競合コンフリクトが起きることもあります。
しかし、jQueryはJavaScriptを比較的簡単に習得できるメリットがあるのでぜひ習得しましょう。

#6 jQueryライブラリの読み込み

htmlにjQueryを読み込んでみよう

読み込み方は2種類あります。

①ファイルをダウンロードして読み込ませる方法

jQueryダウンロードサイトへ
ダウンロードしたファイルは、jsという名前とつけたフォルダを作りその中に入れ、htmlではlinkタグを使って読み込みます。

<script src="js/jquery-3.3.1.min.js"></script>
※minとついているファイルがあります。ファイル内の改行を削除した圧縮版ファイルという意味です。
※scriptタグの属性「type="text/javascript"」という記述はhtml5より不要になりました。

②Web上にあるファイルを読み込ませる方法

CDN(Contents Delivery Networkコンテンツ デリバリー ネットワーク)で配信されているファイルを読み込ませる方法です。
ファイルのダウンロードは必要ありませんが、ネット環境がないところでは使えなくなります。

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
上記はすべて同じことです。
※リンクするURLからhttp:やhttps:を削除していますが、特にサイト内にhttpとhttpsファイルが混在している場合に有効なので、 このような書き方をします。さしあたってローカル環境で実装する際はhttps:を入れておきましょう。

jQueryの書き方


$("セレクタ").メソッド(パラメータ);
/*↓例*/
$("#selector").css("color", "#00f");
セレクタ
cssでも指定するあのセレクタです。htmlではタグ名やクラス名のことです。どの要素を対象にするかを指定します。 $(" ")の中に入れるのがルールです。クオーテーションは"でも'でも大丈夫です。
メソッド
方法メソッドとは、jQueryという仕組みの中で決められている、特定の機能をもった命令です。 エクセルでいう、TEXT()やCOUNTIF()のようなもので、この名称の後の()カッコの中に、対象となる条件を入れることで使用します。 逆に言えば文字のあとにカッコ()があれば、それはメソッドであるということになります。
いろんなプログラミング言語でこのような命令する機能が用意されています。
メソッドと呼ばれていたり関数かんすうと呼ばれていたりします。
イメージしやすいところで言えば、ロボットを動かすとなったときに「右足を出す」とか「うなずく、あごを動かす」とか、そんな感じです。

一部紹介します。


.addClass()	要素にクラスを追加できます。
.on()		イベントを定義したりデータを渡すことができます。
.click()	要素をクリックしたときに、イベントを発生させます。
.mouseover()	要素にカーソルが乗ると、イベントが発生します。
.mouseout()	要素からカーソルが離れると、イベントが発生します。
.hover()	要素にカーソルが乗ったときと離れた時どちらもイベントが発生します。
.text()		要素内のテキストを取得または書き換えることができます。
.show()		非表示になっている要素を表示させます。
.hide()		表示されている要素を非表示にします。
.toggle()	showとhideの機能が一つになったもの。showとhideをクリック毎に交互に行います。
.animate()	アニメーションを作成します。
.fadeIn()	要素をフェードインで表示にします。
.fadeOut()	要素をフェードアウトで非表示にします。
.change()	input/select要素などの中身が変更されたときにイベントが発生します。
この時点では全て覚えなくても良いです。なんとなくこんなことできるのだなぁ程度で見てみましょう。
パラメータ
引数ひきすうとも呼ばれます。メソッドを使うときの対象となる要素を入れます。
例えば食べるというメソッドがあったとして、パラメータには食べ物を入れるというイメージです。

.食べる(バナナ)
.食べる(ドーナツ)
メソッドのカッコ()内に具体的な値や要素を入れることで、食べるという機能がバナナを食べるドーナツを食べるという、 具体的な動作となります。
プログラミングではこのように機能に値を入れて具体的な動きを作り出します。
それぞれのメソッドに対応した書き方で、パラメータ値を入れます。一部紹介します。

①cssメソッドのパラメータの場合("プロパティ", "値")
$("#abc").css("color", "#F00");
$(".abc").css({color:"#F00", fontSize:"120%"});  /* 複数記述するとき */

②fadeInメソッドのパラメータの場合('slow'),('fast'),('700')など
$(".abc").fadeIn('slow');

③addClassメソッドのパラメータの場合('クラス名')
$('.abc').addClass('showUp');  /* 追加するクラス名(showUp)の頭には(.)は不要です */

実行タイミングの宣言

html文章(ドキュメント)の読み込みが済んだらjQueryを実行したいので、その指示を入れます。

①
$(function(){
  /* 処理.... */
});

②
$(document).ready(function(){
  /* 処理.... */
});
①は②を省略した形で同じ意味です。ほとんどは①の書き方でOKです。

$(function(){  /* HTMLの読み込みが完了したときに... */
  $("#sample").click(function() {  /* #sample要素を`クリック`したら.. */
    /* ココに書いた処理を実行! */
  });
});
html文章が読み込まれる前にjQueryが実行されてしまうと、指定しているセレクタがまだ存在しない状態となります。 セレクタが存在しないため、jQueryがエラーとなることを防ぐために、htmlを読み込み完了したときにjQueryを実行させるために必要なものとなります。

#7 簡単な機能をjQueryで実装しよう

htmlファイルの用意

以下のindex.htmlファイルを作成し、新たにフォルダに入れましょう。
また、JavaScriptはCSSファイルのように外部ファイルに記述することが好ましいですが、ここのページではひとまずhtmlに直接scriptタグに入れて記述していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CBC jQuery</title>
  <link rel="stylesheet" href="css/reset.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  // jQueryの読み込み
</head>
<script>
  //ここにjQueryを記述します
</script>
<body>

</body>
</html>
以下に紹介するいろんなイベントを記述して実行してみましょう。

1. クリックイベント

ボタン
クリックをトリガーとして文字の色を変更するサンプルです。
これは"changeColor_btn"というidがついている要素をクリックした時に
"box"というidがついている要素内の文字色を変更しています。

<body>
<section>
  <div id="change_btn">ボタン</div>
  <div id="box">
  クリックをトリガーとして文字の色を変更するサンプルです。<br>
  これは"changeColor_btn"というクラスがついている要素をクリックした時に<br>
  "box"というidがついている要素内の文字色を変更しています。
  </div>
</section>
</body>

#change_btn{
  width:200px;
  padding: 10px 0;
  text-align: center;
  border: 1px solid #000;
  cursor: pointer;
}  

$(function(){
  $('#change_btn').click(function(){ /*changeColor_btnという名前の要素をクリックした時に*/
    $('#box').css({'color': '#0094d7'}) /*box要素の文字の色を変更します。*/
  });
});

2. ホバーイベント

背景色を変更するサンプルです。
これは"text"というクラスがついている要素にマウスを乗せた時に
"text"要素の背景色を変更しています。

<div id="text" class="hover_off">
  背景色を変更するサンプルです。<br>
  これは"text"というクラスがついている要素にマウスを乗せた時に<br>
  "text"要素の背景色を変更しています。
</div>

#text{
  padding:10px;
  border: 1px solid #000;
}
.hover_off{
  color: #000;
  background: #fff;
}
.hover_on{
  color: #fff;
  background: #0094d7;
}

$(function(){
  $('#text').mouseover(function(){		/* #textにマウスが乗ったときに*/
    $(this).removeClass('hover_off');	/* #textについているクラス'hover_off'を外して、*/
    $(this).addClass('hover_on');		/* クラス'hover_on'を付与します。*/
  });
  $('#text').mouseout(function(){		/* #textからマウスが外れたときに*/
    $(this).removeClass('hover_on');	/* #textについているクラス'hover_on'を外して、*/
    $(this).addClass('hover_off');		/* クラス'hover_off'を付与します。*/
  });
});
ここで$(this)ディスという表記が出てきました。
これはイベントを発生させる要素$('#text')のことを指します。 イベントを適応させる要素が複数ある場合に$(this)にしておかないと、すべての要素に適応されてしまいます。
いまは「処理の中ではイベントを発生させる要素は$(this)と書くんだな」と覚えておいてください。

3. スライドボックス

  • アコーディオン1
    • コンテンツ1
    • コンテンツ2
    • コンテンツ3
  • アコーディオン2
    • コンテンツ1
    • コンテンツ2
    • コンテンツ3
  • アコーディオン3
    • コンテンツ1
    • コンテンツ2
    • コンテンツ3

<ul class="accordion">
  <li>
    <div>アコーディオン1</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ1</li>
      <li>コンテンツ2</li>
      <li>コンテンツ3</li>
    </ul>
  </li>
  <li>
    <div>アコーディオン2</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ1</li>
      <li>コンテンツ2</li>
      <li>コンテンツ3</li>
    </ul>
  </li>
  <li>
    <div>アコーディオン3</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ1</li>
      <li>コンテンツ2</li>
      <li>コンテンツ3</li>
    </ul>
  </li>
</ul>

ul, li{
  list-style:none;
  margin:0;
  padding:0;
}
.accordion{
  color: #fff;
}
.accordion > li{
  background: #0094d7;
  border-bottom: 1px solid #fff;
}
.accordion > li > div{
  padding: 10px 0;
  text-align: center;
  background-color:#0094d7;
  cursor: pointer;
}
.accordion_inner{
  display: none;  /* インナー要素は最初は隠します */
}
.accordion_inner > li{
  padding: 10px 0;
  background: #fff;
  color: #000;
  text-align: center;
  border-left:1px solid #0094d7;
  border-right:1px solid #0094d7;
  border-bottom:1px solid #0094d7;
}

$(function(){
  $('.accordion > li > div').click(function(){	/* .accordion > li > divをクリックした時に */
    $(this).next('ul').slideToggle('fast');	/* クリックされた要素の次にあるdivを表示させる。*/
  });
});

4. ページトップへ戻るボタン

←画像をデスクトップにダウンロード

<div class="pageTop_btn">
  <img src="img/top.png" alt="ページトップへ戻る">
</div>

.pageTop_btn{
  width: 60px;
  height: 60px;
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
}
img{
  width: 100%;
  height: auto;
}

$(function(){
  $(window).scroll(function(){			/* windowがスクロールされた時に中の処理が実行されます */
    if( $(this).scrollTop() > 100 ) {		/* もし、画面最上部からのスクロール量が100pxを超えたら */
      $('.pageTop_btn').stop(true).fadeIn();	/* 'pageTop_btn'という名前の要素をフェードインさせます */
    } else {						/* 画面最上部からのスクロール量が100px以内なら */
      $('.pageTop_btn').stop(true).fadeOut();	/* 'pageTop_btn'をフェードアウトさせます */
    }
  });
  $('.pageTop_btn').click(function(){		/* 'pageTop_btn'という名前の要素をクリックした時に */
    $('body,html').animate({ scrollTop:0 },500);	/* ページの最上部に戻ります */
  });
});
処理としては、
1. まずウィンドウを1pxでも動かしたらこの中の処理が開始されます。
2. 高さが100px超えたらボタンがゆっくり表示されます。
3. 高さが100px以内になったらゆっくり消えます。
4. その表示されているボタンをクリックするとページの一番上に移動します。

jQueryについてgoogleなどで検索して、以下の機能を実装してみよう

5. ツールチップを作ってみよう!

答え

$(function(){
  $('.tooltips').hide();
  $('#nav li').hover(
    function(){
      $(this).children('.tooltips').fadeIn('fast');
    },
    function(){
      $(this).children('.tooltips').fadeOut('slow');
    });
});

<div id="nav">
<ul>
  <li>1<p class="tooltips">ツールチップ1</p></li>
  <li>2<p class="tooltips">ツールチップ2</p></li>
  <li>3<p class="tooltips">ツールチップ3</p></li>
</ul>
</div>

#nav{
  position:relative;
}
#nav li{
  display: inline-block;
  background-color:#ccc;
  padding:10px 20px;
}
.tooltips {
  padding: 0.3em 1em;
  position: absolute;
  top: 40px;
  color: #fff;
  background-color: #51A2C1;
  border-radius: 0.6em;
  z-index: 100;
}
.tooltips::after {
  color:#fff;
  content:'';
  position: absolute;
  top: -10px;
  left: 15px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #51A2C1;
  border-left: 10px solid transparent;
}