sato-shicss操作イベント処理エフェクト非同期通信（ajax）...

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">$(function(){

$("#jstext").text("ハローjQuery");});

</script></head><body>

<div id="jstext"></body></html>

jQueryで表現

HTMLとスクリプトをすべて

読み込み完了後に実行される関数の宣言

<html><head>



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>



$("#jstext").append($.fn.jquery);});


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


$("#btn1").click(function(){alert("clicked");

})})


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

引数も指定可能。


$("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メソッドを。

各種イベントのハンドラを指定することが可能。


$("#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

クロスドメイン


$("#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/

http://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/

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/

http://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/

http://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で指定。

これでプラグイン開発ＯＫ。

きょうからあなたもjQueryな人♪

jQueryを分かった気になった？

はい

いいえ

sato-shicss操作 イベント処理 エフェクト 非同期通信（ajax）...

Documents

sato-shicss操作イベント処理エフェクト非同期通信（ajax）...