sato-shi
高 田 馬 場 で 働 いています
jqueryを 分 かった 気 になる
About jquery べた 書 き から お 手 軽 な 書 き 方 へ ブラウザ バージョン 表 示 CSS 操 作 イベント 処 理 エフェクト 非 同 期 通 信 (Ajax) クロスドメイン 通 信 (JSONP) アニメーション プラグイン 紹 介 (ズーム 画 像 表 示 ツールチップ) jqquery 拡 張 ( 定 義 メソッドチェーン) まとめ
JavaScriptライブラリのひとつ 軽 量 圧 縮 19KB 非 圧 縮 120KB CSS1-3 対 応 クロスブラウザ IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome プラグインを 追 加 可 能 公 開 されているプラグインが 豊 富 自 作 することも 可 能 UIライブラリ テーマを 指 定 できる 今 回 は jquery 1.3.2 を 例 に 進 めます
プロトタイプベースのOOPスクリプト 言 語 プロトタイプベース:オブジェクト(モノ)とクローン( 複 製 ) クラスベース:クラス( 型 )とインスタンス( 実 体 ) コアな 仕 様 はECMAScriptとして 標 準 化 されている ブラウザ 間 の 実 装 が 異 なり 動 作 がバラバラ 非 同 期 通 信 を 行 って 部 分 的 に 画 面 を 更 新 できる Ajax( Asynchronous JavaScript + XML ) 多 くのブラウザ 内 で 動 作 する IE,Firefox,Safari,Chrome 開 発 環 境 やデバッグ 環 境 が 整 ってきた 統 合 開 発 環 境 :Eclipse,Aptana, IntelliJ IDEA,Spket IDE デバッグツール:Firebug
Firebugで 確 認 が 簡 単 DOMの 中 身 を 確 認 実 際 に 操 作 しながら 値 の 変 更 を 確 認
jquery 関 数 (jquery / $) CSSセレクタ : $(expression, context) DOM 生 成 : $(html, owner) jqueryオブジェクト : $(elements) 実 行 : $(callback) jqueryオブジェクト 操 作 each(callback) : 全 ての 要 素 にコールバック 関 数 を 実 行 する get(index) : DOM Elementを 取 得 する size() : 要 素 数 を 返 す
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"> function init(){ document.getelementbyid("jstext").innerhtml = "ハローJavaScript"; } </head> <body onload="init()"> <div id="jstext"> </body> </html> BODYブロックの 読 み 込 み 完 了 後 に 実 行 する 関 数 を 指 定 している べたなJavaScript
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("#jstext").text("ハローjquery"); </head> <body> <div id="jstext"> </body> </html> HTMLとスクリプトをすべて 読 み 込 み 完 了 後 に 実 行 さ れる 関 数 の 宣 言 jqueryで 表 現
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"> var slist = ""; $.each($.browser,function(i,value){ slist += i + " : " + value + " n"; $("#jstext").text(slist); </head> <body><pre> <div id="jstext"> </pre></body> </html> ブラウザの 配 列 を 走 査 jstextにテキストを 入 れる サポートブラウザ 一 覧 を 表 示
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("#jstext").append($.fn.jquery); </head> <body> <div id="jstext">jquery : </div> </body> </html> jqueryの バージョン 表 示
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("p").css("font-size", "20"); $("#p1").css("border", "1px solid gray"); $("#p2").css("color", "red"); }) </head><body> <p id="p1">ハローjquery</p> <p id="p2">ハローjquery</p> </body></html> Pタグ 指 定 IDがp2を 指 定 CSS 指 定
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <link rel="stylesheet" type="text/css" href="css/style.css" /> $("#navi li").mouseover(function () { $(this).css("background-color","orange"); $("#navi li").mouseout(function () { $(this).css("background-color","#666"); </head><body> <div id="navi"> <ul> <li>javascript</li> <li>jquery</li> <li>sample</li> </ul></div></body></html> IDのnavi 内 の Liタグを 指 定 CSS 置 換
<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.js"/> クリックイベントのハンドラ $("#btn1").click(function(){ alert("clicked"); }) }) </head> <body> <input id="btn1" type="button" value="ボタン" /> </body> </html> イベント 処 理
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <style> div { width:100px; display:none; height:100px; float:left; background:#f00; } </style> $("#btn1").click(function(){ $("div:hidden:first").fadein("slow"); }) </head><body> <input id="btn1" type="button" value="button" /> <div>1</div><div>2</div><div>3</div> </body></html> DIVタグのHIDDEN 属 性 を 持 っている 最 初 の 要 素 フェードイン 表 示 エフェクト
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("#btn1").click(function(){ $.get("lesson01.html",{}, function(data){ $("#txt1").text(data).wrap("<pre></pre>"); }) </head><body> <input id="btn1" type="button" value="button" /> <div id="txt1"/> </body></html> Ajax 通 信 を 指 定 方 式 はGET 引 数 も 指 定 可 能 Ajax 通 信
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("div").css("border", "1px solid gray"); $("#btn1").click(function(){ $.ajax({ url: "lesson01.html", method: "get", beforesend: function(){ $("#txt1").before("<p>pre</p>");}, success: function(data){ $("#txt1").text(data).wrap("<pre><p id='txt2'></p></pre>");}, complete: function(){ $("#txt1").after("<p>post</p>");} </head><body> <input id="btn1" type="button" value="button" /> <div id="txt1"/> </body></html> 複 雑 なAjax 通 信 を 行 う 場 合 には ajaxメソッドを 各 種 イベントのハンドラを 指 定 することが 可 能 Ajax 通 信 イベント
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("#btn1").click(function(){ $.getjson("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + $("#txt1").attr("value") + "&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("<img/>").attr("src", item.media.m).appendto("#images"); </head><body> <input id="txt1" type="text" width="50" /> <input id="btn1" type="button" value="button" /> <div id="images" /> </body></html> JSONP クロスドメイン
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $("#btn1").click(function(){ $("#btn1").animate({ width: "70%", opacity: 0.4, marginleft: "0.6in", fontsize: "3em", borderwidth: "10px" }, 1500 ); </head><body> <input id="btn1" type="button" value="button" /> <div id="images" /> </body></html> アニメーション
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <script type="text/javascript" src="js/jquery.jqzoom1.0.1.js"> <link rel="stylesheet" type="text/css" href="css/jqzoom.css" /> $(".jqzoom").jqzoom(); </head><body> <a href="kawasakigreen.jpg" class="jqzoom" title="motorcycle"> <img src="kawasakigreen_small.jpg" width="200" height="150"/> </a> </body></html> ズーム プラグイン JQZoom http://www.mind-projects.it/projects/jqzoom/
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <script type="text/javascript" src="js/jquery.superbox.js"> <link rel="stylesheet" type="text/css" href="css/jquery.superbox.css"/> $.superbox(); </head><body> <a href="kawasakigreen_small.jpg" rel="superbox[image]">superbox</a> </body></html> 画 像 ポップアップ 表 示 jquery SuperBox! http://www.pierrebertet.net/projects/jquery_superbox/
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <script type="text/javascript" src="js/jquery.qtip-1.0.0-beta4.js"> $("a").qtip({ content: "jqueryは JavaScriptライブラリの 一 種 です ", show: "mouseover", hide: "mouseout", style: { border: { width: 5, radius: 10 }, padding: 10, textalign: 'center', tip: true, name: 'cream'} ツールチップ </head><body> <p>こんにちは <a>iquery</a>と 申 します </p> </body></html> qtip http://craigsworks.com/projects/qtip/
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <script type="text/javascript" src="js/jquery-ui- 1.7.1.custom.min.js"> <link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" /> $("#tabs").tabs(); </head><body> <div id="tabs"> <ul> <li><a href="#tabs-1">リンゴ</a></li> <li><a href="#tabs-2">ゴリラ</a></li> <li><a href="#tabs-3">ラッパ</a></li> </ul> <div id="tabs-1"><p>ああああああ</p></div> <div id="tabs-2"><p>いいいいいい</p></div> <div id="tabs-3"><p>うううううう</p></div> </div> </body></html> jquery UI http://jqueryui.com/demos/tabs/ jquery UI タブ
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> $.fn.sample = function() { alert(this.text()) ; return this ; }; 独 自 に 関 数 を 定 義 $("#btn1").click(function(){ $("#txt1").sample(); </head><body> <div id="txt1">div 情 報 です </div> <input id="btn1" type="button" value="button"/> </body></html> すぐに 使 える jquery ちょっと 拡 張
<html><head> <script type="text/javascript" src="js/jquery-1.3.2.js"> <script type="text/javascript" src="js/jquery-plugin-test.js"> $("#btn1").click(function(){ $("#txt1").sample("hello").sample("plugin"); </head><body> <div id="txt1">div 情 報 です </div> <input id="btn1" type="button" value="button"/> </body></html> 独 自 に 定 義 した 関 数 の 戻 り 値 がjQuery 型 のため 関 数 の 連 鎖 表 記 が 可 能 (function($) { $.fn.sample = function(param) { alert(this.text()+" : " +param) ; return this ; }; })(jquery); 戻 り 値 の 型 は jqueryで 指 定 これでプラグイン 開 発 OK jquery メソッドチェーン
きょうからあなたもjQueryな 人
jqueryを 分 かった 気 になった? はい いいえ