どうもバナナです。
jQueryは以前から使っていますが、要求されることが徐々に難しくなり、力量不足＆理解力不足を感じるようになってきました。
分からない時は先輩に聞いていますが、先輩もお忙しいので、あまり先輩にご迷惑をかけないためにもしっかりと再入門していきたいと思います。
先輩頑張ります！！
目次
jQueryとは？
javascriptのよく使う機能をまとめたもの（ライブラリと呼ばれる）です。javascriptは、難しいことをしようとするとコード量が長くなりますがjQueryを使うことで簡単に書くことができます。
jQueryの読み込み
jQueryを利用するには、jQuery本体を読みこむ必要があります。
jQueryを読み込む方法は、2つあります。
- jQuery本体をダウンロードしてきてサーバーにアップして読み込む方法
- Googleなどが配布（CDN）しているものを読み込む方法
jQuery本体をダウンロードしてきてサーバーにアップして読み込む方法
まずは、jQueryライブラリの公式ページからダウンロードをしましょう。
http://jquery.com/download/（公式ページ）
※現在（2017年10月時点）は、3.x系しかダウンロードできないようです。
サーバーにアップしてbodyの閉じタグ直前に記述してください。
※実際にアップした場所に合わせて、適宜パス名やファイル名を修正して下さい。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery入門 | バナナノキモチ</title> </head> <body> <script src="./js/jquery-3.2.1.min.js"></script> <script src="./js/sample.js"></script> </body> </html>
これで完了です。
これだけでもうjQueryが使えてしまいます。
jQuery バージョンによる違い
jQuery 1.x系
IE8以下に対応。
最終バージョン 1.12.4（2017年10月時点）
jQuery 2.x系
IE9以降に対応。
最終バージョン 2.2.4（2017年10月時点）
jQuery 3.x系
IE9以降に対応。（2017年10月時点）
最終バージョン 3.2.1（2017年10月時点）
- IE9 以降
- Chrome、Edge、Firefox、Safari の最新版とそのひとつ前のバージョン
- Opera の最新版
- iOS 7 以上で稼働する iOS版 Safari
- Android 4.0 以降
2.x系と3.x系の違い
興味があれば下記URLから覧ください。
http://qiita.com/fmy/items/345a264a1cf2e2a73f62
.ready（）
document（htmlやcss）を読み込んでから処理を行うという記述をします。
$(function() {
// なんらかの処理
});
また、省略して書くことができます。
$(function() {
// なんらかの処理
});
.ready()の書き方はどちらでも動作は一緒なので、基本的には省略させた記述でいいと思います。
jQueryの書き方
jQueryは処理対象となるDOM要素を指定して、それに対する処理を書いて行きます。
$(function(){
$('p').css('color', 'red');
});
上の処理は「pタグの文字色を赤くする」という処理です。
$(‘p’) ← セレクタ（pタグの）
.css(‘color’, ‘red’) ← メソッド（文字を赤くしてね）
という風に処理を書いていきます。
メソッドチェーン
また、処理に処理をつなげることができます。これをメソッドチェーンといいます。
$(function(){
$('p').css('color', 'red').hide();
});
$(‘p’) ← セレクタ（pタグの）
.css(‘color’, ‘red’) ← 1つめのメソッド（文字を赤くしてね）
.hide() ← 2つめのメソッド（pタグを隠してね）
メソッドチェーンを使うことでやれることが増えていきますね。
まとめ
今回はjQueryを使用する上での準備編でした。
知っていることでも改めてきちんと調べることで理解を深めることができますね。
今回は結構勉強になりました。この調子で頑張ります！先輩！！
またね(‘ω’)ノ