#5 jQueryってなに?

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

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

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

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

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

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

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

<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でも指定するあのセレクタです。どの要素を対象にするかを指定します。$()の中に入れます。書き方もcssと同様です。

メソッド:方法メソッドのことです。jQueryで決められている特定の機能をもった命令文です。一部紹介します。

.addClass()  要素にクラスを追加できます。
.on() 	    イベントを定義したりデータを渡すことができます。
.click() 	要素をクリックしてイベントを発生させます。
.mouseover() 	要素にカーソルが乗るとイベントが発生します。
.mouseout() 	要素からカーソルが離れるとイベントが発生します。
.hover() 	要素にカーソルが乗ったときと離れた時どちらもイベントが発生します。
.text() 	要素内のテキストを取得または書き換えることができます。
.show() 	非表示になっている要素を表示させます。
.hide() 	表示されている要素を非表示にします。
.toggle() 	showとhideの機能が一つになったもの。showとhideをクリック毎に交互に行います。
.animate() 	アニメーションを作成します。
.fadeIn() 	要素をフェードインで表示にします。
.fadeOut() 	要素をフェードアウトで非表示にします。
.change() 	input/select要素などの中身が変更されたときにイベントが発生します。

パラメータ:引数ひきすうです。それぞれのメソッドに対応した記述方法で値を入れます。

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

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

③addClassメソッドのパラメータ('クラス名')
$('div').addClass('showUp');

実行タイミングの宣言

②は①を省略した形で同じ意味です。html文章(ドキュメント)を読み込んだら...という意味になります。

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

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

$(function(){  /*HTMLを読み込んで、*/
  $("#sample").click(function() {  /*クリックしたら..*/
    /*処理を実行。*/
  });
});
※また、JavaScriptはCSSファイルのように外部ファイルに記述することが好ましいですが、ここではひとまずhtmlにscriptタグに入れて記述していきます。

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

htmlファイルの用意

以下のindex.htmlファイルを作成し、新たにフォルダに入れましょう。

<!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>
</head>
<script>
  //ここにjQueryを記述します
</script>
<body>

</body>
</html>
body内にサンプルのhtmlを入れます。

1. クリックイベント

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

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

#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'を付与します。*/
  });
});

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(){
    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);  /* ページの最上部に戻ります。*/
  });
});

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;
}
powerd by