jQuery Base(Traversing, Iteration)
jQuery Base(Traversing, Iteration)
自分用メモ
以下をHTMLファイルに保存して、一個一個ソースを見ながら実行してみると、だいたい分かるはず。
<html> <head> <script type="text/javascript" src="jQuery.js"></script> <style> body { margin:0; } h2 {background:#ddf; padding:0.2em; } h3 {background:#fdd; padding:0.2em; } p { margin:0; } </style> </head> <body> <h2>Base</h2> <h3>$(Expression)</h3> ※jQuery独自オブジェクトを返す。<br> $("p") <!-- ================================= --> <h3>$(DOM Element)</h3> <pre> $(document.getElementById("test")) $(document) $(window) $(xml.responseXML) // For working with XMLHTTPRequest </pre> <!-- ================================= --> <h2>BaseTraverse</h2> <h3>find(String)</h3> <script> function test1(){ $("div").find("span").css("fontWeight","bold"); $("div").find("span").find("i").css("color","orange"); } </script> <input type="button" value="test1" onclick="test1();"> <div> <span>手紙の書き方。<i>電話のかけ方。</i></span> </div> <!-- ================================= --> <h3>filter(String)</h3> <script> function test2(){ $("div").filter(".ohmy").css("color","red"); //$("div.ohmy")と同じ? $("div").filter("#ohmy").css("fontWeight","bold"); } </script> <input type="button" value="test2" onclick="test2();"> <div> 手紙の書き方。電話のかけ方。 </div> <div class="ohmy"> ゆずごしょう。 </div> <div id="ohmy"> 毎日がお買い得! </div> <!-- ================================= --> <h3>not(String)</h3> <script> function test3(){ $("p").not(".ohmy").css("fontWeight","bold"); } </script> <input type="button" value="test3" onclick="test3();"> <p> 手紙の書き方。電話のかけ方。 </p> <p class="ohmy"> ゆずごしょう。 </p> <!-- ================================= --> <h2>BaseIterator</h2> <h3>size()</h3> <script> function test4(){ alert($("p.test4").size()); } </script> <input type="button" value="test4" onclick="test4();"> <p class="test4"> 手紙の書き方。電話のかけ方。 </p> <p class="test4"> ゆずごしょう。 </p> <!-- ================================= --> <h3>get()</h3> <script> function test5a(){ var obj = $("p.test5").get(); for(o in obj) obj[o].style.color = "red"; } function test5b(){ var obj = $("p.test5").get(1); obj.style.color = "blue"; } </script> ※DOM要素の配列を返す<br> <input type="button" value="test5a" onclick="test5a();"> <input type="button" value="test5b" onclick="test5b();"> <p class="test5"> 手紙の書き方。電話のかけ方。 </p> <p class="test5"> ゆずごしょう。 </p> <!-- ================================= --> <h3>each(Function)</h3> <script> function test6(){ $("p.test6").each( function(){ this.style.color="pink"; } ); } </script> <input type="button" value="test6" onclick="test6();"> <p class="test6"> 手紙の書き方。電話のかけ方。 </p> <p class="test6"> ゆずごしょう。 </p> </body> </html>