Recommended
More Related Content
What's hot
What's hot (20)
Similar to JQuery入門
Similar to JQuery入門 (20)
More from sayoko miura
JQuery入門
- 1. JavaScriptとは Webページに動きをつけるのに用いる言語 • 色を変える • アニメーションさせる • クリックしたら・・・ • マウスを乗せたら・・・ • どのくらい画面がスクロールされたら・・・
- 3. 動くサイトを見てみよう！
- 4. 実際に使ってみましょう
- 7. jQueryとは JavaScriptコードを より簡単に記述できるように設計された JavaScriptライブラリ ライブラリというJavaScriptがたくさん詰まったファイルを添付して実装する
- 8. jQueryの特徴 • JavaScriptで書かれた動作を簡単に実装できる • ブラウザごとの差が少ない • 読みやすく、メンテナンスがしやすい • 表示が遅くなることがある メリット デメリット
- 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. <script src="https://ajax.googleapis.com/ajax/libs/jquery/ 2.2.4/jquery.min.js"> </script> CDNからjQueryライブラリを読み込む ＊Googleなどのサーバーから取ってくるやり方です CDN・・・Content Deliverry Network CDNにホストされているjQueryを呼び出す
- 16. jQueryの処理を書きます <script> //ここに処理を書きます </script> <script> $('#start').css('color', 'red'); </script>
- 17. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <p id="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. jQueryの処理の書き方
- 20. jQueryの文法 セレクタ：cssのセレクタと同義語です windowやthisなどcssで扱わないものも あります メソッド： 動作のことです 引数： 入れる物です 空の時もあります ; １つの命令が終わったら;をつける $は「jQuery」の省略形 $(セレクタ).メソッド(引数);
- 23. $(セレクタ).メソッド(引数); 何かとってきて （HTMLの要素を取得して） それに何かする $(‘#pagetop’) //id属性がpagetopの要素 $(‘.hidden’) //class属性がhiddenの要素 $(‘div’) //全てのdiv要素 $(‘.hidden p’) //class属性がhiddenの子要素のp = ＊基本的にCSSのセレクタと同じ （取得したもの jQueryオブジェクト） $(セレクタ)の例 ＜セレクタの書き方＞
- 25. $(セレクタ).メソッド(引数); 何かとってきて （HTMLの要素を取得して） それに何かする .css(‘color’, ‘red’); //文字色を赤くする .fadeOut(‘slow’); //ゆっくりフェードアウトする .animate({scrollTop:0},500); //scrollTop:0まで500ミリ秒で動く .toggleClass(‘hidden’); //classをつけたり消したりする .メソッド(引数);の例 ＊「jQuery日本語リファレンス」のサイトなどで確認しましょう ＜メソッドの書き方＞