jQueryのいろは
目次
jQueryの特徴
jQueryの特徴
- DOMとJavaScript間のやり取りを単純にするオープンソースJavaScriptライブラリー
スタイルと規約
- チェイン(連鎖)
- $("div").hide().text("new content").addClass("updatedContent").show();
- 同一要素を複数回選択するより処理効率も高い
- 選択セットを変数に格納する際には、その変数の先頭に$をつけて、その変数がjQueryオブジェクトであることを示す
- $divs=$("div");
jQueryオブジェクト(ラッパー)
- 0〜N個のDOM要素を含む(配列で格納)
- セレクタで選択されるDOM要素が存在しない場合もnullにならない
- DOM配列は$().get()、DOM要素は$()[0]で取得する
- DOM要素からjQueryオブジェクトを取得する場合は$(element)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug(document.getElementById("div1") === document.getElementById("div1")); //true log.debug(document.getElementById("div1") === $("#div1")); //false log.debug(document.getElementById("div1") === $("#div1")[0]); //true log.debug($("#div1").length); //1 log.debug($("div").length); //2 log.debug(document.getElementById("div3") === null); //true log.debug($("div3") === null); //false log.debug($("div3").length); //0 }); </script> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>
よく使う要素選択
基本的なセレクタ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("div").length); //2 要素セレクタ log.debug($("#div1").html()); //div1 idセレクタ log.debug($(".class1").length); //2 classセレクタ log.debug($(".class1 strong").html()); //strong1 子孫セレクタ(特定の要素の内側にある要素をさらに絞り込む) log.debug($("#array\\[0\\]\\.url").html()); //http://www.google.com エスケープが必要! }); </script> </head> <body> <div id="div1">div1</div> <div id="div2"> <ul id="ul1"> <li id="first" class="class1">li <strong>strong1</strong> 1-1</li> <li id="second" class="class1"></li> <li id="third" class="class2">li <strong>strong2</strong> 1-3</li> <li id="fourth" class="class2">li 1-4</li> </ul> <span id="array[0].url">http://www.google.com</span> </div> </body> </html>
- idは要素をユニークに識別するもの。複数の要素を識別したい場合はclassを用いる。
- メタ文字は”\\”でエスケープが必要
- !"#$%&'()*+,./:;<=>?@[\]^`{|}~
属性セレクタ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("input[type='checkbox']").length); //3 log.debug($("[title]").length); //2 特定の属性を持つ要素 log.debug($("[title='title1']").html()); //li1 log.debug($("li[title!='title1']").html()); //li2 log.debug($("input[name='array[0].url']").val()); //http://www.google.com }); </script> </head> <body> <form> <div> <input type="checkbox" id="checkbox1" value="check1"/>check1 <input type="checkbox" id="checkbox2" value="check2" checked="checked"/>check2 <input type="checkbox" id="checkbox3" value="check3"/>check3 </div> <div> <input type="text" name="array[0].url" value="http://www.google.com" /> </div> </form> <ul> <li title="title1">li1</li> <li title="title2">li2</li> </ul> </body> </html>
- 属性名の前に”@”をつける必要があったのは、jQuery1.2まで。
フィルタ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("li:first").html()); //li0 text log.debug($("li:last").html()); //li6 text log.debug($("li:even").length); //4(偶数番目) log.debug($("li:odd").length); //3(奇数番目) log.debug($("li:eq(4)").html()); //li4 text log.debug($("li:gt(4)").length); //2 log.debug($("li:lt(4)").length); //4 }); </script> </head> <body> <ul id="ul1"> <li id="li0">li0 text</li> <li id="li1">li1 text</li> <li id="li2">li2 text</li> <li id="li3">li3 text</li> <li id="li4">li4 text</li> <li id="li5">li5 text</li> <li id="li6">li6 text</li> </ul> </body> </html>
トラバース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("li:first").text()); //li1 link strong log.debug($("li:first").html()); //li1 <a href="#">link</a> <strong>strong</strong> $("li:first").html("original"); //HTMLの変更 $("li:first").prepend("<strong>先頭に挿入</strong>"); $("li:first").append("<strong>最後に挿入</strong>"); log.debug($("li:first").html()); //<strong>先頭に挿入</strong>original<strong>先頭に挿入</strong> $("li:eq(1)").prependTo("#ul1"); //ul1内部の最初に移動 $("#li2").clone(true).appendTo("#ul1"); //ul1内部の最後に移動 $(document.createElement("p")).attr("id", "p1").html("p1").insertAfter("#ul1"); //ul1の次に追加 }); </script> </head> <body> <div> <ul id="ul1"> <li id="li1">li1 <a href="#">link</a> <strong>strong</strong></li> <li id="li2">li2</li> </ul> </div> </body> </html>
チェックボックス/ラジオボタン
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("input:checkbox:checked").length); //2 log.debug($("input[type='checkbox']").filter(":checked").length); //2 こっちのがパフォーマンスは良いらしい log.debug($("input[type='radio']").filter(":checked").val()); //v1 }); </script> </head> <body> <form> <div> <input type="checkbox" name="checkbox" id="c0" value="v0" /><label for="c0">0</label> <input type="checkbox" name="checkbox" id="c1" value="v1" checked="checked" /><label for="c1">1</label> <input type="checkbox" name="checkbox" id="c2" value="v2" /><label for="c2">2</label> <input type="checkbox" name="checkbox" id="c3" value="v3" checked="checked" /><label for="c3">3</label> <input type="checkbox" name="checkbox" id="c4" value="v4" /><label for="c4">4</label> </div> <div> <input type="radio" name="radio" id="r0" value="v0" /><label for="r0">0</label> <input type="radio" name="radio" id="r1" value="v1" checked="checked" /><label for="r1">1</label> <input type="radio" name="radio" id="r2" value="v2" /><label for="r2">2</label> </div> </form> </body> </html>
よく使うメソッド
ready()
- $(document).ready(function(){});
- 省略表記(推奨):$(function(){});
- DOM構築時点で呼ばれるため、画像の読み込み完了時点で起こるwindow.onloadイベントより先
- 複数定義した場合は、定義した順に実行される(上書きされない)
ループ($().each())
- $().each(function(i, e){});
- continue/breakはreturn true/return falseで代替
- jQuery().each(object, callback)とは別物
- こちらはjQueryオブジェクト以外の配列等も処理可能なユーティリティメソッド
- 要素を絞りこんでからループを回すと可読性が高い
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { $("div.class1").each(function(i, e) { if (i == 1) return true; //continue if (i == 3) return false; //break log.debug(i); log.debug(e === this); log.debug($(this).html()); }); }); </script> </head> <body> <div id="div1">div1</div> <div id="div2" class="class1">div2</div> <div id="div3">div3</div> <div id="div4" class="class1">div4</div> <div id="div5" class="class1">div5</div> <div id="div6">div6</div> <div id="div7" class="class1">div7</div> </body> </html>
HTML操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="blackbird/blackbird.js"></script> <link type="text/css" rel="Stylesheet" href="blackbird/blackbird.css" /> <script type="text/javascript"> $(function() { log.debug($("li:first").text()); //li1 link strong log.debug($("li:first").html()); //li1 <a href="#">link</a> <strong>strong</strong> $("li:first").html("original"); //HTMLの変更 $("li:first").prepend("<strong>先頭に挿入</strong>"); $("li:first").append("<strong>最後に挿入</strong>"); log.debug($("li:first").html()); //<strong>先頭に挿入</strong>original<strong>先頭に挿入</strong> $("li:eq(1)").prependTo("#ul1"); //ul1内部の最初に移動 $("#li2").clone(true).appendTo("#ul1"); //ul1内部の最後に移動 $(document.createElement("p")).attr("id", "p1").html("p1").insertAfter("#ul1"); //ul1の次に追加 }); </script> </head> <body> <div> <ul id="ul1"> <li id="li1">li1 <a href="#">link</a> <strong>strong</strong></li> <li id="li2">li2</li> </ul> </div> </body> </html>
CSS操作
- 複数のCSS属性を同時に設定する場合、プロパティ名をキャメルケースで記述すれことでダブルクォーテーションで括らなくても設定可能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#p1").css("background-color", "pink"); $("#p1").css({ color : "blue", fontWeight : "bold" }); $("#p2").css({ "background-color" : "yellow", "font-weight" : "bold" }); }); </script> </head> <body> <div> <p id="p1">test1</p> <p id="p2">test2</p> </div> </body> </html>
イベント追加
- $().trigger(“イベント”)でイベントを起こすことができる
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("li").click(function(){ alert($(this).index("#ul1 li")); //要素内でのインデックスを取得 }).mouseover(function(){ $(this).css("background-color", "yellow"); }).mouseout(function(){ $(this).css("background-color", ""); }); $("#li4").trigger("click"); //イベントを発生させる }); </script> </head> <body> <ul id="ul1"> <li id="li0">li0 text</li> <li id="li1">li1 text</li> <li id="li2">li2 text</li> <li id="li3">li3 text</li> <li id="li4">li4 text</li> <li id="li5">li5 text</li> <li id="li6">li6 text</li> </ul> </body> </html>
実装例
要素が見えるようにスクロールする
- 『jQueryレシピブック』 p.145を参考に作成
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { for(var i=0; i<100; i++) { $(document.createElement("li")).html("text" + i).appendTo("#ul1"); } var $div = $("#div1"); var divOffset = $div.offset().top; var destination = $div.scrollTop() - divOffset + $("#div1 li:eq(50)").offset().top; $div.animate({scrollTop: destination}, 3000); $("#button1").click(function(){ $div.scrollTop($div.scrollTop() - divOffset + $("#div1 li:eq(80)").offset().top); }); }); </script> </head> <body> <input type="button" id="button1" value="click!!" /> <div id="div1" style="height:200px; width:200px; overflow:auto; posisiton:relative;"> <ul id="ul1"> </ul> </div> </body> </html>
チェックボックスの全選択
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> var toggleCheckbox = function(toggleId, checkboxesClass) { var $toggle = $("#" + toggleId); var $checkboxes = $("input:checkbox." + checkboxesClass); $toggle.click(function(){ if (this.checked) { $checkboxes.attr("checked", "checked"); } else { $checkboxes.removeAttr("checked"); } }); $checkboxes.click(function(){ if (this.checked) { if($checkboxes.length == $checkboxes.filter(":checked").length){ // 当該チェックボックスがオンで、すべてのチェックボックスがオンの場合 $toggle.attr("checked", "checked"); } } else { $toggle.removeAttr("checked"); } }); }; $(function() { toggleCheckbox("toggle1", "checkbox1"); toggleCheckbox("toggle2", "checkbox2"); }); </script> </head> <body> <form> <div> <input type="checkbox" id="toggle1" /><label for="toggle1">Select All</label> <input type="checkbox" name="checkbox1" class="checkbox1" value="1" id="1-1" /><label for="1-1">1</label> <input type="checkbox" name="checkbox1" class="checkbox1" value="2" id="1-2" /><label for="1-2">2</label> <input type="checkbox" name="checkbox1" class="checkbox1" value="3" id="1-3" /><label for="1-3">3</label> </div> <div> <input type="checkbox" id="toggle2" /><label for="toggle2">Select All</label> <input type="checkbox" name="checkbox2" class="checkbox2" value="1" id="2-1" /><label for="2-1">A</label> <input type="checkbox" name="checkbox2" class="checkbox2" value="2" id="2-2" /><label for="2-2">B</label> <input type="checkbox" name="checkbox2" class="checkbox2" value="3" id="2-3" /><label for="2-3">C</label> </div> </form> </body> </html>
参考
- 『Web制作の現場で使う jQueryデザイン入門』
- お勧め!
Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)
- 作者: 西畑一馬
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2010/02/12
- メディア: 大型本
- 購入: 27人 クリック: 1,467回
- この商品を含むブログ (43件) を見る
- 『jQueryクックブック』
- 作者: jQuery Community Experts,株式会社クイープ
- 出版社/メーカー: オライリージャパン
- 発売日: 2010/08/18
- メディア: 大型本
- 購入: 10人 クリック: 333回
- この商品を含むブログ (39件) を見る