初心者でも簡単!今から始めるjQueryの基礎　その1

f:id:orewebe:20130115113000j:plain
最近ではWebサイトを作る際、必ずと言っていいほど入っているJQuery。

これから更新する「初心者でも簡単!今から始めるjQueryの基礎」全4回

この記事ではもっと表現を増やしたいけど、プログラムはちょっと……。という人に、あれ？以外とjQuerytって簡単かもれしれない？
と思ってもらえるようになればいいなと思って書いたjQuery初心者向けの基礎を学ぶ記事です。

第1回 jQueryとは何か←今回はこれ。

第2回 jQueryでタブの切り替え

第3回マウスをhoverしたら画像が切り替わる基礎

第4回マウスをhoverしたら画像が切り替わる応用

まずjQueryとはなんぞや

本来なら、javascriptで長々とDOMでidを取ってきて、処理をして、という初心者にはよく分からない難しい処理。
そんなわけ分からないプログラムとか苦手……といった人にも簡単に短く書くことができるjavascriptのライブラリがjQueryです。

f:id:orewebe:20130115114151p:plain

こんな感じ。

2.読み込んでみる。

まず、jQuery.comのサイトのDownloadから、一番新しいバージョンをDLしてきましょう。
二つあると思うのですが、

http://code.jquery.com/jquery-○.○.○.min.js

こちらのminとついている方でDLしてきた方がいいです。

※minとついていないのは非圧縮なので、圧縮されている方を使ったほうが読み込みが早いからです。

3.読み込み

読み込みは簡単です。
先ほどDLをしてきたものを、任意のフォルダに入れます。
そして、HTML側のheadのエリアに、

<script type="text/javascript" src="任意のフォルダ/jquery-○.○.○.min.js">
</script>

f:id:orewebe:20130116214538p:plain

と記述します。
次に、jqueryを実行するために、JSファイルを一つ作って、そのファイルを上記の後ろ（強調）に記述します。

<script type="text/javascript" src="任意のフォルダ/jquery-○.○.○.min.js">
</script>
<script type="text/javascript" src="任意のフォルダ/自分で作ったJSファイル.js">
</script>

f:id:orewebe:20130116214546p:plain

このような感じ。

※この時、jQueryファイルと実行するためのJSを逆にしてしまうと、実行するためのJSの方があとに読み込まれるので、動かないという現象に陥ります。
本当に。

4.jQueryを実行するための記述。

実行するためのJSファイルに、

$(function(){//行いたい処理});

と記述する事で、JQueryが使えるようになります。

この、$(function(){//行いたい処理});は$(document).ready(function(){});
の"(document).ready"を短縮したものです。

要するに、HTML側が読み込まれて、準備ができた段階で、"行いたい処理"を実行するよ！
ということです。

5.実際に使ってみよう。

では、どんなものか実際に使ってみましょう。
　

処理:表示されている文字を消す。

材料は、

HTMLファイル
jQueryファイル
実行用JSファイル

先ほど上記で作ったようなファイルです。

f:id:orewebe:20130116221643p:plain

1.任意のidを付けたdivを作る。

HTML側に、任意のidを付けたdivを作ります。
このdivが表示されているか確認を忘れずに。
下記は例です。

<div id="hoge">
<p>Hello World</p>
</div>

2.要素を取ってくる。

次に、実行用JSファイルの方で、処理をしたいdivの部分のidを取ってきます。
取って来たい要素は、$("要素")でとってこれます。
CSSみたいにidの中の○○といった書き方もできます。
この要素の事をセレクタって言います。

$(function(){

$("#hoge　p")

});

3."消す"処理

次に、消すにはhide()というメソッドを使います。
メソッドとは、何かの処理をする部分になります。
今回の場合、hide()は隠すという処理をするものになります。

$(function(){

//$("id="hoge"の中の、pを).消すよ！といった処理になります。
$("#hoge　p").hide();

});

これを実行すると、「hellow　World」の文字は表示されなくなります。

この一通りの流れが、jQueryの基本になります。使い方になります。

$("要素").メソッド()

このように、基本的にはとってきた$("要素")に対して.～()をしてね！といった処理をする事で、
jQueryを使って色々な処理をする事ができます。

初回の記事はこれでおしまいです。
次回は、jQueryでタブの切り替えをする処理を作ってみたいと思います。

お楽しみに！

俺らのWebはジャスティス

あ・美脚ハンター、クロケツ♂、ダーク・イザワ、ぜん☆ちからめしの4人が運営していくWeb技術、デザインの情報ブログです