jQuery

ドラグドロップを簡単に実装したいと思っていたら、jQuery　に出会った。

軽い気持ちで、使ってみたら、気に入ったので、メモ帳を作ることにした。


主に、備忘です。　だから、怪しいと思って、読んでね。



大体、javascript 自体を知らないし、とても心細いが、まずは、いろいろな人の言及や、解説を集める。

Ajax POST してみる

Ajax 
<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 してみる。

Ajax

+htmlのiframe エレメントを使って外部ファイルを表示

  1. 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 コールバック関数を使ってみる。

Ajax 
<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ロード後に実行したい初期化コード
});