「JQuery はじめに」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==jQueryはじめに== [jQuery][JavaScript] *リファレンス http://docs.jquery.com/Main_Page *リファレンス(日本語) http://semooh.jp/jquery/ *入門 http:…」) |
|||
| 1行目: | 1行目: | ||
==jQueryはじめに== | ==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/ | ||
| 7行目: | 7行目: | ||
| − | + | <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 が準備できたら実行する処理 | ||
| 18行目: | 18行目: | ||
// | // | ||
// HTMLタグを含む文字を出力するには html()メソッドを使う(innerHTMLではない) | // HTMLタグを含む文字を出力するには html()メソッドを使う(innerHTMLではない) | ||
| − | $('#msg_area').html(" | + | $('#msg_area').html("<span style='font-weight:bold'>document is ready.</span>"); |
// プレーンテキストを出力するには text()メソッドを使う | // プレーンテキストを出力するには text()メソッドを使う | ||
| − | $('#msg_text').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属性名で参照 | // $('.classs_element_name') 要素をclass属性名で参照 | ||
// $('tag_type.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') 同じタグ全てを参照する | // $('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> | |
[[File:0732_jquery01.jpg]] | [[File:0732_jquery01.jpg]] | ||
2020年2月15日 (土) 08:03時点における版
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 矢木浩人
