マークアップ講座

jQuery - JavaScript

1. jQueryとは

2. jQueryの特長

3. jQueryの基本構文

4. JavaScriptの基本構文

5. jQuery実装

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非対応版（非PC） ： 2.1.1

【TOPIC】JavaScriptとは2. jQueryの特長

• Ecma ECMAScript + W3C

DOM ＝ JavaScript

• DOM操作、通信、ストレージ制御、

グラフィック制御、メディア操作

1. jQueryとは

2. jQueryの特長

3. jQueryの基本構文

4. JavaScriptの基本構文

5. jQuery実装

2. jQueryの特長

• クロスブラウザ実装に適している • ドットシンタックスのシンプル、軽量、CSSライクな

構文 • CSSとの高い親和性 • Ajax、コールバック取得など複雑な実装も容易 • プラグインが豊富、プラグイン開発が手軽に行える • 圧倒的なシェア

利用Webサイト 60.1%　JSライブラリ中 94.0%『W3Techs』 http://w3techs.com/

【TOPIC】jQuery ≠ jQuery Mobile2. jQueryの特長

• jQueryとjQuery Mobileは別物

• 現状ではjQuery Mobileの利用メリッ

トはほとんどない（私見）

1. jQueryとは

2. jQueryの特長

3. jQueryの基本構文

4. JavaScriptの基本構文

5. jQuery実装

3. jQueryの基本構文

基本構文!

jQuery(‘.sample’).html('text'); （以下”$”） $('.sample').html('text'); !

$(selector).method(value); !

$(セレクタ).メソッド(値);

3. jQueryの基本構文

基本構文!

jQuery(セレクタ).メソッド(値); $(セレクタ).メソッド(値);

• “jQuery”、“$” ＝ 「jQueryを使いますよ」 宣言

• “セレクタ” = 場所、“メソッド” = 方法、“値” = 内容

• 「“値”を“セレクタ”の“メソッド”に設定する」

3. jQueryの基本構文

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

http://codepen.io/sekiyaeiji/pen/AdLgo?editors=101

3. jQueryの基本構文

Event Handling (delegate)!

$(document).on('click', '.sample', function () { sampleFunction(); }); $(document).on('click', '.sample', sampleFunction); !

$(document).on('［イベント］', '［セレクタ］', ［関数］);

3. jQueryの基本構文

DOM ready!$(document).ready(function() { sampleFunction(); }); $(document).ready(sampleFunction); ■ 省略型 $(function() { sampleFunction(); }); $(sampleFunction);

• DeveloperToolにおける青い線のタイミング

3. jQueryの基本構文

window load!

$(window).load(function() { sampleFunction(); }); !

$(window).load(sampleFunction);

• DeveloperToolにおける赤い線のタイミング

3. jQueryの基本構文

method

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

3. jQueryの基本構文

本講座で取り扱うメソッド取得系

メソッド 内容

$().text(); テキストの取得と設定

$().html(); HTMLコードの取得と設定

$().on(); イベント（delegate）の設定

$().off(); イベント（delegate）の解除

$().height(); 高さの取得と設定

$().scrollTop(); スクロール量の取得

$().css(); CSS要素の取得と設定

3. jQueryの基本構文

method

http://codepen.io/sekiyaeiji/pen/nIqrJ?editors=001

on、height、scrollTop

http://codepen.io/sekiyaeiji/pen/Ckgse?editors=101

css

3. jQueryの基本構文

本講座で取り扱うメソッド処理系

メソッド 内容

$().fadeIn(); フェード処理により表示状態に遷移

$().fadeOut(); フェード処理により非表示状態に遷移

$().fadeToggle(); fadeIn処理とfadeOut処理の反復

$().slideDown(); 縦スライドにより表示状態に遷移

$().slideUp(); 縦スライドにより非表示状態に遷移

$().slideToggle(); slideDown処理とslideUp処理の反復

$().addClass(); class値を付与

$().removeClass(); class値を削除

$().toggleClass(); addClass処理とremoveClass処理の反復

3. jQueryの基本構文

【WORKSHOP1】

書いてみましょう１

!<p></p>

!$('p').html('テキスト').css({'color': '#f00'});

HTML

JavaScript

3. jQueryの基本構文

method

http://codepen.io/sekiyaeiji/pen/LxhsJ?editors=101

fadeIn、fadeOut、fadeToggle

http://codepen.io/sekiyaeiji/pen/AJfiu?editors=101

slideDown、slideUp、slideToggle

http://codepen.io/sekiyaeiji/pen/igeqd?editors=011

addClass、removeClass、toggleClass

3. jQueryの基本構文

【WORKSHOP２】

動かしてみましょう

http://codepen.io/sekiyaeiji/pen/DxLCK ↑ こちらを［Fork］

!

slideToggleを利用した、ブロックの表示・非表示の処理を書いてみましょう うまく動いたら、fadeToggleも試してみましょう（10分）

【解答例】 http://codepen.io/sekiyaeiji/pen/DxLCK

3. jQueryの基本構文

モダン実装jQuery + CSS Animation

http://codepen.io/sekiyaeiji/pen/eFkoG?editors=011

slide

http://codepen.io/sekiyaeiji/pen/tuGny?editors=011

fade

jQuery（JS）アニメーションより処理が軽い

1. jQueryとは

2. jQueryの特長

3. jQueryの基本構文

4. JavaScriptの基本構文

5. jQuery実装

4. JavaScriptの基本構文

即時関数!

(function () { ～ })();

• JavaScriptファイル全体をこれでラッピングする

定義!

var sampleVariable = 'サンプルテキスト';

4. JavaScriptの基本構文

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

4. JavaScriptの基本構文

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

4. JavaScriptの基本構文

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

4. JavaScriptの基本構文

コメントアウト!// 1行コメント !/* 複数行 コメント */

http://codepen.io/sekiyaeiji/pen/Gwtvd?editors=001

3. jQueryの基本構文

【WORKSHOP３】

書いてみましょう２

!$(window).load(function() { console.log('window load'); }); !$(document).ready(function() { console.log('document ready'); });

JavaScript

1. jQueryとは

2. jQueryの特長

3. jQueryの基本構文

4. JavaScriptの基本構文

5. jQuery実装

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

【WORKSHOP４】

カスタマイズしてみましょう

http://codepen.io/sekiyaeiji/pen/qbush?editors=011 ↑ こちらを［Fork］ モーダルウィンドウのCLOSE動作をフェードアウトに変更しましょう

5. jQuery実装

5. jQuery実装

jQuery実装 ２

スクロールハンドリング

http://codepen.io/sekiyaeiji/pen/FhvGi?editors=011

5. jQuery実装

jQuery実装 ３

パララックスの基礎

http://codepen.io/sekiyaeiji/pen/wHxbq?editors=001