JQuery はじめに
ナビゲーションに移動
検索に移動
jQueryはじめに
[jQuery][JavaScript]
- リファレンス http://docs.jquery.com/Main_Page
- リファレンス(日本語) http://semooh.jp/jquery/
- 入門 http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html
ドキュメント操作
<html>
<head>
<script type="text/javascript" src="http://typea-mixi01.appspot.com/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
// document が準備できたら実行する処理
$(document).ready(function(){
//
// $('#[要素のid]') で参照(ただしjQueryオブジェクト)
//
// HTMLタグを含む文字を出力するには html()メソッドを使う(innerHTMLではない)
$('#msg_area').html("document is ready.");
// プレーンテキストを出力するには text()メソッドを使う
$('#msg_text').text("document is ready.2");
});
</script>
</head>
<body>
<input type="button" value="同じclass属性" onclick="javascript:$('.cls1').text('class element no1.');">
<input type="button" value="タグ+class属性" onclick="javascript:$('span.cls1').text('class element no1 span tag only.');">
<input type="button" value="同一タグ種" onclick="javascript:$('div').css('border', 'solid 1px black');"/>
<input type="button" value="複数タグ種" onclick="javascript:$('span,input').css('border', 'solid 2px blue');"/>
子供階層
孫階層
子供階層2
<input type="button" value="包含タグすべて" onclick="javascript:$('div span').css('background-color', 'red');"/>
<input type="button" value="子タグのみ" onclick="javascript:$('div>span').css('background-color', 'blue');"/>
<input type="button" value="隣接" onclick="javascript:$('p+span').css('background-color', 'green');"/>
</body>
</html>
© 2006 矢木浩人
