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/

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

取得系

on、height、scrollTop

css

処理系

【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実装 ３ パララックスの基礎