2011年11月27日日曜日

めんどくさいjQueryを研究する

もうjQueryって色んな括弧がごちゃごちゃしてて見ていて腹立つよ。 しかし、色んなブラウザの違いなども吸収してるらしいし、とりあえず使えるところはjQuery使った方がいい気がするし、そもそもDOMとかって大体分かるけどその使い方は全然勉強してないから、何しろjQuery勉強しないといけないと思ってるんです。最近WEBサービスつくるとき一番つまずくのがjQueryなもんで、一度研究して頭を整理しておかないといつまでたっても、遅々として先に進まないんだよね。いつも止まって適当に調べてなんとか出来たら次に行くっていうやり方が結局のところ最も非効率的なやり方だと思うんです。

さて、はっきりいってjQueryでAjaxとかやってるわりには、全然基本すらわかってないので、基本から始めたいと思う。まずはjQeryで#homuに"homuhomu"とインプットしてみよう。ちなみに、このブログは最初からjQueryを読み込んでいたはず。あと、jQueryを学ぶならやはりきっとここは外せないだろう。『jQuery日本語リファレンス』だ。

↓これがdiv#homuです

homuhomuhomuhomuhomuhomuhomuhomu



empty

<div id="homu"><p>homuhomuhomuhomuhomuhomuhomuhomu</p></div>
<script type="text/javascript">
$('#homu').empty();
</script>

ちょっと最初に宣言したことと違うことをしているが、#homuのhomuhomu...という文字列をjQueryを使って削除した様だ。ところでブログに書くに当たりそもそもDOMとは何を意味するのかについて念のため確認したい。
文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。
何言ってるのか分からん。文書を構成する個々のタグというかタグで構成される要素のことをDOMっていうのかなと思ったんだけどDOMはタグで文章を作ること自体をいうようだな。まあDOMの詳細は置いておいて、何しろDOMの構成要素を$('#homu')といった形で表すのだ。そして要素の選択方法についてはSelectors/API/jQueryに書いてあるようだ。


さてそれでは、今度は最初に宣言したとおり、#homuに"homuhomu!!"をインプットしてみよう。そういう操作はここに書いてあるようだ。

append

<script type="text/javascript">
$('#homu').append("<b>homuhomu!!</b>")
</script>

これで太字でhomuhomu!!がインプットされた。なんて簡単なんだ。いったい俺は何が分からないのだ。今度は#homuにスタイルを設定してみよう。#homuの背景を青にして文字の色を白にしてみよう。

css

<script type="text/javascript">
$('#homu').css({backgroundColor:"#00f",color:"#fff",padding:"3px"});
</script>

これで、#homuの背景が青くなり、文字が白くなり、paddingが3pxになった。なんでjQueryがめんどくさいのかが少し分かった。HTMLとかCSSとかの構文とほぼ同じであるにも関わらず、微妙にjQuery特有の表記ルールになっている箇所が多いからだ。どこが間違ってるか分からないんだよ。 とはいえ、やっぱり結構簡単だな。

今度は、eachというやつを覚えよう。これはjQuery的forみたいなやつや。該当する要素全てに対してコードを実行したいときに使うものだ。下にdiv#homu2をもう1個つくって、先程作成したdiv#homuと共に、class="hoge"を設定しておこう。

↓これがdiv#homu2です
ホムホムホムホム


each

<script type="text/javascript">
$('div.hoge').each(function(idx,ele){
    $(ele).css({backgroundColor:"red",color:"#fcc"});
});
</script>
これでdiv.hogeが全て背景赤、文字白になったのだ。functionのidx,eleはなしでもOKだ。idxは0から始まるインデックスになっており、eleというのは該当する要素そのものだ。引数名は適当な名前を設定すればよし。ちなみに、eleがエレメントそのものなので、$(ele)ではなく、$(this)でも同じことになる。

