今更聞けない！jQueryではじめるJavascript超初心者講座

jQuery2013年7月26日

jQuery、みなさん使っていますか？
これからjQueryや習得される方向けに、jQueryの使い方・基礎文法についてまとめてみました。使い慣れている方には見飽きた内容かもしれませんが、ご活用いただければと思います。

jQueryの準備

Google AJAX Libraries APIからjQueryを直接読み込みます。もしくはローカルにダウンロードして読み込んでもOKです。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
//または
<script type="text/javascript" src="/hoge/js/jquery.min.js"></script>

jQueryコードの基本的な記述

script要素内もしくは別ファイルのjsファイルに記述します。

$(document).ready(function(){
// ここに処理を書きます
});

$(document).ready()のショートカットである下記の記述でも大丈夫です。

$(function(){
// ここに処理を書きます
});

jQuery記述にあたっての基本的な考え方

jQueryの書き方は、基本的に以下の3つが基本となります。

どれに対して
どのタイミングで
何を実行するか

まず、jQueryで何かを実行したい対象（セレクタ）を指定します。
id/classの指定の仕方はCSSとほとんど同じです。

$(".hoge")

次に、どのタイミングでjQueryを実行したいかを指定します。

$(".hoge").イベント(function(){
// ここに処理を書きます
});

よく使われるイベントには下記のようなものがあります。

click：クリック時
dblclick：ダブルクリック時
mousedown：マウスをクリックした時
mouseup：マウスをクリックして離した時
mouseover：マウスオーバー時
mouseout：マウスアウト時
mousemove：マウスを動かした時
toggle：クリックするたび交互に異なる内容を実行したい時

最後に、指定したセレクタに対して何かを実行します。ここではよく使う代表的なものを抜粋して紹介します。

指定した要素内のHTMLを変更

$(".hoge").html("もげテキストもげテキスト");

指定した要素のテキストを変更

$(".hoge").text("ほげテキストほげテキスト");

指定した要素を削除

$(".hoge").remove();

指定した要素にCSSを設定

$(".hoge").css("プロパティ","値");

指定した要素内の先頭にHTMLを追加

$(".hoge").prepend("もげテキストもげテキスト");

指定した要素内の最後にHTMLを追加

$(".hoge").append("もげテキストもげテキスト");

指定した要素の前にHTMLを追加

$(".hoge").before("もげテキストもげテキスト");

指定した要素の後ろにHTMLを追加

$(".hoge").after("もげテキストもげテキスト");

指定した要素を別の要素で包合

$(".hoge").wrap("<h2></h2>");

指定した要素を別の要素で置き換え

$(".hoge").replaceWith("<h2></h2>");

指定した要素の属性を変更

$(".hoge").attr("属性","値");

指定した要素の属性を削除

$(".hoge").removeAttr("属性名");

指定した要素にclass属性を追加

$(".hoge").addClass(".moge");

指定した要素から任意のclass属性を削除

$(".hoge").removeClass(".moge");

記述例

.hogeをクリックしたら.moge内のテキストを「ふがテキスト」に変更

$(".hoge").click(function(){
$(".moge").text("ふがテキスト");
});

.hogeにマウスオーバーしたら.mogeをフェードインで表示

$(".hoge").mouseover(function(){
$(".moge").fadeIn();
});

特にイベント時に実行するのではなく、ページ読み込み時に実行したい場合は下記の様に記述します。

$(function(){
$(".hoge").hide();//ページ読み込み時に.hogeを非表示に
});

jQueryでのAjaxについて

次のように記述すると、セレクタで指定した要素の内容を取得した別ファイルの内容と差し替えることができます。

$(".hoge").load("hoge.html");

SSI（サーバーサイドインクルード）が使えない時にインクルード機能の代わりになります。

jQueryのアニメーションについて

jQueryはアニメーションを簡単に実装することができます。
以下の記述で、表示/非表示の際にアニメーションさせることができます。

$(".hoge").show(スピード);//表示
$(".hoge").hide(スピード);//非表示

$(".hoge").slideDown(スピード);//表示
$(".hoge").slideUp(スピード);//非表示

$(".hoge").fadeIn(スピード);//表示
$(".hoge").fadeOut(スピード);//非表示

スピードにはslow／normal／fast のいずれかもしくはミリ秒単位（1秒＝1000秒）で指定が可能です。

まとめ

いかがだったでしょうか？
プログラミングと聞くと敷居が高く感じられるかもしれませんが、jQueryは非常に簡単で、プログラミング初心者の方でも動きのあるコンテンツを作ることが可能です。
本記事がjQueryを触るきっかけとなれば幸いです。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

はせゆうさん

2015年12月1日

ものすごくわかりやかったです。
ありがとうございます＜（＿）＞

この記事にコメントする

※承認制のため、即時には反映されません。