読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

jQueryとは

jQueryとは


http://jquery.com/

ダウンロードして利用する場合
  • 2.xは、IE8以前には対応していません

  • compressed〜……改行などを除去してファイルサイズを抑えたファイル
  • uncompressed〜……圧縮前の元ファイル。構造が見やすい


head内に記述

  • ダウンロードしたデーターを管理フォルダー内の「js」フォルダー内に保存してパスを記述します
<script src="js/jquery-2.2.3.min.js"></script>
外部にあるソースのリンクを利用する場合

CDNを利用する

  • Content Delivery Network
  • ネットワーク経由でコンテンツを提供するサービス
  • Minified(改行が除かれた圧縮版)


jQuery CDN


Google Ajax API CDN

記述する場所

<head>
 ・・・
<script src="js/jquery-2.2.3.min.js"></script>
</head>
<body>
 ・・・
<script src="js/jquery-2.2.3.min.js"></script>
</body>

jQueryの概念

  • 「何かを取ってくる」→「それに何かする」
$とjQueryオブジェクト
  • 「$」こそが、「jQuery」そのもの
  • 「$()」でHTML要素を、jQueryオブジェクト化することから始まる
  • 要素を示すセレクタを取ってきて「jQueryオブジェクト」を作成します


何かする

  $( 'h1' ).show(); //表示させる
  $( 'h1' ).fadeIn();//フェードインさせる
  $( 'h1' ).slideDown(); //スライドアニメーションつきで表示させる
  $( 'h1' ).css('border', '1px solid red'); //1pxの赤線をつける
  $( 'h1' ).remove(); //削除する
jQueryを使うメリット

《クリックしたらをDOMで記述》

  1. クリックイベントについて、DOM(Document Object Model)で定義されている仕様を調べる
  2. 対象とする各ブラウザについて、対応状況を調べる
  3. 対応していない各ブラウザについて、そのブラウザ固有の仕様を調べる
  4. 対応状況を判別して、別の処理を書く
var div = document.getElementById('div1');
if(div.addEventListener) {
	div.addEventListener('click', doSomething, false);
}else if(div.attachEvent) {
	div.attachEvent('onclick', doSomething);
}
function doSomething() {
	alert('クリックされました');
}


jQueryで記述


$(セレクタ). jQueryの命令

$( '#div1' ).on( 'click', function() {
	console.log( 'クリックされました' );
});


この記述で、ブラウザごとの差異を吸収して、そのブラウザでも同じように表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<style>
#div1 {
  width: 100px;
  height: 100px;
  background: #FC0;
  cursor: pointer;
}
</style>
</head>
<body>
<div id="div1"></div>
<script>
$( '#div1' ).on( 'click', function() {
  console.log( 'クリックされました' );
});
</script>
</body>
</html>

まとめ

  • $がjquery
  • $()で何かを取ってくる
  • そして取ってきた要素をjQueryオブジェクト化する
  • jQueryオブジェクトにすると便利機能が使える
  • 利用するセレクタより下に記述する