modest09 j query事始め

2011/03/18 Mozi l l a & HTML5+α @福岡

jQuery事始め

by ABE Hi rok i aka h ATrayf lood


自己紹介・名前：アベヒロキ (@hATrayflood)・職業：自宅サーバ管理者・URL：http://rayflood.org/diary/・住所：長野市地元：東部町



まずはby ABE Hi rok i aka h ATrayf lood


Webページ作ったことない人？



HTMLやCSSJavaScriptはまあまあ？



jQueryはもちろんprototypeやGWTなんでもござれ？



jQuery?by ABE Hi rok i aka h ATrayf lood


http://jquery.com/



作った人by ABE Hi rok i aka h ATrayf lood


John Resig



Secrets of theJavaScript Ninjahttp://ejohn.org/



日本語リファレンスhttp://semooh.jp/jquery/



主にDOM操作とajaxのライブラリ



つまりby ABE Hi rok i aka h ATrayf lood


動きのあるWebページを簡単に作れます



デモhttp://rfgaepytest.appspot.com/



コード例by ABE Hi rok i aka h ATrayf lood


・素のDOM操作　var elem = document.getElementById("hoge");elem.setAttribute("width", "200");elem.setAttribute("style", "display:block;");



・jQuery　$("#hoge").attr("width", "200");$("#hoge").css("display", "block");



・1行でも書ける　$("#hoge").attr("width", "200").css("display", "block");



・素のDOM操作では複数要素の操作が大変　var elms = document.getElementsByTagName("a");for(var i = 0; i < elms.length; i++){ elms[i].setAttribute("target", "_blank");}



・jQueryなら1行　$("a").attr("target", "_blank");



・eachで複雑な処理も可能　$("a").each(function(){ $(this).attr("target", "_blank"); // その他いろいろな処理});



・classでも要素指定可能　$(".fuga").css("display", "none");



・要素の選択ルールはCSSと同じ　$("form > input[name=\"url\"]").attr("disabled", true);



・独自の便利なセレクタも　$("#honge tr:odd").css("background-color", "lightcyan");$("#honge tr:even").css("background-color", "lightgreen");



・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);



・取得からパースも込みで可能　$.getJSON("http://hoge/json", {id:99}, function(json){ alert(json.data); // jsonデータをfugafugaする…});



・POSTもできる　$.post("http://hoge/post", formdata, function(){ // POSTしたあとする処理…});



他にもいろいろリファレンス見てみてね～



その他by ABE Hi rok i aka h ATrayf lood


・ヒント1UI周りはjQuery UIが全面的に便利http://jqueryui.com/



今まで苦労して作った画面を返せとかいいたくなります。多分



・ヒント2テーブルも作れます見栄えがすばらしいhttp://flexigrid.info/



※ただし、ソートやページ割りが　やや面倒(都度リクエスト飛ばす)



・ヒント3ajaxをもっと簡単かつ詳細に制御できるhttp://jquery.malsup.com/form/



本体に組み込んでもいいんじゃないか？くらい



・リンク集twitter @hATrayfloodhttp://twitter.com/hATrayfloodslideshare hATrayfloodhttp://www.slideshare.net/hATrayfloodMozilla & HTML5+α @福岡https://dev.mozilla.jp/events/workshop09/


modest09 j query事始め

Technology