Download to read offline
JQuery入門
- 1. JavaScriptとは Webページに動きをつけるのに用いる言語 • 色を変える • アニメーションさせる •クリックしたら・・・ • マウスを乗せたら・・・ • どのくらい画面がスクロールされたら・・・
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. jQueryの特徴 • JavaScriptで書かれた動作を簡単に実装できる • ブラウザごとの差が少ない •読みやすく、メンテナンスがしやすい • 表示が遅くなることがある メリット デメリット
- 10.
- 11.
- 12.
- 13. <script src=“js/jquery-3.2.1.min.js”></script> css js Index.html jquery-3.2.1.min.js （１）jQueryライブラリをダウンロードしjsフォルダに入れます。 （２） それをHTML内で読み込みます。
- 14.
- 15.
- 16.
- 17. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <pid="start">jQueryを使ってみましょう</p> <script src="js/jquery-3.2.1.min.js"></script> <script> $('#start').css('color', 'red'); </script> </body> </html> （例）文字を赤くするjQuery jQuery本体 jQueryの処理
- 18.
- 19.
- 20. jQueryの文法 セレクタ：cssのセレクタと同義語です windowやthisなどcssで扱わないものも あります メソッド： 動作のことです 引数： 入れる物です 空の時もあります ;１つの命令が終わったら;をつける $は「jQuery」の省略形 $(セレクタ).メソッド(引数);
- 21.
- 22.
- 23. $(セレクタ).メソッド(引数); 何かとってきて （HTMLの要素を取得して） それに何かする $(‘#pagetop’) //id属性がpagetopの要素 $(‘.hidden’) //class属性がhiddenの要素 $(‘div’)//全てのdiv要素 $(‘.hidden p’) //class属性がhiddenの子要素のp = ＊基本的にCSSのセレクタと同じ （取得したもの jQueryオブジェクト） $(セレクタ)の例 ＜セレクタの書き方＞
- 24.
- 25. $(セレクタ).メソッド(引数); 何かとってきて （HTMLの要素を取得して） それに何かする .css(‘color’, ‘red’); //文字色を赤くする .fadeOut(‘slow’);//ゆっくりフェードアウトする .animate({scrollTop:0},500); //scrollTop:0まで500ミリ秒で動く .toggleClass(‘hidden’); //classをつけたり消したりする .メソッド(引数);の例 ＊「jQuery日本語リファレンス」のサイトなどで確認しましょう ＜メソッドの書き方＞