jQuery
関連 html5 jplayer javascript node.js
下記、いつ書いたか覚えてない。。
jQueryはRuby(on Rails)の考え方と似ていると思う。動的言語をできるだけ構造的記述に使うから拡張性と保守性を両立。
Visual Studio (Microsoft Visual Web Developer)がjQueryに対応しているらしい。
ソースコードを閲覧できる
-
- jQuery() と $() はどちらも return new jQuery.fn.init() だと出てきた。
動かしてみる
初めての 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
Deferred
since 2013-06-11
複数の非同期イベントがすべて終了したら何かをする、といった処理は以下のように書ける：
- どうやら複数の ajax 処理を並べたときの実行順序は不定らしい。
<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")
})
})
