jQuery使ってみない？ ~ Why don't you use jQuery ? ~

さて、主題の通り今回の記事は、初心者の方へ向けての記事ですので
jQuery普段から使ってる方は見る必要０です。笑

今回の流れ

jQueryの導入
jQueryの簡単な使い方の説明

となっています。

jQueryの導入

まずは公式サイト
jQuery ホームページ

この公式サイトに飛びDownload jQuery(オレンジ色)をクリック

ページが変わったらDownload the compressed, production jQuery 1.12.0をクリック

すると jQuery-1.12.0.min.js がダウンロードされると思います。

ではHTMLにjQueryを読み込みましょう。

index.html

<!DOCTYPE html>
<html lang="ja"></html>
<head>
  <meta charset="utf-8" />
  <title>タイトル</title>
</head>
<body>
  <h1 id="hoge">Hello World</h1>
</body>

とまぁこんなHTMLを書いたとして読み込む場所ですがcssとは違い</body>の直前がいいとされています。
なので

index.html

<!DOCTYPE html>
<html lang="ja"></html>
<head>
  <meta charset="utf-8" />
  <title>タイトル</title>
</head>
<body>
  <h1 id="hoge">Hello World</h1>
  <!-- ここに読み込む -->
  <script charset="utf-8" src="./js/jquery-1.12.0.min.js"></script>
</body>

気をつける点はパスです。

このコードの場合、index.htmlから見て./js/jquery-1.12.0.min.jsなので

index.htmlと同一ディレクトリにjsフォルダがあり、その中にjqueryがあるという状況です。

では、jQueryを書いていきましょう。

jQueryの使い方

ここまでで、jQueryの導入はみなさん終わっていると思います。

なのでコードを書いていきましょう。

今回 main.jsなるファイルを作りそこにjavascriptを書いていきます。

main.js

$(function(){
//これがjqueryを使い始めるよという合図です

  $("#hoge").css("color","red");

});

これがjqueryで書いた場合の文字を赤にする方法です。

もしこれをjqueryを使わずに書くと

main.js


var hoge = document.getElementById("hoge");
hoge.style.color = "red";

となるかと思います。

jQueryのコードを詳しく見てみましょう。

main.js


$(function(){

  // $(セレクタ).メソッド
  $("#hoge").css("color","red");

});

と言うふうになっていて、セレクタにはタグの名前、class、idが入ります。

注意として、cssでもそうですが
id -> # class -> .

に従ってください。

次にメソッドですが、これはもうたくさんあるのでその度にググってみてください！

さぁこれで君もjQuery使いだ！！！！！

PS.
ご質問等はこちらで受け付けてます！