- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!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("<span style='font-weight:bold'>document is ready.</span>");
// プレーンテキストを出力するには text()メソッドを使う
$('#msg_text').text("<span style='font-weight:bold'>document is ready.2</span>");
});
</script>
</head>
<body>
<div id='msg_area'></div>
<div id='msg_text'></div>
<br/>
<div class="cls1"></div>
<span class="cls1"></span>
<!--
// $('.classs_element_name') 要素をclass属性名で参照
// $('tag_type.classs_element_name') 要素をタグ＋class属性名で参照
-->
<br/>
<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.');">
<br/>
<!--
// $('tag_type') 同じタグ全てを参照する
// カンマ区切で同時に複数、* ですべて参照
-->
<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');"/>
<div>
<span>子供階層</span>
<p>
<span>孫階層</span>
</p>
<span>子供階層2</span>
</div>
<input type="button" value="包含タグすべて" onclick="javascript:$('div span').css('background-color', 'red');"/><br/>
<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>
{{ref_image jquery01.jpg}}
!!オブジェクト
!属性の設定
::'q'というidのテキストにtestを設定
$('#q').attr('value', 'test');
