ゆるふわ愛され基礎jQuery

jQueryってなに…///

• JavaScriptの神フレームワークだよ…///
• クロスブラウザ対応？いいよ…///
• 超短コードであんなことやそんなことまで…///
• リファレンスが豊富…///
• 豊富なプラグインであっという間に…///

jQueryをダウンロードする

サイトからダウンロードすればいいよ
http://jquery.com/

ソースを保存する

ソースが表示されたらテキトーな名前で保存する
一応おすすめはjquery.jsです

なんかやってみるよ･･･///

まーそんなわけで

テキストの追加も簡単にできるよ

$('#ac-nanika1').click(function() {
	$('#nanika1').append(
		'<p>押さないで･･･///</p>'
	);
});

その他にも！

みたいなアニメーションも思いのまま

ソースが長くて見切れた･･･

$('#ac-nanika2').click(function() {
	$('#nanika2')
		.css({
			width: 300,
			height: 300,
			background: '#f00',
			position: 'relative'
		})
		.slideUp()
		.delay(100)
		.slideDown()
		.delay(100)
		.animate({
			top: 300,
			width: 600
		},{
			duration: 500
		})
		.delay(100)
		.animate({
			top: 0,
			left: 300,
			width: 300,
			height: 600
		},{
			duration: 500,
			complete: function() {
				
			}
		})
		.delay(100)
		.animate({
			left: 0,
			height: 300
		},{
			duration: 500
		})
});

ちょっと関心したところで

勉強していきましょー

jQueryを使うときの基本的な流れ

1. 要素をセレクタで取得
2. 取得した要素に対してメソッドで何かする
3. やりたいだけやる
4. とにかくやる

またはプラグインを使うのもありますね

順番にみていきましょう

これの中に書きますおぼえてね

jQuery(function($) {
 // hogehoge
});

簡単なさんぷる

jQuery(function($) {
	$('#alert').click(function() {
		alert('dotcoder');
	});
});

たとえば

<input type="button" id="button" value="ぼったーん！" />

このボタンを選択するには

$('#button')

こうするだけ

CSSセレクタがつかえるっすよ

超簡単す

$('div') // div全部
$('div.hoge') // div.hoge全部
$('div#hoge') // div#hoge
$('div > a') // div > a
$('div > a:first-child') // div > a:first-child
$('input[type="text"]') // inputのtypeがtextのやつ

とかCSSセレクタで選択できるすよ
色々使えるからリファレンス見てね

jQuery日本語リファレンス

簡単な例

$(hoge).slideUp();
//     ↑.slideUp() のとこ

要素に対して「.(ドット)」で
実行したいメソッドを繋いでいくだけ

例えば一回スライドアップしてスライドダウンさせたいときは

$(hoge)
	.slideUp()
	.delay(100)
	.slideDown();

こんな感じ

要素を操作するようなメソッドの例

.show() // display: none の要素を表示する
.hide() // .show()の逆
.slideDown() // スライドして表示する
.slideUp() // スライドして非表示にする
.fadeIn() // フェードインして表示する
.fadeOut() // フェードアウトして非表示にする
.animate() // アニメーション、色々指定できるよ
.append(hoge) // hogeを追加する
.after(hoge) // 後ろにhogeを追加する
.before(hoge) // 前にhogeを追加する
.css({ css }) // CSSを指定する、指定方法はCSSとほぼ同じ

とか、簡単ですね

全部やってみましょか

要素にイベントを追加するメソッドの例

.click(hoge) // クリックイベントを追加
.dblclick(hoge) // ダブルクリックイベントを追加
.hover(hoge,fuga) // マウスオーバーアウトイベントを追加

とか、こっちも簡単ですね

色々使えるからリファレンス見てね

jQuery日本語リファレンス

さーんぷる

簡単すね！

ぷるぎん

• jQuery本体にないメソッド
• jQueryのあとに読み込むと使える
• 便利なぷるぎんがたくさん！
• しかも無料で！

ふわっと表示させるプラグインをつかってみよー

1. http://5509.me/log/whatinoutからダウンロード

2. ソースを読み込む

<script type="text/javascript" src="js/whatinout.js"></script>

3. 準備かんりょー！

4. つかってみる！

ふわっとさせる