modest09 j query事始め
TRANSCRIPT
![Page 1: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/1.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
jQuery事始め
by ABE Hi rok i aka h ATrayf lood
![Page 2: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/2.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
自己紹介・名前:アベヒロキ (@hATrayflood)・職業:自宅サーバ管理者・URL:http://rayflood.org/diary/・住所:長野市 地元:東部町
by ABE Hi rok i aka h ATrayf lood
![Page 3: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/3.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
まずはby ABE Hi rok i aka h ATrayf lood
![Page 4: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/4.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
Webページ作ったことない人?
by ABE Hi rok i aka h ATrayf lood
![Page 5: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/5.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
HTMLやCSSJavaScriptはまあまあ?
by ABE Hi rok i aka h ATrayf lood
![Page 6: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/6.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
jQueryはもちろんprototypeやGWTなんでもござれ?
by ABE Hi rok i aka h ATrayf lood
![Page 7: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/7.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
jQuery?by ABE Hi rok i aka h ATrayf lood
![Page 8: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/8.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
http://jquery.com/
by ABE Hi rok i aka h ATrayf lood
![Page 9: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/9.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
作った人by ABE Hi rok i aka h ATrayf lood
![Page 10: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/10.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
John Resig
by ABE Hi rok i aka h ATrayf lood
![Page 11: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/11.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
Secrets of theJavaScript Ninjahttp://ejohn.org/
by ABE Hi rok i aka h ATrayf lood
![Page 12: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/12.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
日本語リファレンスhttp://semooh.jp/jquery/
by ABE Hi rok i aka h ATrayf lood
![Page 13: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/13.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
主にDOM操作とajaxのライブラリ
by ABE Hi rok i aka h ATrayf lood
![Page 14: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/14.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
つまりby ABE Hi rok i aka h ATrayf lood
![Page 15: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/15.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
動きのあるWebページを簡単に作れます
by ABE Hi rok i aka h ATrayf lood
![Page 16: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/16.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
デモhttp://rfgaepytest.appspot.com/
by ABE Hi rok i aka h ATrayf lood
![Page 17: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/17.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
コード例by ABE Hi rok i aka h ATrayf lood
![Page 18: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/18.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・素のDOM操作 var elem = document.getElementById("hoge");elem.setAttribute("width", "200");elem.setAttribute("style", "display:block;");
by ABE Hi rok i aka h ATrayf lood
![Page 19: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/19.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・jQuery $("#hoge").attr("width", "200");$("#hoge").css("display", "block");
by ABE Hi rok i aka h ATrayf lood
![Page 20: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/20.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・1行でも書ける $("#hoge").attr("width", "200").css("display", "block");
by ABE Hi rok i aka h ATrayf lood
![Page 21: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/21.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・素のDOM操作では複数要素の操作が大変 var elms = document.getElementsByTagName("a");for(var i = 0; i < elms.length; i++){ elms[i].setAttribute("target", "_blank");}
by ABE Hi rok i aka h ATrayf lood
![Page 22: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/22.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・jQueryなら1行 $("a").attr("target", "_blank");
by ABE Hi rok i aka h ATrayf lood
![Page 23: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/23.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・eachで複雑な処理も可能 $("a").each(function(){ $(this).attr("target", "_blank"); // その他いろいろな処理});
by ABE Hi rok i aka h ATrayf lood
![Page 24: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/24.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・classでも要素指定可能 $(".fuga").css("display", "none");
by ABE Hi rok i aka h ATrayf lood
![Page 25: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/25.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・要素の選択ルールはCSSと同じ $("form > input[name=\"url\"]").attr("disabled", true);
by ABE Hi rok i aka h ATrayf lood
![Page 26: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/26.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・独自の便利なセレクタも $("#honge tr:odd").css("background-color", "lightcyan");$("#honge tr:even").css("background-color", "lightgreen");
by ABE Hi rok i aka h ATrayf lood
![Page 27: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/27.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・ajaxでjson取得 var xhr = new XMLHttpRequest();xhr.open("GET", "http://hoge/json?id=99", "true");xhr.onload = function(){ eval("(" + xhr.responseText + ")"); alert(data); // jsonデータをfugafugaする…};xhr.send(null);
by ABE Hi rok i aka h ATrayf lood
![Page 28: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/28.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・取得からパースも込みで可能 $.getJSON("http://hoge/json", {id:99}, function(json){ alert(json.data); // jsonデータをfugafugaする…});
by ABE Hi rok i aka h ATrayf lood
![Page 29: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/29.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・POSTもできる $.post("http://hoge/post", formdata, function(){ // POSTしたあとする処理…});
by ABE Hi rok i aka h ATrayf lood
![Page 30: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/30.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
他にもいろいろリファレンス見てみてね~
by ABE Hi rok i aka h ATrayf lood
![Page 31: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/31.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
その他by ABE Hi rok i aka h ATrayf lood
![Page 32: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/32.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・ヒント1UI周りはjQuery UIが全面的に便利http://jqueryui.com/
by ABE Hi rok i aka h ATrayf lood
![Page 33: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/33.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
今まで苦労して作った画面を返せとかいいたくなります。多分
by ABE Hi rok i aka h ATrayf lood
![Page 34: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/34.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・ヒント2テーブルも作れます見栄えがすばらしいhttp://flexigrid.info/
by ABE Hi rok i aka h ATrayf lood
![Page 35: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/35.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
※ただし、ソートやページ割りが やや面倒(都度リクエスト飛ばす)
by ABE Hi rok i aka h ATrayf lood
![Page 36: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/36.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・ヒント3ajaxをもっと簡単かつ詳細に制御できるhttp://jquery.malsup.com/form/
by ABE Hi rok i aka h ATrayf lood
![Page 37: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/37.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
本体に組み込んでもいいんじゃないか?くらい
by ABE Hi rok i aka h ATrayf lood
![Page 38: Modest09 j query事始め](https://reader034.vdocuments.mx/reader034/viewer/2022052623/559b5d441a28abd27f8b4809/html5/thumbnails/38.jpg)
2011/03/18 Mozi l l a & HTML5+α @福岡
・リンク集twitter @hATrayfloodhttp://twitter.com/hATrayfloodslideshare hATrayfloodhttp://www.slideshare.net/hATrayfloodMozilla & HTML5+α @福岡https://dev.mozilla.jp/events/workshop09/
by ABE Hi rok i aka h ATrayf lood