入力エリアがフォーカスされたら背景色を変更する

jQuery JavaScript

2011-11-26

コピー＆ペーストを抑制する

jQuery JavaScript

2011-11-25

テキストエリアに入力する情報をナビゲートする

jQuery JavaScript

2011-11-24

郵便番号から住所を取得する

jQuery JavaScript

2011-11-23

フォームの編集中に入力内容をCookieに保存する

jQuery JavaScript

2011-11-22

テキストフォームに入力自動補完機能をつける

jQuery JavaScript

2011-11-21

複数のファイルをアップロードするインターフェイス

jQuery JavaScript

2011-11-20

XMLデータを読み込んでテーブルに表示する

jQuery JavaScript

<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($){ $.loadXML = function(xmlPath, tableId){ $.ajax({ url: xmlPath + "?" + (new Date()).getTime(), type: "GET", dataType: "xml", timeo…</head></html>

2011-11-19

アニメーションするロールオーバー

jQuery JavaScript

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script> <style type="text/css"> ul { list-style: none; } #container { margin:20px; }…</head></html>

2011-11-18

画像のフェードイン・フェードアウト

jQuery JavaScript

<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(){ $("#photo img").hover(function(){ $(this).animate({ opacity: 1 }); }, function(){ $(this).animate({ opacity: 0.35 }); }); }) </head></html>

2011-11-17

画像をズームする

jQuery JavaScript

画像のズームにはFullsizeというライブラリを使用すると簡単。画像は実画像とサムネールの２つを用意する。 <html> <head> <link rel="stylesheet" href="css/fullsize.css" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> </link></head></html>

2011-11-16

JSONを利用したスライドショー

jQuery JavaScript

<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"> $(document).ready(function(){ //JSONファイルを読み込む $.getJSON('imgdata.json', function(jsonData){ //img要素を生成し変数imgに設定し#slideshowに挿入 $(jsonData.imgs).…</head></html>

2011-11-15

画像のスライドショーを作成する

jQuery JavaScript

<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"> $(document).ready(function(){ //画像を配列に代入 var slideImages = $('#slideshow > img'); slideImages.hide().filter(':first').show(); //画像のタイトルを表示 $('#…</head></html>

2011-11-14

ツールチップを表示する

jQuery JavaScript

2011-11-13

オブジェクトの高さをそろえる

jQuery JavaScript

2011-11-12

オブジェクトをドラッグする

jQuery JavaScript

2011-11-11

オブジェクトのサイズを変更する

jQuery JavaScript

2011-11-10

ページをスムーズにスクロールする

jQuery JavaScript

<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"> $(document).ready(function(){ $('a[href*=#]').click(function() { //アンカーリンク名を取得 var href = this.hash; var $target = $(href == '#top' ? 'body' : …</head></html>

2011-11-09

右クリックをカスタマイズする

jQuery JavaScript

2011-11-08

スライダーを使って文字の大きさを変える

jQuery JavaScript

2011-11-07

ツリービューインターフェイスを作成する

jQuery JavaScript

ツリービューインターフェイスを作成するにはjQueryのTreeviewプラブインを使用するディレクトリ構成については下記のとおりにする <html> <head> <link rel="stylesheet" href="css/jquery.treeview.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.treeview.min.js"></script> </link></head></html>

2011-11-06

アコーディオンインターフェイスを作成する

jQuery JavaScript

<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"> $(document).ready(function(){{ //高さが不確定のものを記述した時にスムーズにアニメーションをする事が出来ないため //li要素全てにheightプロパティを取得し設定する $("ul li li").each(function(){ $(this).cs…</head></html>

2011-11-05

ドロップダウンメニューを作成する

jQuery JavaScript

<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"> var timeout = 500; var closetimer; var current; //サブメニュー表示 function dropnav_open(){ dropnav_canceltimer(); dropnav_close(); current = $(this).f…</head></html>

2011-10-29

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セレク…