jQuery Base(Traversing, Iteration)

Javascript

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>