jQueryの基本的な記述方法(セレクタと命令)

前回の記事(HTMLの読み込み後にjQueryのプログラムを実行する方法)までで、ようやくjQueryプログラムを実行する準備が整った。今回はjQueryの基本的な記述方法について記載する。

前回の記事までに説明した部分は説明を省くので、分からなくなったらjQueryカテゴリから記事を探していただきたい。

jQueryの基本的な記述方法

jQueryでHTMLの要素を指定する際にはセレクタを用いる。指定したセレクタに対して命令を記述することで、HTMLの要素を操作する。一般的な書き方は以下のコードのようになる。

jQueryのセレクタと命令

$(function()) {
    $("【セレクタ】").【命令】;
});

これをもとに、簡単なサンプルを以下に記述していく。

CSSプロパティの設定方法

CSSプロパティの設定としてpタグ内の文字色を青色にしてみる。pタグ内の文字色を青色にする場合には、セレクタは「p」、命令はcss(“color”,”blue”)という命令になる。

サンプル1:pタグ内の文字色を青色にする

$(function()) {
    $("p").css("color", "blue");
});

複数のCSSプロパティの設定方法

複数のCSSプロパティの設定の例として、pタグ内の文字色を青色、文字サイズを大きく(2em)してみる。この場合、以下のコードのようになる。

サンプル2:pタグ内の文字色を青色、文字サイズを2emにする

$(function()) {
    $("p").css({
        color: "blue",
        fontSize: "2em"
    });
});

先ほどとの変更点は{}が増えたことと、プロパティのダブルクオーテーション(””)がなくなり、カンマ区切りで指定する点。また、JavaScriptと同様、CSSのハイフン(fontsize)をなくし、その直後の文字を大文字にしてfontSizeのようにキャメルスタイルで記述する。

指定するタグ内にテキストを挿入する

h1タグ内に「タイトル」という文字列を挿入してみる。命令はtextを用いる。

サンプル3:h1タグ内に「タイトル」という文字列を挿入する

$(function()) {
    $("h1").text("タイトル");
});

今回は基本的なセレクタの指定と命令を紹介したが、記事では紹介しきれないほど、セレクタの指定の仕方や命令が存在する。

記事内で紹介しきれない部分はjQuery日本語リファレンスなどを参考にしていただきたい。以下の黄色で囲った部分あたりをクリックすれば良いはず。

jQueryのセレクタと命令

関連記事

jQueryとは
jQuery利用前の準備(ダウンロード、HTMLでの読み込み)
HTMLの読み込み後にjQueryのプログラムを実行する方法

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery/1444/trackback/