ｊQueryのはじめ方

Size: px

Start display at page:

Download "ｊQueryのはじめ方"

なつきよしくに
7 years ago
Views:

1 sato-shi

2 高田馬場で働いています

3 jqueryを分かった気になる

4 About jquery べた書きからお手軽な書き方へブラウザバージョン表示 CSS 操作イベント処理エフェクト非同期通信 (Ajax) クロスドメイン通信 (JSONP) アニメーションプラグイン紹介 (ズーム画像表示ツールチップ) jqquery 拡張 ( 定義メソッドチェーン) まとめ

5 JavaScriptライブラリのひとつ軽量圧縮 19KB 非圧縮 120KB CSS1-3 対応クロスブラウザ IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome プラグインを追加可能公開されているプラグインが豊富自作することも可能 UIライブラリテーマを指定できる今回は jquery を例に進めます

6 プロトタイプベースのOOPスクリプト言語プロトタイプベース:オブジェクト(モノ)とクローン( 複製 ) クラスベース:クラス( 型 )とインスタンス( 実体 ) コアな仕様はECMAScriptとして標準化されているブラウザ間の実装が異なり動作がバラバラ非同期通信を行って部分的に画面を更新できる Ajax( Asynchronous JavaScript + XML ) 多くのブラウザ内で動作する IE,Firefox,Safari,Chrome 開発環境やデバッグ環境が整ってきた統合開発環境 :Eclipse,Aptana, IntelliJ IDEA,Spket IDE デバッグツール:Firebug

7 Firebugで確認が簡単 DOMの中身を確認実際に操作しながら値の変更を確認

8 jquery 関数 (jquery / $) CSSセレクタ : $(expression, context) DOM 生成 : $(html, owner) jqueryオブジェクト : $(elements) 実行 : $(callback) jqueryオブジェクト操作 each(callback) : 全ての要素にコールバック関数を実行する get(index) : DOM Elementを取得する size() : 要素数を返す

9 <html> <head> <script type="text/javascript" src="js/jquery js"> function init(){ document.getelementbyid("jstext").innerhtml = "ハローJavaScript"; } </head> <body onload="init()"> <div id="jstext"> </body> </html> BODYブロックの読み込み完了後に実行する関数を指定しているべたなJavaScript

10 <html> <head> <script type="text/javascript" src="js/jquery js"> $("#jstext").text("ハローjquery"); </head> <body> <div id="jstext"> </body> </html> HTMLとスクリプトをすべて読み込み完了後に実行される関数の宣言 jqueryで表現

11 <html> <head> <script type="text/javascript" src="js/jquery 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にテキストを入れるサポートブラウザ一覧を表示

12 <html> <head> <script type="text/javascript" src="js/jquery js"> $("#jstext").append($.fn.jquery); </head> <body> <div id="jstext">jquery : </div> </body> </html> jqueryのバージョン表示

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

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

15 <html> <head> <script type="text/javascript" src="js/jquery js"/> クリックイベントのハンドラ $("#btn1").click(function(){ alert("clicked"); }) }) </head> <body> <input id="btn1" type="button" value="ボタン" /> </body> </html> イベント処理

16 <html><head> <script type="text/javascript" src="js/jquery 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 属性を持っている最初の要素フェードイン表示エフェクト

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

18 <html><head> <script type="text/javascript" src="js/jquery 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 通信イベント

19 <html><head> <script type="text/javascript" src="js/jquery js"> $("#btn1").click(function(){ $.getjson(" + $("#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 クロスドメイン

20 <html><head> <script type="text/javascript" src="js/jquery 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> アニメーション

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

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

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

24 <html><head> <script type="text/javascript" src="js/jquery js"> <script type="text/javascript" src="js/jquery-ui custom.min.js"> <link type="text/css" href="css/smoothness/jquery-ui 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 jquery UI タブ

25 <html><head> <script type="text/javascript" src="js/jquery 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 ちょっと拡張

26 <html><head> <script type="text/javascript" src="js/jquery 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 メソッドチェーン

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

28 jqueryを分かった気になった? はいいいえ

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html