作成日：2021/04/12　更新日：2022/07/13

#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. スライドボックス

アコーディオン１
- コンテンツ１
- コンテンツ２
- コンテンツ３
アコーディオン2
- コンテンツ１
- コンテンツ２
- コンテンツ３
アコーディオン3
- コンテンツ１
- コンテンツ２
- コンテンツ３


<ul class="accordion">
  <li>
    <div>アコーディオン１</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</li>
    </ul>
  </li>
  <li>
    <div>アコーディオン2</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</li>
    </ul>
  </li>
  <li>
    <div>アコーディオン3</div>
    <ul class="accordion_inner">  // インナー要素は最初は隠れています
      <li>コンテンツ１</li>
      <li>コンテンツ２</li>
      <li>コンテンツ３</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. ツールチップを作ってみよう！

1
ツールチップ1
2
ツールチップ2
3
ツールチップ3

「ホバーした要素の中だけの子要素を指定」という方法は$(this)を使って子要素を選択しないと、同名のクラスすべて対象となってしまいますので注意しましょう。詳しくはgoogleなどで「jQuery 子要素を選択 $this」で検索してみましょう。


$(function(){
  $('クラス名A').hide(); /*予めクラスを隠しておく*/
  $('クラス名B').xxxxxx(  /*あるクラスをホバーしたら...ホバーするメソッドは？*/
    function(){
      あるクラスを指定.fadeIn('速度指定'); /*対象となるクラスを指定し、フェードインさせる*/
    },
    function(){  /*ホバーを外したときの処理開始*/
      あるクラスを指定.xxxxxx('速度指定'); /*対象となるクラスを指定し、フェードインの逆xxxxxxさせる*/
    });
});

html内でどんな要素が登場して、その要素それぞれがどんなタイミングでどのような挙動をしてほしいかを考えてみましょう。 jsでは「ホバーしたときに、子要素を表示する」という処理を書きますので、表示されている要素の中に小要素が入るようにします。


<div>
  <ul>
    <li>親要素 <p class="">子要素</p></li>
    <li>・・・
  </ul>
</div>

ツールチップ先端の三角形はcss疑似要素「::after」を使っています。
googleなどの検索サイトで「CSS　三角作成」などで検索してみましょう


#nav{
  position:*****;    /*子要素を自由に動かす親要素*/
}
#nav li{
  display: inline-block;
  余白、背景色など
}
#nav li a{
  color:#fff;
}
.tooltips {
  position: *******;  /*自由に動かせたい*/
  上からの位置: 40px;
  余白、色、背景色、角Rなど
}
.tooltips::after {
  調べてみよう！
}

答え


$(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;
}

次のページ ▶

作成日：2021/04/12　更新日：2022/07/13

#5 jQueryってなに？

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

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

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

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

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

jQueryの書き方

セレクタ

メソッド

パラメータ

実行タイミングの宣言

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

htmlファイルの用意

1. クリックイベント

2. ホバーイベント

3. スライドボックス

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

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

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

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12 更新日：2022/07/13

#5 jQueryってなに？

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

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

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

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

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

jQueryの書き方

セレクタ

メソッド

パラメータ

実行タイミングの宣言

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

htmlファイルの用意

1. クリックイベント

2. ホバーイベント

3. スライドボックス

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

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

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

入門1（コーダー初級）

入門2（コーダー中級）

入門3（コーダー上級）

基礎1（マークアップ 初級）

基礎2（マークアップ 中級）

基礎3（マークアップ 上級）

応用1（フロントエンドエンジニア 初級）

応用2（フロントエンドエンジニア 中級1）

応用3（フロントエンドエンジニア 中級2）

実践1（フロントエンジニア 中級3）

実践2（フロントエンドエンジニア 中級4）

実践3（フロントエンドエンジニア 上級1）

実践3（バックエンド Laravel）

入門（デザイン概論）

基礎（デザイン実践）

応用（クリエイティブ）

Kids タイピングゲーム

Kids Scratch基礎

Kids Webサイト制作

作成日：2021/04/12　更新日：2022/07/13

基礎1（マークアップ初級）

基礎2（マークアップ中級）

基礎3（マークアップ上級）

応用1（フロントエンドエンジニア初級）

応用2（フロントエンドエンジニア中級1）

応用3（フロントエンドエンジニア中級2）

実践1（フロントエンジニア中級3）

実践2（フロントエンドエンジニア中級4）

実践3（フロントエンドエンジニア上級1）