jQueryの使い方の基本をおさらい

2013-02-14

javascriptライブラリのjQueryを使うことでコードの短縮やクロスブラウザ対策を行うことが出来ます。Webサイト作るうえでブラウザごとの挙動を統一するのは結構大変な作業。自分で一からフレームワークみたいなものを作るより、最初から対策済みのライブラリを使っちゃった方が効率が良いということです。

ライブラリにもいくつかありますが、その中でも特に人気のjQuery。ここでは使い方の基本をもう一度確認しておこうと思います。

jQueryの基本使う前の準備

jQueryを使うにはjQueryのサイトからファイルをダウンロードするか、サイトのURLを指定しておく必要があります。これはCSSを使うときにheader内にlink:cssを置くのと同じですね。

また、jQueryを使うということの宣言のようなものを記述します。

//ライブラリの読み込み
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

//URLから読み込み
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


//使うときの宣言
$(function){

    //ここに記述していく

}

jQueryの基本　セレクタ

jQueryの便利なところは、書き方の基本を覚えてしまえばプログラミングの知識がそれほどなくてもすぐに使い始めることができるというところです。

とはいえ最初でつまずくことがないようにまずは簡単な、セレクタの書き方から。基本的な記述方法はこんな感じ。

//セレクタ
$("#id")             //指定したidをもつ要素

$(".class")          //指定したclassを取得

$("ul li")           //ulの内側のli

$("li:first-child")  //最初の要素を取得

$("[属性]")　　　　　　//指定した属性を持つ要素を取得

$("[属性='値']")      //指定した属性と値をもつ要素

jQueryの基本メソッド

セレクタを使って取得した要素に対して何をするか、というのがセレクタの以下に続くメソッドの役割です。メソッドには様々なものがあるので、ここではほんの一例のみ紹介します。

//要素の追加、削除
$("h1").text(["title"]);  //要素内に文字を追加・変更

$("ul").append("<li>リスト<li>");　　//要素内に子要素を追加

$("h1").after("<h2>description</h2>");    //要素の直後に兄弟要素を追加

$("div#main").wrapAll($("div#wrap"));   //要素を囲む

$("div#side").remove();  //要素を削除


//属性のメソッド
$("img").attr("alt");    //属性を取得

$("img").attr("alt","image1");  //属性を追加

$("img").removeAttr("alt");    //属性を削除

$("div").addClass("entry");    //クラスを追加

$("div").removeClass("entry");  //クラスの削除


//イベント処理
$("").load(function(){});  //要素が読み込まれた後に実行

$("").click(function(){});  //クリックされたら実行

$("").dbclick(function(){});  //ダブルクリックで実行

$("").mousedown(function(){});  //マウスボタンが押されたら実行

$("").mouseup(function(){});   //マウスボタンが離されたら実行

$("").mouseover(function(){});  //マウスが重なったら実行

$("").mouseout(function(){});  //マウスが離れたら実行

$("").submit(function(){});    //送信ボタンがクリックされたら実行

$("").scroll(function(){});   //スクロールされたら実行

基本的にはここで紹介した要素の取得やメソッドを使ってHTMLを操作していくことになります。メソッドは他にもたくさん存在し、できることが山ほどあるのでやりたいことに合わせていろいろ調べる必要があります。