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"> //</head></html>

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

<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"> //</head></html>

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

<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" src="js/jquery.formnotifier.js"></script> <script type="text/javascript"> //</head></html>

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

<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" src="js/ajaxzip2.js"></script> <script type="text/javascript"> //<![CDATA[ AjaxZip2.JSONDATA = 'data'; //]]> </script> <style type="text/css"> <…</head></html>

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

<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" src="js/jquery.cookie.js"></script> <script type="text/javascript"> //</head></html>

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

<html> <head> <link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> </link></head></html>

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

<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" src="js/jquery.MultiFile.js"></script> <script type="text/javascript"> //</head></html>

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

<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>

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

<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>

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

<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>

画像をズームする

画像のズームにはFullsizeというライブラリを使用すると簡単。 画像は実画像とサムネールの2つを用意する。 <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>

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

<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>

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

<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>

ツールチップを表示する

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tooltip.min.js"></script> <script type="text/javascript" src="js/jquery.dimensions.min.js"></script> <script type="text/javascript"> //</head></html>

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

<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"> // bigg…</head></html>

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

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> //</link></head></html>

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

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> //</link></head></html>

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

<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>

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

<html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.contextMenu.js"></script> <script type="text/javascript"> //</head></html>

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

<html> <head> <link rel="stylesheet" href="css/jquery-ui-1.7.2.custom.css" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> </link></head></html>

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

ツリービューインターフェイスを作成するには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>

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

<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>

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

<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>

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

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>

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

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

アニメーション効果

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

フォームの機能

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

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

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

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

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

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

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