Más contenido relacionado
La actualidad más candente (20)
Similar a マークアップ講座 04 jQuery - JavaScript (20)
マークアップ講座 04 jQuery - JavaScript
- 3. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 4. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 5. 1. jQueryとは
jQuery
『jQuery』
http://jquery.com/
• JavaScriptライブラリ
• 2006年リリース
• John Resig (ジョン・レシグ)
『John Resig - JavaScript Programmer』
http://ejohn.org/
- 7. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 8. 2. jQueryの特長
• クロスブラウザ実装に適している
• ドットシンタックスのシンプル、軽量、CSSライクな
構文
• CSSとの高い親和性
• Ajax、コールバック取得など複雑な実装も容易
• プラグインが豊富、プラグイン開発が手軽に行える
• 圧倒的なシェア
利用Webサイト 60.1% JSライブラリ中 94.0%
『W3Techs』 http://w3techs.com/
- 10. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 11. 3. jQueryの基本構文
基本構文
!
jQuery(‘.sample’).html('text'); (以下”$”)
$('.sample').html('text');
!
$(selector).method(value);
!
$(セレクタ).メソッド(値);
- 12. 3. jQueryの基本構文
セレクタ
!
$('[element]').html('text');
!
$('#[id]').html('text');
!
$('.[class]').html('text');
!
$('[[attribute]]').html('text');
!
$('[[attribute=value]]').html('text');
- 13. 3. jQueryの基本構文
Event Handling (delegate)
!
$(document).on('click', '.sample', function () {
sampleFunction();
});
$(document).on('click', '.sample', sampleFunction);
!
$(document).on('[イベント]', '[セレクタ]', [関
数]);
- 14. 3. jQueryの基本構文
DOM ready
!
$(document).ready(function() {
sampleFunction();
});
$(document).ready(sampleFunction);
■ 省略型
$(function() {
sampleFunction();
});
$(sampleFunction);
• DeveloperToolにおける青い線のタイミング
- 15. 3. jQueryの基本構文
window load
!
$(window).load(function() {
sampleFunction();
});
!
$(window).load(sampleFunction);
• DeveloperToolにおける赤い線のタイミング
- 17. 3. jQueryの基本構文
本講座で取り扱うメソッド
取得系
メソッド内容
$().text(); テキストの取得と設定
$().html(); HTMLコードの取得と設定
$().on(); イベント(delegate)の設定
$().off(); イベント(delegate)の解除
$().height(); 高さの取得と設定
$().scrollTop(); スクロール量の取得
$().css(); CSS要素の取得と設定
- 18. 3. jQueryの基本構文
method
on、height、scrollTop
http://codepen.io/sekiyaeiji/pen/nIqrJ?editors=001
css
http://codepen.io/sekiyaeiji/pen/Ckgse?editors=101
- 19. 3. jQueryの基本構文
本講座で取り扱うメソッド
処理系
メソッド内容
$().fadeIn(); フェード処理により表示状態に遷移
$().fadeOut(); フェード処理により非表示状態に遷移
$().fadeToggle(); fadeIn処理とfadeOut処理の反復
$().slideDown(); 縦スライドにより表示状態に遷移
$().slideUp(); 縦スライドにより非表示状態に遷移
$().slideToggle(); slideDown処理とslideUp処理の反復
$().addClass(); class値を付与
$().removeClass(); class値を削除
$().toggleClass(); addClass処理とremoveClass処理の反復
- 20. 3. jQueryの基本構文
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
- 21. 3. jQueryの基本構文
【WORKSHOP1】
動かしてみましょう
fadeIn、fadeOut、fadeToggle
slideDown、slideUp、slideToggle
addClass、removeClass、toggleClass
!
のどれかを利用した、ブロックの表示・非表示の
処理を書いてみましょう(10分)
- 22. 3. jQueryの基本構文
モダン実装
jQuery + CSS Animation
jQuery(JS)アニメーションより処理が軽い
slide
http://codepen.io/sekiyaeiji/pen/eFkoG?editors=011
fade
http://codepen.io/sekiyaeiji/pen/tuGny?editors=011
- 23. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 24. 4. JavaScriptの基本構文
即時関数
!
(function () {
~
})();
• JavaScriptファイル全体をこれでラッピングする
定義
!
var sampleVariable = 'サンプルテキスト';
- 29. 1. jQueryとは
2. jQueryの特長
3. jQueryの基本構文
4. JavaScriptの基本構文
5. jQuery実装
- 30. 5. jQuery実装
jQuery読み込み
google api利用
!
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.11.1/jquery.min.js"></script>