1.導入とダウンロードと利用方法
<Jqueryのダウンロード>
http://jquery.com/
<script type="text/javascript" src="./jquery-1.4.min.js"></script>
<Google AJAX Libraries API>
サーバーにアップしなくてもすぐ使える
https://developers.google.com/speed/libraries/?hl=ja
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"
></script>
2.jQueryのコードを記述する場所
$(function(){
ここにjQueryの処理を記述
});
※$(document).ready()の省略形
3.セレクター
「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」
$("セレクター")
※CSSで記述できるものが使える
4.jQueryでHTML/CSSを操作する
HTML/CSSを操作するためのライブラリー
$(セレクター),jQueryの命令
html()という命令を使うと、セレクターで指定した要素の内側を変更できます
5.処理のタイミングを決める「イベント」
$("セレクター").イベント(function(){
ここにイベント発生時の処理を記述
});
6.jQueryでアニメーション効果を付ける
ノーマルアニメーション
$("セレクター").show(スピード);
$("セレクター").hide(スピード);
スライドアニメーション
$("セレクター").sideDown(スピード);
$("セレクター").sideUp(スピード);
フェードアニメーション
$("セレクター").fadeIn(スピード);
$("セレクター").fadeOut(スピード);
7.jQueryを使って15分でUIを作ろう!!
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("slow");
$("+dd",this).slideDown("slow");
}
});
});
