CSS3セレクターでストライプテーブルを作成する

jQuery JavaScript

jQueryではCSS3のセレクターの表記の多くをサポートしているので、CSS3を実装していない古いブラウザーでも使用できる。 <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("th:nth-child(odd)").addClass("odd"); $("tr:nth-child(even)").a…</head></html>

2011-10-27

AjaxでXMLデータを取得・加工して表示する

jQuery JavaScript

AjaxとはJavaScriptでWebページを切り替えずにサーバーとデータをやり取りすること。 Ajaxを使ってサーバーのデータを取りに行けばページを切り替えずに一部だけを書き換えるといった処理が出来るようになる。 $.ajax({ url: '取得するXMLファイル', dataTyp…

2011-10-25

アニメーション効果

JavaScript jQuery

jQueryならwebページに動きを付けるアニメーション効果(動きのあるUI)を簡単に実装出来る。メソッド意味 show() 要素を徐々に表示する hide() 要素を徐々に非表示にする toggle() 要素の表示・非表示を切り替える sideDown() 要素をスライドアニメーション…

2011-10-23

フォームの機能

jQuery JavaScript

フォームの部品の値を所得・変更する命令命令意味 val() value属性の値を取得・変更するフォームに関するイベントの処理 focus() フォーカスを感知する blur() フォーカスが外れたことを感知する change() フォームのないよう変更を感知する submit() フ…

2011-10-15

イベントとイベントリスナー

jQuery JavaScript

イベント処理の一般的なコード $(セレクター).イベント(function(){ ...イベントが発生したときの実行する処理... }); $(function(){ $('#home').mouseover(function(){ $(this).attr('src','home.gif'); }); }); 主なイベント命令意味 click() クリック時…

2011-10-14

メソッドでHTML/CSSを操作する

JavaScript jQuery

<p id="first">変更前</p> $(function(){ $("p#first").html("<strong>変更後</strong>"); }); jQueryの主なメソッドメソッド意味 text(...) テキストを変更する text() テキストを取得する html(...) htmlを変更する html() htmlを取得する prepend(...) 要素内の先頭にhtnlを挿入する append…

2011-10-13

セレクターでHTMLの要素を取り出す

jQuery JavaScript

jQueryでは、セレクターでHTMLのどの要素を操作するか指定して、メソッドで操作する内容を記述する。 <ul> <li>あいうえお</li> </ul> $(function(){ $("li").css("color","red"); }); よく使うセレクター名称書式指定対象要素セレクター $("要素名") 特定の要素 IDセレク…