これから始める人のための
入門

大竹孔明
大竹 孔明 こうめ
コーディングを中心にWeb
制作をしています

Twitter : @Bamboo_C
Facebook : komei.otake

photo by susipaku at PAKUTASO
GCSS
http://gcss.info
共著
http://amzn.to/179krhH
ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/
jQueryとは
JavaScript
JavaScript
27
mouse over
mouse over
pop up
pop up
jQueryの特徴
・クロスブラウザ
・write less, do more
・豊富なプラグイン
・クロスブラウザ
・write less, do more
・豊富なプラグイン
PCブラウザ

スマートフォン
JavaScript

document.getElementById("op
acityTest").style.opacity = 0.5;
JavaScript
(IE対応)

document.getElementById("opacit
yTest").filter = "alpha(opacity=50)";
jQuery

$("#opacityTest").css("opacity",0.5);
・クロスブラウザ
・write less, do more
・豊富なプラグイン
・クロスブラウザ
・write less, do more
・豊富なプラグイン
jQuery プラグイン
http://plugins.jquery.com/
jQuery.heightLine.js
http://blog.webcreativepark.net/2013/10/21-112000.html
ASCII.jp連載
http://ascii.jp/elem/000/000/818/818527/
jQueryの
導入と使用方法
jQuery
http://jquery.com
クリック!
1系

IE6∼8をサポート

2系

IE6∼8は非サポート
高速、軽量
HTML
// 中略
<script src="jquery-1.10.2.min.js"></script>
</body>
// 中略
<!--[if lt IE 9]>
<script src="jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.3.min.js"></script>
<!--[endif]-->
</body>
</html>
<script src="//ajax.googleapis.com/ajax/
libs/jquery/1.10.2/jquery.min.js"></script>
jQueryの文法
// 中略
<script src="jquery-1.10.2.min.js"></script>
<script>
jQuery(function ($) {
// ここに処理を書く
});
</script>
</body>
なにを

どうするか

$("#box").css("border", "1px solid red");
jQueryメソッドとは
jQueryオブジェクト
が持っている関数
jQueryオブジェクトとは
jQuery命令を
行えるオブジェクト
#box(文字列)
+
$()メソッド
¦¦
$( #box )
jQueryオブジェクト!
$(セレクタ).メソッド(パラメータ);
処理の命令
jQueryオブジェクト

処理の引数

$(セレクタ).メソッド(パラメータ);
忘れずに !

$(セレクタ).メソッド(パラメータ);
メソッド一覧
http://api.jquery.com/
メソッドチェーン
$(セレクタ).メソッド().メソッド
().メソッド()・・・
セレクタについて
$("#box");
トラバース
$("#box").find("a");
$(".box").not("a");
HTMLの操作
mouse over
HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタン
</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/ffffff.png" /></div>
// 中略
CSS
#sampleImg {
visibility: hidden;
}
#sampleImg.hidden {
visibility: visible;
}
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleClass(“hidden");
return false;
});
アニメーション
HTML
// 中略
<div><a href="#" id=“sampleBtn”>サンプルボタ
ン</a></div>
<div><img alt="" src="http://dummyimage.com/
600x400/0eafff/ffffff.png" /></div>
// 中略
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle();
return false;
});
jQuery
$("#sampleBtn").click(function(){
$(#sampleImg).toggleToggle(500);
return false;
});
ハンズオン

jQueryでUIを作ってみよう!
制作前の予備知識
変数
変数

var accordionBtn = $(“.accordionBtn”);
変数
宣言
var accordionBtn = $(“.accordionBtn”);
変数
変数名
var accordionBtn = $(“.accordionBtn”);
変数
値
var accordionBtn = $(“.accordionBtn”);
if文
if文
if( 条件式 ) {
// trueだったらこの中が実行される
} else {
// falseだったらこの中が実行される
}
比較演算子
比較演算子
> (右より左が大きい)
< (左より右が大きい)
=== (厳密に等しい)
!== (厳密には等しくない)
資料ダウンロード

URL:
・アコーディオン
・タブパネル
・アコーディオン
・タブパネル
・アコーディオン
・タブパネル

これから始める人のためのjQuery入門 先生:大竹 孔明