#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を読み込みましょう。
<!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>の直前がいいとされています。
なので
<!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を書いていきます。
$(function(){
//これがjqueryを使い始めるよという合図です
$("#hoge").css("color","red");
});
これがjqueryで書いた場合の文字を赤にする方法です。
もしこれをjqueryを使わずに書くと
var hoge = document.getElementById("hoge");
hoge.style.color = "red";
となるかと思います。
jQueryのコードを詳しく見てみましょう。
$(function(){
// $(セレクタ).メソッド
$("#hoge").css("color","red");
});
と言うふうになっていて、セレクタにはタグの名前、class、idが入ります。
注意として、cssでもそうですが
id -> # class -> .
に従ってください。
次にメソッドですが、これはもうたくさんあるのでその度にググってみてください！
さぁこれで君もjQuery使いだ！！！！！
PS.
ご質問等はこちらで受け付けてます！