jQueryのプラグインを使ったことはあるけど、1から書く方法はわからない。
JavaScriptとどう違うの？
という方は、一定数いらっしゃるのではないでしょうか。
今回はそんな初心者の方のために、
jQueryについてざっくりと説明していきたいと思います。
jQueryとは？
JavaScriptライブラリ（JSでよく使う機能をまとめたもの）の一種です。
簡単に言うと、javaScriptを簡単に書くためのプラグインのようなものです。
JavaScriptと比較すると、jQueryの記述がいかにシンプルで簡単であるかよくわかります。
HTML上の「div id=”test”」の中に「hello world！」という文字を出したい時
Java Script
document.getElementById("test").innerHTML = "hello world!";
jQuery
$("#test").text("hello world!");
$(function () {}); ってなに？
jQueryを使う際に避けて通れないのが、上記のような記述。
これは、jQueryを動かす上で重要な役割をもっているので
「そういうお約束」として覚えてください。
jQueryは「HTMLのページ構成を読み込んでから」
処理を行う場合が多いのですが、放っておくとページ構成が読み込まれる前に処理を開始してしまいます。
この「$(function () {});」という記述は、
「HTMLのページ構成の読み込みが完了するまで待機する」という命令文になっています。
では、「$(function () {});」を使用した場合と使用しなかった場合とで比較してみましょう。
以下のコードはいずれも「imgのdisplayをnoneにする」という命令文になっています。
例）使用した場合
$(function () {
$(‘img’).css(‘display’, ‘none’);
});
処理：
1.HTMLのページ構造を読み込む（imgのdisplayはinitial）
2.「imgのdisplayをnoneにする」
例）使用しなかった場合
$(‘img’).css(‘display’, ‘none’);
処理：
1.「imgのdisplayをnoneにする」
2.HTMLのページ構造を読み込む（imgのdisplayはinitial）
上記の通り、「使用しなかった場合」では、jQueryの処理が先に実行され、その後HTMLのページ構造が読み込まれるため、
折角「imgのdisplayをnone」にしても、「imgのdisplayがinitial」の状態に上書きされてしまうのです。
今回は導入の触りのみですが、
HTMLとCSSしか触ったことがない！という方も、怖がらずに使ってみてください。
