jQuery (Basic Effects, Advanced Events, Ajax)
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