参考：『やさしくはじめるWebデザイナーのためのjQueryの学校』高橋のり

jQueryとは

Javascriptのライブラリ
ファイルのダウンロード / CDN

jQueryの書き方

header内あるいはbodyの閉じタグ前に書く

<script src="jquery-1.8.2.js"></script>

$("p.attention"). css("color","red");
　　　セレクタ　.　メソッド　パラメータ

準備ができたら実行する

$(document).ready(function(); { $("p.attention"). css("color","red"); });
HTMLファイルが最後まで読み込まれてから実行する（画像の読み込み完了は待たない）

上記は以下に省略できる
$(function() { });

セレクタの種類

要素セレクタ : $("p")
idセレクタ : $("#jquery")
classセレクタ : $(".second")
子孫セレクタ : $("p em")
ユニバーサルセレクタ : $("li *")
（li要素内の全ての要素）
グループセレクタ : $(".second, .fouth")
チャイルドセレクタ : $("li > em")
（子に当たる要素だけを指定※孫以降は除かれる）
隣接セレクタ : $("h2 + h3")
（2つの要素が隣り合っている場合に2つ目の弟要素を指定）
間接セレクタ : $("li ~ li")
（同じ親要素を持つ要素で指定した要素よりも後に登場する弟要素を指定）
擬似classセレクタ : $("li:first-child"), $("li:not(:first-child)")

メソッドとは

指定した要素に命令を出す

CSS系
属性系
HTML系
トラバース系
エフェクト系
イベント系
Ajax系

CSS系

css()
width()
addClass()
removeClass()

複数のプロパティがある場合の書き方

