jQuery (Basic Effects, Advanced Events, Ajax)

Javascript

jQuery (Basic Effects, Advanced Events, Ajax)
自分用メモ
以下をHTMLファイルに保存して、一個一個ソースを見ながら実行してみると、だいたい分かるはず。

<html>
<head>
<title>jQuery (Basic Effects, Advanced Events)</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="jQuery-ajax.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>Basic Effects</h2>

<h3>show(String), hide(String)</h3>
<script>
function test1a(){
  $("p.test1:hidden").show("slow");
}

function test1b(){
  $("p.test1:visible").hide("slow");
}
</script>
<input type="button" value="show" onclick="test1a();">
<input type="button" value="hide" onclick="test1b();">
"slow" or "normal" or "fast"
<p class="test1">手紙の書き方。電話のかけ方。</p>

<!-- ================================= -->
<h3>slideDown(String), slideUp(String)</h3>
<script>
function test2a(){
  $("p.test2:hidden").slideDown("slow");
}

function test2b(){
  $("p.test2:visible").slideUp("slow");
}
</script>
<input type="button" value="slideDown" onclick="test2a();">
<input type="button" value="slideUp" onclick="test2b();">
"slow" or "normal" or "fast"
<p class="test2">手紙の書き方。電話のかけ方。</p>

<!-- ================================= -->
<h3>fadeIn(String), fadeOut(String)</h3>
<script>
function test3a(){
  $("p.test3").fadeIn("slow");
}

function test3b(){
  $("p.test3").fadeOut("slow");
}
</script>
IEではなぜか機能しなかった。<br>
<input type="button" value="fadeIn" onclick="test3a();">
<input type="button" value="fadeOut" onclick="test3b();">
"slow" or "normal" or "fast"
<p class="test3">手紙の書き方。電話のかけ方。</p>

<!-- ================================= -->
<h3>center()</h3>
<script>
function test4(){
  $("span.test4").center(); //親要素の中央に。
}
</script>
<input type="button" value="test4" onclick="test4();">
<div><span class="test4">手紙の書き方。電話のかけ方。</span></div>


<!-- ================================= -->
<h2>Advanced Events</h2>

<h3>ready(Function)</h3>
<script>
$(document).ready(function(){
  $("p.test5").bind("click", function(){ alert("test5") } );
});
</script>
↓クリック
<p class="test5">毎日がお買い得！</p>

<!-- ================================= -->
<h3>hover(Function,Function)</h3>
<script>
$(document).ready(test6);
function test6(){
	$("p.test6").hover(
	  function(){
	    this.$old = this.innerHTML;
	    $(this).html("Welcome!");
	  },
	  function(){
	    $(this).html(this.$old);
	  }
	);
}
</script>
↓Over
<p class="test6">毎日がお買い得！</p>

<!-- ================================= -->
<h3>event(Function), unevent(Function)</h3>
<script>
$(document).ready(test7a);

function test7(){ alert("test7"); }

function test7a(){
  $("p.test7").click( test7 );
}

function test7b(){
  $("p.test7").unclick( test7 ); // unclick()とするとすべてのclick eventをunbind。
}
</script>
<span style="border:1px solid gray;">$("p").bind("click",Function); </span>のショートカット<br>
<input type="button" value="unbind" onclick="test7b();"><br>
↓クリック
<p class="test7">毎日がお買い得！</p>

<!-- ================================= -->
<h3>onebind(Function)</h3>
<script>
$(document).ready(test8);

function test8(){
  $("p.test8").oneclick( function(){ alert("test8") });
}
</script>
↓クリック
<p class="test8">毎日がお買い得！</p>

<!-- ================================= -->
<h2>Ajax</h2>

<h3>load(URI)</h3>
<script>
function test9(){
  $("p.test9").load("test.txt");
}
</script>
<input type="button" value="test9" onclick="test9();"><br>
<p class="test9"></p>

<!-- ================================= -->
<h3>load(URI,Params,Callback)</h3>
<script>
function test10a(){
  var q = $("#in1").get(0).value;
  $("p.test10").load("http://localhost/test.pl", { req: q });
}

function test10b(){
  var q = $("#in2").get(0).value;
  $("p.test10").load(
    "http://localhost/test.pl",
    { req: q },
    function(){ $("p.test10").prepend("(Callback) "); }
    //function(txt) { alert(txt) } // 引数で受けられる
  );
}
</script>
<input type="text" id="in1" onkeyup="test10a();"><br>
<input type="text" id="in2" onkeyup="test10b();"><br>
<p class="test10"></p>
<br><br>
</body>
</html>

test.pl

#! /usr/bin/perl -w

use strict;
use CGI;

my $q = CGI->new();
print $q->header(-charset => 'utf-8');

my $req = $q->param('req');

while(<DATA>){
  print if( $req ne '' && /^$req/ );
}


__DATA__
book
game
is
this
pen
cook
soccer
football
baseball
wood
disk
easy
body
geek
perl
python
child
head
foot
span
div
html
css
style
sound
mp3
nhk
tv
cat
dog
tiger
bird
pig
horse
rabbit
you
we
do
want
play
watch
stand
get
include
print
use
while
for
foreach
until
last
continue
printf
open
close
join
push
shift
map
grep
wantarray
hash
array
scalar
localtime
keys
delete
reverse
value