jQueryの教科書

jQueryの教科書というサイトです。jQueryについて基礎的な説明をしています。逆引きリファレンスとしてもご利用頂けます。


このサイトについて



jQueryとは

オープンソースのJavaScriptライブラリの一つです。 2006年1月にJohn Resig氏が開発しました。 現在は、「jQuery Team」が開発・メンテナンスしています。 jQueryはシンプルなコードでWebページに効果やアニメーション、ユーザインターフェース要素などを追加できます。 Ajaxによる通信も容易に実装できるほか、様々な対応プラグインが公開されています。


jQueryを使う方法と本体のダウンロード場所

jQueryを使うには、jQueryの公式サイト『http://jquery.com/』からjQuery本体をダウンロードし、HTMLからロードする方法が一般的です。この他にグーグルにHTMLから直接アクセスしロードする方法があります。

jQueryには、様々なバージョンがあり、バージョンごとにソースの記述方法や機能が異なります。

jQueryは、DocumentがReady状態になったタイミングで実行させよう。

基本的には、jQueryはDocumentがReady状態になったタイミングで実行させる必要があります。
DOM構築後のタイミングで実行させるには、以下の中にjQueryのコードを記載する必要があります。

記載方法は、いくつか種類があります。

$(document).ready(function(){
// jQueryのコードは、ここに書く
});

$().ready(function(){
// jQueryのコードは、ここに書く
});

$(function(){
// jQueryのコードは、ここに書く
});

テキストを変更する - text()

タグ内の内容変更は、text()メソッドで行えます。

text()の引数には、変更した内容を記載します。
実行後は、引数に指定した値に書き換えられています。

◆jQuery
$(".text").text("変更後の内容です。");

◆変更前
<p class="text">変更前の内容</p>

◆変更後
<p class="text">変更後の内容</p>

指定した要素の内部を指定した要素に置換する - html()

html()メソッドで指定した要素の内部を指定した要素に置換することができます。

◆jQuery
$("p.text").html("<b>こんばんは!</b>");

◆HTML変更前
<p class="text">こんにちは</p>

◆HTML変更後
<p class="text"><b>こんばんは!</b></p>

HTML要素内の先頭にHTMLを追加する - prepend()

prepend()メソッドで指定した要素の先頭にHTMLを追加することができます。

◆jQuery
$("p.text").prepend("<strong>update!</strong>");

◆HTML変更前
<p class="text">こんにちは</p>

◆HTML変更後
<p class="text"><strong>update!</strong>こんにちは</p>

指定した要素の最後に要素を追加する - append()

append()メソッドで指定した要素の最後に要素を追加することができます。

◆jQuery
$("p.text").append("<strong>♪</strong>");

◆HTML変更前
<p class="text">こんにちは</p>

◆HTML変更後
<p class="text">こんにちは<strong>♪</strong></p>

指定した要素の前に要素を追加する - before()

before()メソッドで指定した要素の前に要素を追加することができます。

◆jQuery
$("p.text").before("<h3>挨拶</h3>");

◆HTML変更前
<p class="text">こんにちは</p>

◆HTML変更後
<h3>挨拶</h3>
<p class="text">こんにちは</p>

指定した要素の後に要素を追加する - after()

after()メソッドで指定した要素の後に要素を追加することができます。

◆jQuery
$("p.text").after("<h3>挨拶</h3>");

◆HTML変更前
<p class="text">こんにちは</p>

◆HTML変更後
<p class="text">こんにちは</p>
<h3>挨拶</h3>

エレメントの属性を変更する - attr()

attr()メソッドでエレメントの属性を変更することができます。
第一引数に属性名、第二引数に属性の値を指定します。

以下の例では、imgタグにsrc属性を付与しています。

◆jQuery
$(function() {
$('#logo').attr('src', 'http://www.testdomain/logo.jpg');
});

◆HTML
<img id="logo"/>

要素にCSSクラスを追加する - addClass()

addClass()メソッドで要素にCSSクラスを追加することができます。

以下の例では、pタグにtestというクラスを追加しています。

◆jQuery
$(function() {
$("p").addClass("test");
});

◆HTML変更前
<p>こんにちは</p>


◆HTML変更後
<p class="test">こんにちは</p>

要素にCSSクラスを削除する - removeClass()

removeClass()メソッドで要素にCSSクラスを削除することができます。

以下の例では、pタグにtestというクラスを削除しています。

◆jQuery
$(function() {
$("p").removeClass("test");
});

◆HTML変更前
<p class="test">こんにちは</p>


◆HTML変更後
<p class="">こんにちは</p>

ipnutタグの値を取得する - val()

val()関数を使用するとipnutタグの値を取得することができます。

◆html
<form>
<input type="text" name="text-name" value="入力した値" />
</form>

◆Javascript
var value = $('input[name=text-name]').val();

変数valueには、"入力した値"が格納されています。


クリックした際に処理を実行する - .click(fn)

.click(fn)を記載すると、クリックした際に処理を実行することができます。引数には、functionを記載し処理の内容を記載します。

◆jQuery
$("p").click(function () {
    alert('要素pがクリックされました!');
});

◆HTML変更前
<p>ここは、クリックできます。</p>

スポンサーリンク


このページの上へ


応援よろしくお願いします!

お問い合わせは、メールにて承っております。
メール:masahiro801[at]hotmail.com ※[at]を@に置き換えてくださいね♪
jQueryの教科書