![例えば
前回の色を変える奴
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.addEventListener("click", function() {
profile.style.backgroundColor = colors[++i % 4];
});](https://image.slidesharecdn.com/webjavascript20136-130629105542-phpapp01/85/Web-JavaScript2013-6-12-320.jpg)
![例えば
前回の色を変える奴
var colors = ["red", "blue", "yellow", "green"],
i = 0;
profile.click(function() {
profile.css("background-color", colors[++i % 4]);
});](https://image.slidesharecdn.com/webjavascript20136-130629105542-phpapp01/85/Web-JavaScript2013-6-13-320.jpg)
Webページで学ぶJavaScript2013 第6回
- 5. 今日の予定 ● 前回はDOMの操作をJavaScriptでやりました ● 今回は、もっと簡単にDOM操作をするために 「jQuery」というライブラリを使います ● jQuery使ってサイトとか作ってみましょか ● 次回からどうするか、特に決まってないです・・・
- 7. jQuery ● こ↑れ↓ ○ http://jquery.com/ ● めちゃくちゃ使われているJavaScriptライブラリ ● 要は、これを使えばJavaScriptを使う際に色々 便利なことができるようになる
- 8. 例えば 前回のこれ // プロフィール要素を取得してみよう var profile = document.getElementById("profile"); console.log(profile); // プロフィールのCSSを更新してみよう profile.style.fontSize = "100px";
- 9. 例えば jQueryだともっと簡単にかけるよ！ // プロフィール要素を取得してみよう var profile = $("#profile"); console.log(profile); // プロフィールのCSSを更新してみよう profile.css('font-size', 100);
- 10. 例えば jQueryだともっと簡単にかけるよ！ // プロフィール要素を取得してみよう var profile = $("#profile"); console.log(profile); CSSのセレクタが使える！！
- 12. 例えば 前回の色を変える奴 var colors = ["red", "blue", "yellow", "green"], i = 0; profile.addEventListener("click", function() { profile.style.backgroundColor = colors[++i % 4]; });
- 13. 例えば 前回の色を変える奴 var colors = ["red", "blue", "yellow", "green"], i = 0; profile.click(function() { profile.css("background-color", colors[++i % 4]); });
- 14. 要素の取得 ● $("#id") ● $(".class") ● $("tag") ○ $("div"), $("p"), $("body") ● $("parent").find("children") ● $("something").each(function() { $(this) // <=要素を一つずつ操作 }) ● etc...
- 15. 要素の操作 ● $("#hoge").fadeIn() ○ アニメーションも作れる ● $(".fuga").css("propaty", value) ● $("p").width(100).slideDown() ○ ドットでつなげて複数の操作をすることもできます（メソッ ドチェーン）
- 17. 書いてみよう ● 適当なHTMLファイルを書いて、scriptから ● http://code.jquery.com/jquery-2.0.2.min.js ● これを読み込んで使おう $(function() { // ここにコードを書くといいよ });