jQuery
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>