css({"プロパティ":"値", "プロパティ":"値”})

パラメータを指定しない＝取得

sample07.html

<script>
$(function() {
  $(".right").height( $(".left").height() );
});
</script>
</head>
省略
<body>
<p class="left">
1<br>
2<br>
3
</p>
<p class="right">
1
</p>

jQueryの優先度

外部スタイルシートやstyleタグよりは優先されるが、!importantの方が優先

おしりカンマに気をつける

複数のパラメータを指定する際最後のパラメータにカンマは不要（IEで崩れる）

jQueryでHTMLの操作

HTML系

text()
html()

※クォーテーションが入れ子になっている場合はシングルとダブル両方を使うこと

prepand()
（先頭に挿入する）
append()
（最後に挿入する）
before()
（指定した要素の前に挿入する）
after()
wrap()
（指定した要素を包む）
remove()

属性系

attr("属性名","値")
（属性を操作する：a要素のhref,target/input type="radio"要素のchecked/img要素のsrc）

属性値を取得する場合

attr("href")
cssでも　css("color")

val()
（フォームのvalueの値を操作する）

エフェクト系メソッド

hide()
（display:noneにする:空,slow,fast,1000）
show()
（display:noneを消して要素本来のdisplayプロパティにする）
fadeout()
（最終的にdisplay:noneにする:空,slow,fast,1000）
fadein()
（同様）

※fadeout,inはopacityを変更しているため、IE8以下の透過PNGで注意

fadeTo()
（不透明度を0にするがもともとの領域は確保される:"スピード",不透明度）

スライド系のアニメーション

slideUp()
（要素を上にスライドしてdisplay:noneにする:スピード）
slideDown()
（display:noneを消して要素を下にスライドする）

※slideはmarginも含めてアニメーションする

CSSを操作するアニメーション

animate({"プロパティ":"値"},"スピード")
<script> $(function() { $("#photo").animate({ "margin-left": "300px" }); }); </script>
<script> $(function() { $("#photo img").animate({ "width": "300px" "height": "300px" }, "slow"); }); </script>

トラバース系

prev()
（セレクタで指定した要素のひとつ前の兄要素を取得する）
next()
（〃のひとつ後の弟要素を取得する）
prevAll()
nextAll()
parent()
children()
parents()
（祖先要素）
find()
（子孫要素）
first()
last()
eq()
（n番目の要素を取得する:0が上から1番目,-1が一番下,-2が下から2番目）

DOMとは（Document Object Model）

HTML文書やXML文書のAPI（Application Programming Interface）
JavascriptからHTMLソース上の要素にアクセスしたり変更できるのはこの仕組があるから

イベント系

イベント系メソッドの記述の仕方

$("セレクタ").イベント系メソッド(イベントハンドラ);
ハンドラ＝操作する者
＝function(){}
$("セレクタ").イベント系メソッド(function(){ /* ここに処理 */ });

click()
<script> $(function() { $("#trigger").click(function(){ $("#photo img").attr({ "src":"images/chocolate.jpg", "alt":"チョコレートケーキ" }); return false; }); }); </script>
※a要素なのでreturn falseを記述

mouseover()
mouseout()
mouseenter()
mouseleave()
※over/outは子要素にマウスを載せたときもイベント発生

hover()
（mouseenter/mouseleaveを同時につかう）
hover(マウスが乗った時のイベントハンドラ,マウスが外れた時のイベントハンドラ)

focus()
（input要素などをクリックした時、Tabキーなどで該当要素が入力可能状態になった時）
blur()
（フォーカスが外れた時）
<script> $(function() { $("#s").focus(function(){ $("#s").val(""); }).blur(function(){ $("#s").val("入力してください"); }); }); </script>

コールバック

<script> $(function() { $("#photo").fadeIn(2000,function(){ $("#photo").fadeOut(2000); }); }); </script>
アニメーション系のメソッドでは、アニメーションのスピードの後にイベントハンドラを記述することでアニメーションの終了時に別の処理をすることができる

ラベル付きのコンタクトフォームを作る

focus()/blur()で骨組みを作る

<script>
$(function() {
$(".textbox").focus(function(){
$(".textbox").val("")
}).blur(function(){
$(".textbox").val("お名前");
});
});
</script>
</head>
<body>
<p>
<input type="text" class="textbox" size="40" name="name" id="name" value="お名前" />
</p>
</body>

→これでは名前を入力しても「お名前」に戻ってしまう
→条件分岐を足す

<script>
$(function() {
$(".textbox").focus(function(){
if($("textbox").val() == "お名前"){
$(".textbox").val("");
}
}).blur(function(){
if($(".textbox").val() ==){
$(".textbox").val("お名前");
});
});
</script>
</head>

※比較演算子について（if文の条件）
a=="jQuery"　文字列
a===10　数字の10
a==="10"　文字列の10
データ型までを含んだ比較演算子

変数labelTextに文字列データの値を入れる
<script> $(function() { var labelText = $(".textbox").val(); $(".textbox").focus(function(){ if($("textbox").val() == "labelText"){ $(".textbox").val(""); } }).blur(function(){ if($(".textbox").val() ==){ $(".textbox").val("labelText"); }); }); </script> </head>

this変数やeach()メソッドを使ってみる

<script>
$(function() {
var labelText = $(".textbox").val();
$(".textbox").focus(function(){
if($("textbox").val() == "labelText"){
$(".textbox").val("");
}
}).blur(function(){
if($(".textbox").val() ==){
$(".textbox").val("labelText");
});
});
</script>
</head>
<body>
<p>
<input type="text" class="textbox" size="40" name="name" id="name" value="お名前" />
</p>
<p>
<input type="text" class="textbox" size="40" name="email" id="email" value="メールアドレス" />
</p>
</body>

→フォーカスすると両方消えて「お名前」になってしまう
→this変数（イベントが発生している要素だけを指定するもの）, each() メソッド（それぞれのオブジェクトに対してオブジェクトの数だけ繰り返し処理を実行するもの）を使う
セレクタ.each(function(){処理})
<script> $(function() { $(".textbox").each(function(){ var labelText = $(this).val(); $(".this").focus(function(){ if($(this).val() == "labelText"){ $(this).val(""); } }).blur(function(){ if($(this).val() ==){ $(this).val("labelText"); }); }); </script> </head>

アコーディオンを作る

どうやって作っていくかを考える

<body>
<dl class="accordion">
<dt>HTML</dt>
<dd>Hypertext Markup Languageの略</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略</dd>
</dl>
<body>

・まずは文章の部分であるdd要素を隠す
・ひとつだけは最初から開いた状態にしておく
・dt要素をクリックしたら、開いているdd要素は閉じて、クリックした部分のdd要素を開く
・CSSでデザインしやすいように、開いている部分のdt要素にはクラスをつける

開いているdd要素を閉じる

<script>
$(function() {
$(".accordion > dd").hide();
});
</script>

→全部開いてしまう
→ひとつだけ開くには

<script>
$(function() {
$(".accordion > dd").hide().eq(0).show();
});
</script>

<script>
$(function() {
$(".accordion > dd:not(:first)").hide();
});
</script>

→擬似クラスセレクタ（フィルター）
→dd:not(:first)一番初めのdd要素以外

CSS 装飾用にクラスを付ける

開いている部分のdt aactive
dtにマウスをのせたとき hover

<script>
$(function() {
$(".accordion > dd:not(:first)").hide();
$(".accordion > dt:first").addClass("active");
$(".accordion > dt").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});
});
</script>

→CSSでhover擬似クラスでの指定も可能だがIE6ではa以外hover擬似クラスが使えないため、クラスづけも行うこと

何度も同じセレクタを書かない

上記のコードだとjQueryは三回も.accordionを探しにいっている
→dd,dt:first,dt…と同じ要素ではないのでメソッドチェーンも使えない

jQuery基礎（途中）