マークアップ講座 04 jQuery - JavaScript

1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装

1. jQueryとは
jQuery
『jQuery』
http://jquery.com/
• JavaScriptライブラリ
• 2006年リリース
• John Resig （ジョン・レシグ）
『John Resig - JavaScript Programmer』
http://ejohn.org/

1. jQueryとは
現在の最新バージョン
（2014年9月現在）
• IE互換版（PC）： 1.11.1
• IE非対応版（Mobile）： 2.1.1

2. jQueryの特長
• クロスブラウザ実装に適している
• ドットシンタックスのシンプル、軽量、CSSライクな
構文
• CSSとの高い親和性
• Ajax、コールバック取得など複雑な実装も容易
• プラグインが豊富、プラグイン開発が手軽に行える
• 圧倒的なシェア
利用Webサイト 60.1%　JSライブラリ中 94.0%
『W3Techs』 http://w3techs.com/

2. jQueryの特長
【TOPIC】jQuery ≠ jQuery Mobile
• jQueryとjQuery Mobileは別物
• 現状ではjQuery Mobileの利用メリッ
トはほとんどない（私見）

基本構文
!
jQuery(‘.sample’).html('text'); （以下”$”）
$('.sample').html('text');
!
$(selector).method(value);
!
$(セレクタ).メソッド(値);

セレクタ
!
$('［element］').html('text');
!
$('#［id］').html('text');
!
$('.［class］').html('text');
!
$('[［attribute］]').html('text');
!
$('[［attribute=value］]').html('text');

Event Handling (delegate)
!
$(document).on('click', '.sample', function () {
sampleFunction();
});
$(document).on('click', '.sample', sampleFunction);
!
$(document).on('［イベント］', '［セレクタ］', ［関
数］);

DOM ready
!
$(document).ready(function() {
sampleFunction();
});
$(document).ready(sampleFunction);
■ 省略型
$(function() {
sampleFunction();
});
$(sampleFunction);
• DeveloperToolにおける青い線のタイミング

window load
!
$(window).load(function() {
sampleFunction();
});
!
$(window).load(sampleFunction);
• DeveloperToolにおける赤い線のタイミング

method
『jQuery API Documentation』
http://api.jquery.com/

本講座で取り扱うメソッド
取得系
メソッド内容
$().text(); テキストの取得と設定
$().html(); HTMLコードの取得と設定
$().on(); イベント（delegate）の設定
$().off(); イベント（delegate）の解除
$().height(); 高さの取得と設定
$().scrollTop(); スクロール量の取得
$().css(); CSS要素の取得と設定

method
on、height、scrollTop
http://codepen.io/sekiyaeiji/pen/nIqrJ?editors=001
css
http://codepen.io/sekiyaeiji/pen/Ckgse?editors=101

本講座で取り扱うメソッド
処理系
メソッド内容
$().fadeIn(); フェード処理により表示状態に遷移
$().fadeOut(); フェード処理により非表示状態に遷移
$().fadeToggle(); fadeIn処理とfadeOut処理の反復
$().slideDown(); 縦スライドにより表示状態に遷移
$().slideUp(); 縦スライドにより非表示状態に遷移
$().slideToggle(); slideDown処理とslideUp処理の反復
$().addClass(); class値を付与
$().removeClass(); class値を削除
$().toggleClass(); addClass処理とremoveClass処理の反復

method
fadeIn、fadeOut、fadeToggle
http://codepen.io/sekiyaeiji/pen/LxhsJ?editors=101
slideDown、slideUp、slideToggle
http://codepen.io/sekiyaeiji/pen/AJfiu?editors=101
addClass、removeClass、toggleClass
http://codepen.io/sekiyaeiji/pen/igeqd?editors=011

【WORKSHOP1】
動かしてみましょう
　fadeIn、fadeOut、fadeToggle
　slideDown、slideUp、slideToggle
　addClass、removeClass、toggleClass
!
のどれかを利用した、ブロックの表示・非表示の
処理を書いてみましょう（10分）

モダン実装
jQuery + CSS Animation
jQuery（JS）アニメーションより処理が軽い
slide
http://codepen.io/sekiyaeiji/pen/eFkoG?editors=011
fade
http://codepen.io/sekiyaeiji/pen/tuGny?editors=011

即時関数
!
(function () {
～
})();
• JavaScriptファイル全体をこれでラッピングする
定義
!
var sampleVariable = 'サンプルテキスト';

関数
function sampleFunction () {
～
}
function ［関数名］ (［引数］) {
［処理］
}

条件文
if (［条件式］) {
［処理］
}
else if (［条件式］) {
［処理］
}
else {
［処理］
}

デバッグログ
!
console.log(［変数］);
console.log(‘［ログコメント］’);

コメントアウト
!
// 1行コメント
!
/*
複数行
コメント
*/
http://codepen.io/sekiyaeiji/pen/Gwtvd?editors=001

5. jQuery実装
jQuery読み込み
google api利用
!
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.11.1/jquery.min.js"></script>

5. jQuery実装
jQuery実装１
モーダルウィンドウ
http://codepen.io/sekiyaeiji/
pen/qbush?editors=011

5. jQuery実装
【WORKSHOP2】
カスタマイズしてみましょう
モーダルウィンドウの表示・非表示に
別の動きを与えてみましょう

5. jQuery実装
jQuery実装２
スクロールハンドリング
pen/FhvGi?editors=011

5. jQuery実装
jQuery実装３
パララックスの基礎
pen/wHxbq?editors=001

マークアップ講座 04 jQuery - JavaScript

マークアップ講座 04 jQuery - JavaScript

More Related Content

What's hot

Similar to マークアップ講座 04 jQuery - JavaScript

More from eiji sekiya

マークアップ講座 04 jQuery - JavaScript