jQuery - JavaScript
jQueryとは
『jQuery』
http://jquery.com/
- JavaScriptライブラリ
- 2006年リリース
- John Resig （ジョン・レシグ）
『John Resig - JavaScript Programmer』
http://ejohn.org/
現在の最新バージョン（2014年9月現在）
- IE互換版（PC） ： 1.11.1
- IE非対応版（Mobile） ： 2.1.1
※ JavaScriptとは
- EcmaのECMAScript + W3CのDOM ＝ JavaScript
- DOM操作、通信、ストレージ制御、グラフィック制御、メディア操作
jQueryの特長
-
クロスブラウザ実装に適している
-
ドットシンタックスのシンプル、軽量、CSSライクな構文
-
CSSとの高い親和性
-
Ajax、コールバック取得など複雑な実装も容易
-
プラグインが豊富、プラグイン開発が手軽に行える
-
圧倒的なシェア ： 利用Webサイト60.1% JSライブラリ中94.0%
『W3Techs - extensive and reliable web technology surveys』
http://w3techs.com/
※ jQuery ≠ jQuery Mobile
- jQueryとjQuery Mobileは別物
- jQuery Mobileの利用メリットはほとんどない（私見）
jQueryの基本構文
基本構文
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 ready
$(document).ready(function() {
sampleFunction();
});
$(document).ready(sampleFunction);
■ 省略型
$(function() {
sampleFunction();
});
$(sampleFunction);
window load
$(window).load(function() {
sampleFunction();
});
$(window).load(sampleFunction);
method
『jQuery API Documentation』
http://api.jquery.com/
本講座で取り扱うメソッド
取得系
| メソッド | 内容 |
|---|---|
| $().text(); | テキストの取得と設定 |
| $().html(); | HTMLコードの取得と設定 |
| $().on(); | イベント（delegate）の設定 |
| $().off(); | イベント（delegate）の解除 |
| $().height(); | 高さの取得と設定 |
| $().scrollTop(); | スクロール量の取得 |
| $().css(); | CSS要素の取得と設定 |
on、height、scrollTop
css
処理系
| メソッド | 内容 |
|---|---|
| $().fadeIn(); | フェード処理により表示状態に遷移 |
| $().fadeOut(); | フェード処理により非表示状態に遷移 |
| $().fadeToggle(); | fadeIn処理とfadeOut処理の反復 |
| $().slideDown(); | 縦スライドにより表示状態に遷移 |
| $().slideUp(); | 縦スライドにより非表示状態に遷移 |
| $().slideToggle(); | slideDown処理とslideUp処理の反復 |
| $().addClass(); | class値を付与 |
| $().removeClass(); | class値を削除 |
| $().toggleClass(); | addClass処理とremoveClass処理の反復 |
【WORKSHOP1】 書いてみましょう１
<p></p>
$('p').html('テキスト').css({'color': '#f00'});
fadeIn、fadeOut、fadeToggle
slideDown、slideUp、slideToggle
addClass、removeClass、toggleClass
http://codepen.io/sekiyaeiji/pen/igeqd?editors=011
【WORKSHOP3】 動かしてみましょう
↑ こちらを［Fork］
slideToggleを利用した、ブロックの表示・非表示の処理を書いてみましょう
うまく動いたら、fadeToggleも試してみましょう
モダン実装 ： jQuery + CSS Animation
jQuery（JS）アニメーションより処理が軽い
slide
fade
http://codepen.io/sekiyaeiji/pen/tuGny?editors=011
JavaScriptの基本構文
即時関数
(function () {
［JS Code］
})();
定義
var sampleVariable = 'サンプルテキスト';
関数
function sampleFunction (［引数］) {
［処理］
}
条件文
if (［条件式］) {
［処理］
}
else if (［条件式］) {
［処理］
}
else {
［処理］
}
デバッグログ
console.log(［変数］);
console.log('［ログコメント］');
コメントアウト
// 1行コメント
/*
複数行
コメント
*/
【WORKSHOP2】 書いてみましょう２
$(window).load(function() {
console.log('window load');
});
$(document).ready(function() {
console.log('document ready');
});
jQuery実装
jQuery読み込み
google api利用
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
jQuery実装 １ モーダルウィンドウ
http://codepen.io/sekiyaeiji/pen/qbush?editors=011
jQuery実装 ２ スクロールハンドリング
http://codepen.io/sekiyaeiji/pen/FhvGi?editors=011
jQuery実装 ３ パララックスの基礎