jQueryを自分で書いてみよう！@第5回福岡マークアップ勉強会

ｊQueryを自分で書いて
アニメーションさせよう
2013年9月14日　マークアップ勉強会

自己紹介
越水大輔　コシミズダイスケ
Twitter @ｋｓｍｚｄｓｋ
フリーランスWEBデザイナー

ブログやってます！
キリンブログ　http://kirinblog.com

ブログやってます！
キリンブログ　http://kirinblog.com
FacebookページでWEB制作に関する情報配信し
ています。

今回の対象者
● HTML、CSSは書ける。

今回の対象者
● 動くWEBサイトを作りたい！

今回の対象者
● jQueryはプラグインを入れるだけ。。。

今回の対象者
● 自分でjQueryを書くことに苦手意識がある。

今回の対象者
● 自分でjQueryを書くことに苦手意識がある。
ｊQuery初めの一歩的な内容になっております！

ｊQueryとは？
● JavaScriptライブラリ

ｊQueryとは？
● HTML、CSSがわかれば入りやすい

ｊQueryとは？
● 情報量が豊富

ｊQueryとは？
● 情報量が豊富
● 軽量

ブラウザごとの挙動の違いを吸収してくれる

$(‘#div1’).click(function(){
alert(‘クリックされました’);
});

jQueryを自分で書いてみよう！@第5回福岡マークアップ勉強会

はじめにすること
<script type="text/javascript" src="js/jquery.js"></script>

http://jquery.com/ からダウンロード

または直リンクを書く。

または直リンクを書く。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.
8.2/jquery.min.js"></script>

基本形：　Aを選択してBを行う

divにcssでcolor:redの設定をする。

$("div")

$("div").css();

$("div").css("color","red");

基本形2：　AをBをしたとき、
　　　　　　　Cを選択してDを行う
#btnをクリックしたとき、divにcssでcolor:redの設定をする。

$("#btn")

$("#btn").click();

$("#btn").click(処理内容);

+
function(){
}

+
function(){
}
$("#btn").click(
function(){
}
);

要素を選んで、処理を行う。

要素を選ぶ→セレクタ

$("#hoge").css("color","red"); //id

$(".huga").css("color","red"); //class

$("a img").css("color","red"); //要素

$("a img").css("color","red"); //要素
$("div, .huga").css("color","red"); //複数

処理を行う→メソッド

$("#hoge").css("color","red");
$("#hoge").addClass("mogu");
$("#hoge").fadeOut();

$("#hoge").css("color","red").addClass("mogu").fadeOut();

同じセレクタに対するメソッドは数珠つなぎにできる。

同じセレクタに対するメソッドは数珠つなぎにできる。
メソッドチェイン

セレクタやメソッドはまだまだたくさん
jQuery日本語リファレンス
http://semooh.jp/jquery/

実際に書いて動かしてみる

$(document).ready(function(){
});
</script>

$(function(){
});
</script>

Demo1: テーブルをスタイリングする
奇数番目のtrにoddというクラスをつける
$(function(){
});
Code from 少しのコードで実装可能な20のjQuery小技集 | Webクリエイターボックス
http://www.webcreatorbox.com/tech/jquery-tips20/

$(function(){
$("tr:odd")
});

$(function(){
$("tr:odd").addClass();
});

$(function(){
$("tr:odd").addClass("odd");
});

Demo2: リンクをクリックしたらdivを消す
.deleteをクリックしたら.boxを消す
$(".box .delete")

$(".box .delete").click(function(){
//処理を書く
});

$(".box")
});

$(".box").animate({ opacity: "hide" }, "slow");
});

Demo3: ボタンを押してdivを開閉する
.openをクリックしたら.#slideBoxを開閉する
$(".open")

$(".open").click(function(){
//処理を書く
});

$("#slideBox")
});

$("#slideBox").slideToggle("slow");
});

Demo4: 四角形をアニメーションさせる
#boxをクリックしたら#boxがアニメーションする
$("#box")
Code from jQueryのanimateを使ったアニメーション｜WEB Drawer
http://webdrawer.net/javascript/jqueryanimate.html

$("#box").click();

$("#box").click( function(){
//処理を書く
});

$(this)
});

$(this).animate({width: '400px'},{duration: 1500})
});

.animate({height: '50px'},{duration: 500})
});

.animate({height: '50px'},{duration: 500})
.animate({width: '50px'},{duration: 500})
});

Demo5: パララックス効果をつくる
windowをスクロールしたら各#boxのcssを調整する
$(window)
Code from ドットインストール　パララックスサイトを作ろう
http://dotinstall.com/lessons/parallax_html

$(window).scroll(function(){
//処理を書く
});

var dy = $(this).scrollTop();
});

$('#box1')
});

$('#box1').css('top', 10 + dy / 2);
});

$('#box1').css('top', 10 + dy / 2);
$('#box2')
});

$('#box1').css('top', 10 + dy / 2);
$('#box2').css('top', 10 + dy / 5);
});

$('#box1').css('top', 10 + dy / 2);
$('#box2').css('top', 10 + dy / 5);
$('#box3').css('top', 10 + dy / 7);
});

Demo6: パララックス効果をつくる2
var pos1 = $('#box1').offset();

$(window)

$(window).scroll(function() {
//処理を書く
});

});

$('#box1')
});

$('#box1').css('top', pos1.top + dy / 2);
});

$('#box1').css('left', pos1.left + dy / 8);
});

$('#box1').css('width', 40 + dy * 0.2);
});

$('#box1').css('width', 40 + dy * 0.2);
…..
});

Demo Code from
少しのコードで実装可能な20のjQuery小技集 | Webクリエイ
ターボックス
jQueryのanimateを使ったアニメーション｜WEB Drawer
ドットインストール　パララックスサイトを作ろう

ありがとうございました。

jQueryを自分で書いてみよう！@第5回福岡マークアップ勉強会

More Related Content

What's hot (7)

Similar to jQueryを自分で書いてみよう！@第5回福岡マークアップ勉強会 (20)

jQueryを自分で書いてみよう！@第5回福岡マークアップ勉強会