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"></script>
<script type="text/javascript">function init(){
document.getElementById("jstext").innerHTML = "ハローJavaScript";}
</script></head><body onload="init()">
<div id="jstext"></body></html>
べたなJavaScript
BODYブロックの読み込み
完了後に実行する関数を指定している。
<html><head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">$(function(){
$("#jstext").text("ハローjQuery");});
</script></head><body>
<div id="jstext"></body></html>
jQueryで表現
HTMLとスクリプトをすべて
読み込み完了後に実行される関数の宣言
<html><head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">$(function(){
var slist = "";$.each($.browser,function(i,value){
slist += i + " : " + value + "¥n";});$("#jstext").text(slist);
});</script>
</head><body><pre>
<div id="jstext"></pre></body></html>
サポートブラウザ一覧を表示
ブラウザの配列を走査。
jstextにテキストを入れる
<html><head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">$(function(){
$("#jstext").append($.fn.jquery);});
</script></head><body>
<div id="jstext">jQuery : </div></body></html>
jQueryのバージョン表示
<html><head><script type="text/javascript"
src="js/jquery-1.3.2.js"></script><script type="text/javascript">$(function(){
$("p").css("font-size", "20");$("#p1").css("border", "1px solid gray");$("#p2").css("color", "red");
})</script>
</head><body>
<p id="p1">ハローjQuery</p><p id="p2">ハローjQuery</p>
</body></html>
CSS指定
Pタグ指定
IDがp2を指定
<html><head><script type="text/javascript"
src="js/jquery-1.3.2.js"></script><link rel="stylesheet"
type="text/css" href="css/style.css" /><script type="text/javascript">
$(function(){$("#navi li").mouseover(function () {
$(this).css("background-color","orange");});$("#navi li").mouseout(function () {
$(this).css("background-color","#666");});});
</script></head><body><div id="navi">
<ul><li>JavaScript</li><li>jQuery</li><li>Sample</li>
</ul></div></body></html>
CSS置換
IDのnavi内のLiタグを指定
<html><head>
<script type="text/javascript" src="js/jquery-1.3.2.js"/>
<script type="text/javascript">$(function(){
$("#btn1").click(function(){alert("clicked");
})})
</script></head><body>
<input id="btn1" type="button" value="ボタン" /></body></html>
イベント処理
クリックイベントのハンドラ
<html><head><script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style>div { width:100px; display:none;
height:100px; float:left; background:#f00; }
</style><script type="text/javascript">
$(function(){$("#btn1").click(function(){
$("div:hidden:first").fadeIn("slow");})
});</script>
</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"></script><script type="text/javascript">$(function(){
$("#btn1").click(function(){$.get("lesson01.html",{},
function(data){$("#txt1").text(data).wrap("<pre></pre>");
});})
});</script>
</head><body><input id="btn1" type="button" value="BUTTON" /><div id="txt1"/>
</body></html>
Ajax通信
Ajax通信を指定。方式はGET。
引数も指定可能。
<html><head><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript">$(function(){
$("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>");}});
});});</script>
</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"></script><script type="text/javascript">$(function(){
$("#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");
});});
});});</script>
</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"></script><script type="text/javascript">$(function(){
$("#btn1").click(function(){$("#btn1").animate({
width: "70%",opacity: 0.4,marginLeft: "0.6in",fontSize: "3em", borderWidth: "10px"
}, 1500 );});
});</script>
</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><script type="text/javascript" src="js/jquery.jqzoom1.0.1.js"></script><link rel="stylesheet" type="text/css" href="css/jqzoom.css" /><script type="text/javascript">$(function(){
$(".jqzoom").jqzoom();});</script>
</head><body><a href="kawasakigreen.jpg" class="jqzoom" title="motorcycle">
<img src="kawasakigreen_small.jpg" width="200" height="150"/></a>
</body></html>
ズームプラグイン
JQZoomhttp://www.mind-projects.it/projects/jqzoom/
<html><head><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript" src="js/jquery.superbox.js"></script><link rel="stylesheet" type="text/css" href="css/jquery.superbox.css"/><script type="text/javascript">$(function(){
$.superbox();});</script>
</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><script type="text/javascript" src="js/jquery.qtip-1.0.0-beta4.js"></script><script type="text/javascript">$(function(){
$("a").qtip({
content: "jQueryは、JavaScriptライブラリの一種です。",show: "mouseover",hide: "mouseout",style: { border: { width: 5, radius: 10 },padding: 10, textAlign: 'center',tip: true, name: 'cream'}
});});</script>
</head><body>
<p>こんにちは、<a>iQuery</a>と申します。</p></body></html>
ツールチップ
qTiphttp://craigsworks.com/projects/qtip/
<html><head><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript" src="js/jquery-ui-
1.7.1.custom.min.js"></script><link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css"
rel="stylesheet" /><script type="text/javascript">$(function(){
$("#tabs").tabs();});</script>
</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
タブ
jQuery UIhttp://jqueryui.com/demos/tabs/
<html><head><script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript">$.fn.sample = function() {
alert(this.text()) ; return this ;};
$(function(){$("#btn1").click(function(){
$("#txt1").sample();});
});</script>
</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><script type="text/javascript" src="js/jquery-plugin-test.js"></script><script type="text/javascript">$(function(){
$("#btn1").click(function(){$("#txt1").sample("Hello").sample("Plugin");
});});</script>
</head><body>
<div id="txt1">DIV情報です。</div><input id="btn1" type="button" value="BUTTON"/></body></html>
(function($) {$.fn.sample = function(param) {
alert(this.text()+" : " +param) ; return this ;};
})(jQuery); jQuery
メソッドチェーン
独自に定義した関数の戻り値がjQuery型のため関数の連鎖表記が可能。
戻り値の型は、jQueryで指定。
これでプラグイン開発OK。
きょうからあなたもjQueryな人♪
jQueryを分かった気になった?
はい
いいえ