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


#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

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処理の反復|
　

###【WORKSHOP1】 書いてみましょう１

```html
<p></p>
```

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


#####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
　

###【WORKSHOP3】 動かしてみましょう

http://codepen.io/sekiyaeiji/pen/DxLCK

↑ こちらを［Fork］

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

###モダン実装 ： jQuery + CSS Animation

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

####slide

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

####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行コメント

/*
複数行
コメント
*/

```

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


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

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