「JQuery はじめに」の版間の差分
ナビゲーションに移動
検索に移動
| 1行目: | 1行目: | ||
| − | == | + | ==[[jQuery]]はじめに== |
[[jQuery]] | [[JavaScript]] | | [[jQuery]] | [[JavaScript]] | | ||
*リファレンス http://docs.jquery.com/Main_Page | *リファレンス http://docs.jquery.com/Main_Page | ||
*リファレンス(日本語) http://semooh.jp/jquery/ | *リファレンス(日本語) http://semooh.jp/jquery/ | ||
| − | *入門 http://www.openspc2.org/JavaScript/Ajax/jQuery_study/ver1.3.1/index.html | + | *入門 http://www.openspc2.org/[[JavaScript]]/Ajax/jQuery_study/ver1.3.1/index.html |
==ドキュメント操作== | ==ドキュメント操作== | ||
| 17行目: | 17行目: | ||
// $('#[要素のid]') で参照(ただしjQueryオブジェクト) | // $('#[要素のid]') で参照(ただしjQueryオブジェクト) | ||
// | // | ||
| − | // | + | // [[HTML]]タグを含む文字を出力するには html()メソッドを使う(inner[[HTML]]ではない) |
$('#msg_area').html("<span style='font-weight:bold'>document is ready.</span>"); | $('#msg_area').html("<span style='font-weight:bold'>document is ready.</span>"); | ||
// プレーンテキストを出力するには text()メソッドを使う | // プレーンテキストを出力するには text()メソッドを使う | ||
2020年2月16日 (日) 04:28時点における最新版
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>
© 2006 矢木浩人
