【超初心者向け!】jQueryの基礎の基礎

【超初心者向け!】jQueryの基礎の基礎

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しか触ったことがない!という方も、怖がらずに使ってみてください。