| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

JQuery はじめに

提供: MyMemoWiki
2020年2月16日 (日) 04:28時点におけるPiroto (トーク | 投稿記録)による版
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
ナビゲーションに移動 検索に移動

jQueryはじめに

jQuery | JavaScript |

ドキュメント操作

  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="http://typea-mixi01.appspot.com/js/jquery-1.3.2.js"></script>
  4.         <script type="text/javascript">
  5.         
  6.             // document が準備できたら実行する処理
  7.             $(document).ready(function(){
  8.                 //
  9.                 // $('#[要素のid]') で参照(ただしjQueryオブジェクト)
  10.                 //
  11.                 // HTMLタグを含む文字を出力するには html()メソッドを使う(innerHTMLではない)
  12.                 $('#msg_area').html("<span style='font-weight:bold'>document is ready.</span>");
  13.                 // プレーンテキストを出力するには text()メソッドを使う
  14.                 $('#msg_text').text("<span style='font-weight:bold'>document is ready.2</span>");
  15.             });
  16.             
  17.         </script>
  18.     </head>
  19.     <body>
  20.         <div id='msg_area'></div>
  21.         <div id='msg_text'></div>
  22.         <br/>
  23.         
  24.         <div class="cls1"></div>
  25.         <span class="cls1"></span>
  26.         <!-- 
  27.             // $('.classs_element_name') 要素をclass属性名で参照
  28.             // $('tag_type.classs_element_name') 要素をタグ＋class属性名で参照
  29.         -->
  30.         <br/>
  31.         <input type="button" value="同じclass属性"  onclick="javascript:$('.cls1').text('class element no1.');">
  32.         <input type="button" value="タグ+class属性" onclick="javascript:$('span.cls1').text('class element no1 span tag only.');">
  33.         <br/>
  34.         
  35.         <!--
  36.             // $('tag_type') 同じタグ全てを参照する
  37.             // カンマ区切で同時に複数、* ですべて参照
  38.         -->
  39.         <input type="button" value="同一タグ種" onclick="javascript:$('div').css('border', 'solid 1px black');"/>
  40.         <input type="button" value="複数タグ種" onclick="javascript:$('span,input').css('border', 'solid 2px blue');"/>
  41.         
  42.         <div>
  43.             <span>子供階層</span>
  44.             <p>
  45.                 <span>孫階層</span>
  46.             </p>
  47.             <span>子供階層2</span>
  48.         </div>
  49.         <input type="button" value="包含タグすべて" onclick="javascript:$('div span').css('background-color', 'red');"/><br/>
  50.         <input type="button" value="子タグのみ"     onclick="javascript:$('div>span').css('background-color', 'blue');"/>
  51.         <input type="button" value="隣接"           onclick="javascript:$('p+span').css('background-color', 'green');"/>
  52.         
  53.     </body>
  54. </html>

0732 jquery01.jpg

「https://www.typea.info/tips_/index.php?title=JQuery_はじめに&oldid=6275」から取得

© 2006 矢木浩人