今度こそ始めるjQuery超入門

西畑一馬
超入門
今度こそ始める

フロントエンドエンジニア
西畑一馬

西畑一馬
http://blog.webcreativepark.net

西畑一馬

西畑一馬
5/30より電子書籍版が販売開始
iBookstore／Amazon Kindle／Google Playブックス
楽天kobo／BOOK☆WALKER／ニコニコ静画ほか

jQueryとは?
jQueryの基本
セレクターの基本
HTMLやCSSの操作
イベントの設定
アニメーション
jQueryの利用方法
目次

Google Trends
http://www.google.com/trends/explore?hl=ja#q=jQuery%20,JavaScript

∼jQuery 1.8.3 後方互換を重視
jQuery 1.9.x 非推奨機能を削除

jQuery 2.0 IEのサポートを9からに変更
jQuery 1.10 IEのサポートが6以上
jQuery Roadmap

jQuery-migrate
http://javascript.webcreativepark.net/library/jquery-migrate

jQueryで何ができるのか?
HTMLとCSSの操作

ユーザーがimg要素の上に
マウスカーソルを乗せた際に
img要素のsrc属性を変更

ユーザーがサムネイルの
a要素をクリックすると
メインのimg要素のsrc属性を
a要素のhref属性に変更

ユーザーがサムネイルの
a要素をクリックすると
モーダル部分の
cssをdisplay:blockに変更して
ギャラリーのsrc属性を
a要素のhref属性に変更

フローティングウィンドウ

ユーザーがマウスを押し下げて
ドラッグすると
フローティングウィンドウ部分の
topプロパティとleftプロパティが
マウスに付いてくるように変更

ユーザーが画面をタッチし
スワイプすると
ギャラリー部分の
leftプロパティを
指に付いてくるように変更

ほとんどのUIは
JavaScriptでHTMLとCSSを
操作することで作成されている

jQueryを学習するにあたって
・jQueryの基本的な書き方を学ぶ
・様々なUIの作成方法を学ぶ
・JavaScriptの知識もちょっとは必要

jQueryの利用方法
<script src="jquery-2.0.0.min.js"></script>
<script>
$(function(){
//jQueryの命令を記述していく
});
</script>
</head>

CDNの活用
Google Hosted Libraries
https://developers.google.com/speed/libraries/
Microsoft Ajax CDN
http://www.asp.net/ajaxlibrary/cdn.ashx

セレクターAPI
ある要素の
HTMLとCSSの操作

CSSセレクター
$("h1")
$("#content")
$(".section")
$("#main .link")
$("h1,h2,h3")

CSS2.1セレクター
$("ul > li")
$("dt + dd")
$("li:ﬁrst-child")

CSS3セレクター
$("a:not(.external)")
$("li:last-child")
$("li:nth-child(2)")
$("li:nth-of-type(2)") jQuery 1.9∼
:hover、:link、:active、:visited以外の
CSSセレクターをサポート

HTMLの操作
$("p").html("<a href='#'>リンク</a>");
....
<a href='#'>リンク</a>

HTMLの操作
$("p").append("...");
....
.......

HTMLの操作
$("p").prepend("...");
....
.......

HTMLの操作
$("p").before("...");
....
.......

HTMLの操作
$("p").after("...");
....
.......

属性の変更
$("a").attr("href","http://to-r.net");
<a href="#">....</a>
<a href="http://to-r.net">....</a>

class属性の追加
$("p").addClass("bar");
....
....

class属性の削除
$("p").removeClass("bar");
....
....

CSSの変更
$("p").css("color","red");
....
....

CSSの変更
$("p").css("font-size","12px");
$("p").css("fontSize","12px");
$("p").css("font-size",12);

CSSの変更
$("p").css({
"color":"red",
"background-color":"blue",
"font-size":"12px"
});

イベントの設定
ある要素の
HTMLとCSSの操作
いつ？

clickイベント
$("p").click(function(){
//pがクリックされたタイミング
});

mouseoverイベント
$("p").mouseover(function(){
//pにマウスがのったタイミング
});

mouseoutイベント
$("p").mouseout(function(){
//pからマウスがはなれたタイミング
});

fadeIn()/fadeOut()
$("div").fadeIn(600);
$("div").fadeOut(600);
デモ

slideDown()/slideUp()
$("div").slideDown(400);
$("div").slideUp(400);
デモ

アコーディオン
パネル

アコーディオンパネル

ベースのHTMLを作成
<body>
! <dl>
! ! <dt>Step.1</dt>
! ! <dd>Lorem ipsum
! ! (中略)
! ! venenatis.</dd>
! ! <dt>Step.2</dt>
! ! <dd>Integer rhoncus
! ! (中略)
! ! ultricies accumsan. </dd>
! ! <dt>Step.3</dt>
! ! <dd>Integer pretium
! ! (中略)
! ! imperdiet. </dd>
! </dl>
</body>

CSSでベースを整形
body{
! background:#252422;
}
dl{
! width:800px;
! margin:50px auto;
}
dt{
! line-height:35px;
! font-size:large;
! text-indent:3em;
! font-weight:bold;
! color:white;
! height:35px;
! background:url("images/background.jpg")
}
dd{
! margin:0;
! height:300px;
! background:#D4D0C8;
}
dd p{
! margin:0;
! text-indent:1em;
! padding:20px;
}
!

jQueryで機能を追加
ラベル部分がクリックされると、
対応するアコーディオンが開き、
開いているアコーディオンは閉じる。

jQueryで機能を追加
dt要素がクリックされた際に、
対応するdd要素がスライドアニメーション
で開き、開いているdd要素は
スライドアニメーションで閉じる。

完成形のスクリプト
$(function(){
! $("dd:not(:first-of-type)").css("display","none");
! $("dt").click(function(){
! ! if($("+dd",this).css("display")=="none"){
! ! ! $("dd").slideUp(400);
! ! ! $("+dd",this).slideDown(400);
! ! }
! });
});
たった9行!!

まずは、お約束
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
残り7行！

初期表示を作成
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
１番目以外のdd要素の
displayプロパティをnoneに変更
残り6行！

クリックイベントを設定
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
dt要素がクリックされた際の
処理を設定
残り4行！

if文
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
if(...)の条件が正しい場合のみ
{...}の処理を実行

条件式
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
==の左右の値が正しいかチェック

セレクタの有効範囲を指定
$("+dd",this).css("display")
クリックされた要素(this)の
次に登場するdd要素

ＣＳＳプロパティの値を取得
$("+dd",this).css("display")
$(セレクター).css("プロパティ名")で
値が取得できる

条件文
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
}); クリックされたdt要素の
次に登場するdd要素の
displayプロパティが「none」の場合は
{...}内の処理を実行する
残り2行！

スライドアニメーション
$(function(){
! ! ! $("dd").slideUp(400);
! ! }
! });
});
スライドアニメーションで
アコーディオンパネルの開閉を行う
終了！

まとめ
これからのWeb制作ではjQueryの知識は必須
jQueryを利用すれば
複雑なJavaScriptが簡単に記述できる
ほとんどのUIはHTMLとCSSを操作して作成可能
まずは、機能を日本語で表現することから
始めてください

今度こそ始めるjQuery超入門

More Related Content

What's hot

Similar to 今度こそ始めるjQuery超入門

今度こそ始めるjQuery超入門