目次

jQuery

関連 html5 jplayer javascript node.js

下記、いつ書いたか覚えてない。。

jQueryはRuby(on Rails)の考え方と似ていると思う。動的言語をできるだけ構造的記述に使うから拡張性と保守性を両立。

Visual Studio (Microsoft Visual Web Developer)がjQueryに対応しているらしい。

ソースコードを閲覧できる

動かしてみる

初めての jQuery として、Visual Basic や Delphi でよくやる題材を。

テキストボックスとボタンを一つ配置して、ボタンが押されると、テキストボックスの内容を hello world に書き換える。そして hello というメッセージボックス。 

<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#button1").click(function(){
    $("#text1").val("hello world");
    alert("hello");
  });
});
</script>
</head>
<body>
<input type="text" id="text1"/>
<input type="button" id="button1" value="hello"/>
</body>
</html>

jQueryとWAI-ARIAの関係

get メソッド

資料 の記事を試す。 コメントアウトした方としてない方と、どちらでも動いた。 

<div>ボタンを押してみてください。
  <button id="test">クリック</button>
  <p>
  <span id="my1">ここが書き換わります</span>
  </p>

</div>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
//$(document).ready(function(){
//  $("#test")
//    .click(function () {
//       $.get( "./msg.txt",
//         function(data){
//          $("#my1").html(data);
//         }
//       );
//    });
//});
jQuery(function($){
  $("#test")
    .click(function () {
       $.get( "./msg.txt",
         function(data){
          $("#my1").html(data);
         }
       );
    });
});
</script>

get の文字化け回避

上記の例は一部の環境で文字化けが起きたので、明示的に UTF-8 を使うようにした。

ついでに、文字属性の指定の実験もやってみた。

下記の例は Windows の IE8 と Firefox 3.6 と Chrome で動作確認済み。

msg.php 

<?php
header("Content-Type: text/html; charset=utf-8");
?>
テストです

jq-get.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head>
<body>
<div>ボタンを押してください。
  <button id="test">クリック</button>
  <p>
  <span id="my1">ここが書き換わります</span>
  <span id="my2">ここは書き換わりません</span>
  </p>
</div>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#test").click(function() {
    $.get( "./msg.php",
      function(data) { $("#my1").html(data); }
    );
    $("#my2").css("font-size",30).css("color", "#808080");
  });
});
</script>
</body>
</html>

jsrender

since 2013-06-05

https://github.com/BorisMoore/jsrender

Deferred

since 2013-06-11

複数の非同期イベントがすべて終了したら何かをする、といった処理は以下のように書ける： 

<script type="text/javascript" charset="utf-8" src="./jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./jqmobile/jquery.mobile-1.3.1.min.js"></script>

<a data-role="button" id="test_btn">テスト</a>

<script type="text/javascript" charset="utf-8" src="./test.js"></script>
function debugMessage(s) {
    alert(s)
}

function stringify(d) {
    var s = JSON.stringify(d)
    if (s.length > 100) {
	s = s.substring(0, 97) + "..."
    }
    return s
}

function fetch1() {
    var dfd = $.Deferred()
    var url = "http://localhost"
    var settings = {}
    $.ajax(url, settings).done(function(data) {
	debugMessage("done: " + stringify(data))
	dfd.resolve(data)
    }).fail(function(data) {
	debugMessage("fail: " + stringify(data))
	dfd.reject()
    })
    return dfd.promise()
}

function fetch2() {
    var dfd = $.Deferred()
    var url = "http://localhost/~nishimotz"
    var settings = {}
    $.ajax(url, settings).done(function(data) {
	debugMessage("done: " + stringify(data))
	dfd.resolve(data)
    }).fail(function(data) {
	debugMessage("fail: " + stringify(data))
	dfd.reject()
    })
    return dfd.promise()
}

$("#test_btn").on("click", function (e) {
    debugMessage("hello")
    $.when(fetch1(), fetch2()).done( function(data1, data2) {
	var s = "[1]:" + stringify(data1) + " [2]:" + stringify(data2)
	debugMessage("done-all: " + s)
    }).fail( function() {
	debugMessage("fail")
    })
})