さて、eachは配列に対して使うこともできる。
<script type="text/javascript">
bookList = [["4774142298", "http://ecx.images-amazon.com/images/I/51KkpibMKqL._SL75_.jpg", "Python\u30b9\u30bf\u30fc\u30c8\u30d6\u30c3\u30af", "\u8fbb \u771f\u543e", "\u6280\u8853\u8a55\u8ad6\u793e"], ["4048686291", "http://ecx.images-amazon.com/images/I/51wSTTIQtgL._SL75_.jpg", "\u30a8\u30ad\u30b9\u30d1\u30fc\u30c8Python\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0", "Tarek Ziade", "\u30a2\u30b9\u30ad\u30fc\u30fb\u30e1\u30c7\u30a3\u30a2\u30ef\u30fc\u30af\u30b9"], ["4797353953", "http://ecx.images-amazon.com/images/I/41lFEOVCepL._SL75_.jpg", "\u307f\u3093\u306a\u306ePython \u6539\u8a02\u7248", "\u67f4\u7530 \u6df3", "\u30bd\u30d5\u30c8\u30d0\u30f3\u30af\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6"], ["4798026557", "http://ecx.images-amazon.com/images/I/41aeC4ZauwL._SL75_.jpg", "Python\u5165\u9580\u20152&amp;3\u5bfe\u5fdc", "\u7d30\u7530 \u8b19\u4e8c", "\u79c0\u548c\u30b7\u30b9\u30c6\u30e0"], ["479733665X", "http://ecx.images-amazon.com/images/I/416wPnQ9tWL._SL75_.jpg", "\u307f\u3093\u306a\u306ePython", "\u67f4\u7530 \u6df3", "\u30bd\u30d5\u30c8\u30d0\u30f3\u30af\u30af\u30ea\u30a8\u30a4\u30c6\u30a3\u30d6"], ["4873113938", "http://ecx.images-amazon.com/images/I/41vF73wVaAL._SL75_.jpg", "\u521d\u3081\u3066\u306ePython \u7b2c3\u7248", "Mark Lutz", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30b8\u30e3\u30d1\u30f3"], ["4873112761", "http://ecx.images-amazon.com/images/I/41XWUXpgeuL._SL75_.jpg", "Python \u30af\u30c3\u30af\u30d6\u30c3\u30af \u7b2c2\u7248", "Alex Martelli", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30fb\u30b8\u30e3\u30d1\u30f3"], ["4774138053", "http://ecx.images-amazon.com/images/I/51WeqtvvDuL._SL75_.jpg", "Python \u30dd\u30b1\u30c3\u30c8\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9 (Pocket Reference)", "\u67cf\u91ce \u96c4\u592a", "\u6280\u8853\u8a55\u8ad6\u793e"], ["487311442X", "http://ecx.images-amazon.com/images/I/51PD65oIzgL._SL75_.jpg", "Python\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb \u7b2c2\u7248", "Guido van Rossum", "\u30aa\u30e9\u30a4\u30ea\u30fc\u30b8\u30e3\u30d1\u30f3"], ["4048704397", "http://ecx.images-amazon.com/images/I/51e2zr5LubL._SL75_.jpg", "Python\u30b2\u30fc\u30e0\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u5165\u9580", "Will McGugan", "\u30a2\u30b9\u30ad\u30fc\u30fb\u30e1\u30c7\u30a3\u30a2\u30ef\u30fc\u30af\u30b9"]];
$('#homu2').empty();
$('#homu2').css({backgroundColor:"white"});
$.each(bookList,function(idx,book){
    $('#homu2').append('<img src="' + book[1] + '" />');
});
</script>

このように配列に対してeachをかけると便利に使えるのだ。booklistに格納しているのは、amazonから取り出したデータです。booklistの各要素がbookであり、bookも配列だから、book[1]などとやって画像のURLを取り出しているのだ。 ということで、jQueryは難しいわけではなく、細かいルールがHTMLとかCSSと同じようでいて同じではないというのが最大のややこしい点であることがわかった。

0 件のコメント:

コメントを投稿