jQuery
ドラグドロップを簡単に実装したいと思っていたら、jQuery に出会った。
軽い気持ちで、使ってみたら、気に入ったので、メモ帳を作ることにした。
主に、備忘です。 だから、怪しいと思って、読んでね。
大体、javascript 自体を知らないし、とても心細いが、まずは、いろいろな人の言及や、解説を集める。
一度だけしか実行されないイベント
ネタ元:http://wiki.kyosuke.jp/jquery
<script> $(function(){ $('p').oneclick(function(){ alert("1回目がクリックされました!"); }); }); <script> <body> <p>1 click</p>
hoverというイベント
ネタ元:http://wiki.kyosuke.jp/jquery
$().hover(マウスが乗ったときのfunction, マウスが離れたときのfunction);
$(function(){ $("p").hover(function(){ this.$old = this.innerHTML; $(this).html("Welcome!"); },function(){ $(this).html(this.$old); }); });
Ajax POST してみる
<script> $(function(){ $("#news").load("news.php",{ keyword: "やっとこさ", category: "test" }); }); </script> <body> <p id="news"></p> 【news.php】 <?php $word = ""; if(isset($_POST['keyword'])){ $word = htmlspecialchars($_POST['keyword']); echo $word."そのままお返しします。"; exit; } ?>
ADD 20080110
「keyword: "やっとこさ"」のところ、テキストフィールドの値を取得して、ポストしたい場合は、どう書く。
keyword:("#url").val() 上記のようにすることで、DOM要素の value 属性の内容を取得します。 受信側は、phpなら、$url = htmlspecialchars($_POST['keyword']);で受信できます。 【サンプル】 $(function() { $("#button").click(function(){ $("#result").load("index.cgi",{ keyword: $("#url").val(), test:"test" }); }); }); </head> <body> <input id="url" type="text" /> <input type="button" id="button" value="go" />
Ajax GET してみる。
+htmlのiframe エレメントを使って外部ファイルを表示
- phpの echo file_get_contents("http://…");
等と類似した作業になる。
まずは、わからないので、普通のjavascriptの書き方(?)の中に、
$("#test").load("text.txt");
id=testに、text.txtをロードして頂戴。と、jQueryってみる。
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jQuery Portlets</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="interface.js"></script> <script type="text/javascript" src="config.js"></script> <style type="text/css" media="all"> @import 'portlets.css'; </style> <script> function renew(){ $("#test").load("kinenbi.txt"); } </script> </head> <body> <p id="test" onclick="renew();" style="background:#ccc;" >hello</p>
このソースは、jQueryダウンロードした時についてくる。index.htmlに書き足しただけ。
結果:jQueryってくれた。
$(function(){ $.ajax({ url : "./news.php", type : "get", success : function(data){ alert(data); }, error : function(){ alert("読み込めませんでした"); } }); }); </script> </head> <body> 【news.php】 <?php header("HTTP/1.0 404 Not Found"); ?> 読み込めませんでした。が表示される。
結果オーライ的にいけば、クリックして段落を書き換えることが出来たのだから、これでおしまいでいいんだけど、
他の人から見ると、洋服の上にパンツをはいてるような、いやらしさも、漂うだろう。
クリックイベントの書き方も、もちろんあるようなので、試してみよう。
クリックイベントを書いてみる。
<script> $(function(){ $("#test").click(function(){ $("#test").load("kinenbi.txt"); }); }); </script> </head> <body> <p id="test" style="background:#ccc;" >hello</p>
結果:やさしくjQueryってくれた。
余計なことですけど、こういう書き方って、htmlドキュメント書いている人には、とても理解しやすい。
こういうこと考える人、きっとそういうことをわかってくれているんだなって感じがして、ちょっといい気分。
ADD20080115
Events | jQuery API Documentationに詳細に記述がありました。
以下のコードでは、エスケープキーが押された時に、アラートが表示されます。
キーコードを調べるには、Javascript keyCode checker tool
<script type="text/javascript"> <!-- (function($){ $(document).keyup(function(event){ if (event.keyCode == 27) { alert('escaped!'); } }); })(jQuery); //--> </script>
イベントは、
- .click(function(){...{)};
- .dblclick(function(){...{)};
- .mousedown(function(){...{)};
- mouseover
- mouseup
- mousemove
- mouseout
- keyup
- keydown
- keypress
を使うことが出来た。
blur | focus | load | resize | scroll |
unload | click | dblclick | mousedown | mouseup |
|mousemove|mouseover|mouseout|change|select|
submit | keydown | keypress | keyup | error |
クリック、ダブルクリック、マウスダウン以外は、バインドを使わないと、ハンドリングできないと思って試したが
bindがうまく動作してくれなかった。(1.2.1)
リファレンスなどでは、bindを使ったサンプルコードがうまく動いているようなので、何か、間違いがあるんだと思うが、理由はまだ見つからない。
ただ、クリックイベントと同様の方法で、大抵のイベントが、ハンドリングできそうな雰囲気なので、次に進む。
Ajax POST コールバック関数を使ってみる。
<script> $(function(){ $("#ajax-post").load("news.php", {"http":"200","keyword":"<h3>こんばんは</h3>"}, function(text, status) { $(this).css("background-color", "#aaaaff").css("border","1px solid #000000").css("padding","2em"); }); }); </script> </head> <body> <div id="ajax-post"></div>
コールバック関数が使えれば、keyword と http という POST変数を送信して、応答してきたテキスト等に、関数を使って処理を行うことができる。上のコードは、思ったとおりに動作した。
ところで、jQuery 開発者向けメモ - 基本・サンプル曰く、
こちらの書き方が、今風。
$(function(){
// HTMLロード後に実行したい初期化コード
});
この書き方は、古い。
$(document).ready(function(){
// HTMLロード後に実行したい初期化コード
});