jQuery日本語リファレンスを使って実際にjQueryを書いてみよう
jQuery日本語リファレンス
jQuery日本語リファレンス
今回からjQuery日本語リファレンスを使って、実際にjQueryで処理を書いてみることにします。
jQuery日本語リファレンスはあなたが日本人でjQueryを使うなら、このサイトはおそらく最もお世話になるであろうサイトです。
jQueryAPIリストを大きく分ける
jQueryのAPIリストを見ると、関数のようなものが大量にあり、まず何からしていいのかが分かりません。そこでAPIリストを大きく分けてみることにします。
APIをざっくり分けるとこうなる
| Selectors(要素の選択) | #id、element、.class、*など。 | $("#hoge").css("color", "red"); *idがhogeのテキストを赤くする |
|---|---|---|
| Attributes(属性) | attr(name)、attr(properties)、attr(key,fn)、removeAttr(name) | var img = $(“img”).attr(“src”); *imgタグのsrcを取得しています |
| Traversing(要素を選択したり、孫ザをチェックしたり) | css(name)、css(properties)、css(name, value) | var img = $(“img”).attr(“src”); *imgタグのsrcを取得しています |
| Manipulation(挿入) | append(content)、appendTo(content)、prepend(content)、prependTo(content) | |
| CSS(CSSの変更、見た目に関すること) | append(content)、appendTo(content)、prepend(content)、prependTo(content) | $("#hoge").css("color", "red"); *idがhogeのテキストを赤くする |
| Events(マウスやロードなどユーザーの動作に合わせて発動) | ready(fn)、click()、blur()、focus()、load()、submit()、hover(over, out)、toggle() | |
| Effects(エフェクト アニメーション効果など) | show()、hide()、fadeIn()、fadeOut、animate() | |
| *1Ajax(HTTP通信など) | load()、jQuery.get()、jQuery.removeData(elem) |
*1:個人的にはAPIのうち Ajaxについてはあまり高頻度に使ってはいませんがページを特定の場所に読み込んだり、JSON形式のデータの通信を行ったり出来ます。
使い方にもよりますが、RSSのパーツを読み込んだり、ブログパーツのような形で部分的にデータを読み込ませることが可能です。
jQueryの基本的な使い方
jQueryで何かしようと思った場合(普通のjavascriptでも)自分のやりたいことを日本語で書いて、それをAPIに置き換えればいいんです。
何をどうしたらどんな風にしたいかってね。
下記のように毎回表で置き換えると分かりやすいかもしれません。
『何を』はSelectors、『どうしたら』はEvents、『どんな風に』はEffectsといった具合に。
正確にはもっとたくさんあるんだけど、初級レベルならこれだけで何でも作れます。
| 何を(Selectors) | どうしたら(Events) | 何がSelectors | どんな風に(Effects) |
|---|---|---|---|
| pタグを | クリックしたら | クリックされたpタグ自身が | フェードアウトする |
| $(‘p’)*2 | click(fn)fnとはfunctionのこと | $(this)自分自身のこと | fadeOut([speed], [callback]) |
*2$(‘p’):とはjQuery(‘p’)の省略系。
Selectorsなら、jQuery日本語リファレンス Selectorsの欄から自分のたりたいことにマッチしたAPIを探せばいいんです。ただそれだけ。
ではこれはどう書けばいいでしょうか
赤字の～したらはfunction(){}として置き換えられます。
先ほどの例をjQueryで書いてみよう
書き出しはこれ。ready(function(){この中に処理を書く})と、DOM要素全てが読み込まれてから処理が開始されるんでしたね。
もし、</body>の直前に書くことが可能でしたらそれでもかまいません。
jQuery書き出し
<script>
$(document).ready(function(){
});
</script>
クリックしたら、クリックされたほうの処理はclick()この括弧内に書いていきます
$(document).ready(function(){
$("p").click(function () {
$(this).fadeOut("slow");
});
});
どうですか？簡単でしょう？
慣れていないうちは、このfunction(){}を見ただけで難しく考えてしまいますが、(クリック)したらの『～したら』という接続的な役割をしているものと考えればさほと難しくありませんね。
クリックされた方自体の処理は、click()の中のfunction内に書いていけばいいのです。
基本的な処理の書き方は以上です。後はDOM要素をどのように選択するかさえ掴めれば、大抵の処理は可能になります。
と、いうわけで次回は様々なSelectorsの勉強をしていきたいと思います