単純な処理・・・jQueryにお願いする方法

jQueryを使うときは、HTMLソースのどの要素(タグ・class・id)に何をしてほしいかを明確にしてください。
ここでは「してほしいこと」をどうやってお願いするかを説明します。


sample

テキスト

テキストテキストテキスト

テキスト

テキスト

テキスト


サンプルの解説

<p class="jq">テキスト</p>
<p class="test">テキスト<span>テキスト</span>テキスト</p>
<p class="jq">テキスト</p>
<p class="test">テキスト</p>
<p class="jq">テキスト</p>

上のサンプルのhtmlはこうなっています。
特定のspanタグに「背景色をつけたい」として、jQueryにお願いするときは以下のようになります。

$(function(){
    $('.test span').css('background-color','#fdf');
})

セレクターを指定して、[.](ドット)でつなぎcss()というお願いを記述します。
最後の[;](セミコロン)はお願い終わりという合図なので、忘れないでください。

css()はセレクターの「cssを変更してね」というお願いです。
具体的な内容は()内に書きます。
ここでは、背景色(background-color)を特定の色(#fdf)にとお願いしています。それぞれ、クォーテーションで囲み、[,](コンマ)でつなぎます。

jQueryではこのような「お願い」をたくさん用意しています。
javascriptでは長々と書かなければならないことを、短いセンテンスでお願いできるようにしてくれています。


その他の「お願い」

ほかにもいろいろ「お願い」の仕方があります。詳細は以下の参考サイトやgoogle先生を参照してください。
classを追加したり、削除したり・・・そういうのがたくさんあります。
ちなみに、こういうのおぼえるのは、実際にやってみるのが一番です。

$(function(){
    $("p#first").text("テキストを差し替える");
    //.text(); → セレクターのテキストを差し替える。

    $("p#second").text($("p#first").text());
    //text()は文字列そのものを指定する以外に、特定の要素のテキスト差し替えることもできる。
    //ここでは、id[first]のテキストを取得して、id[second]のpタグのテキストを差し替えている。

    $("p#first").html("<strong>変更後</strong>");
    //.html(); → セレクター内のhtmlを差し替える。
    //ここではid[first]のpタグ内のHTMLを差し替えている。→<p id="first"><strong>変更後</strong></p>として表示される。
    //この関数はXMLでは動作しないが、XHTMLでは有効。

    $("p#second").html($("p#first").html());
    //html()は直接コードを指定する以外に、特定の要素のhtmlを取得し、差し替えることもできる。
    //ここではid[first]のpタグ内のHTMLを取得し、id[second]のpタグの内のHTMLを書き換える。
    //id[first]内とid[second]内はhtmlタグ・テキスト含め同じになる。
    //つまり、html()は元々存在していた要素の内容を上書きする。

    $("p#first").prepend("<strong>先頭に挿入</strong>");
    //.prepend(); → セレクター内の先頭にhtmlを挿入する。<p id="first"><strong>先頭に挿入</strong>もともともテキスト</p>

    $("p#first").append("<strong>最後に挿入</strong>");
    //.append(); → セレクター内の最後にhtmlを挿入する。<p id="first">もともとのテキスト<strong>最後に挿入</strong></p>

    $("p#first").before("<h1>前に挿入</h1>");
    //.before(); → セレクターの前にhtmlを挿入する。
    //ここではid[first]のpタグの前にHTMLを挿入する。→<h1>前に挿入</h1><p id="first">~</p>となる。

    $("p#first").after("<h1>後に挿入</h1>");
    //after(); → セレクターの後にhtmlを挿入する。
    //ここではid[first]のpタグの後にHTMLを挿入する。→<p id="first">~</p><h1>後に挿入</h1>となる。

    $("strong").prependTo("p");
    //.prependTo(); → 特定のセレクター内の先頭に別のセレクターを挿入する。
    //ここでは全てのpタグの内側の先頭に(既存の)strongタグを挿入させる。
    //たとえばページ内に<strong>おばあさんが</strong>があれば、strongタグ含めて「おばあさんが」がすべてのpタグ内の先頭に挿入される。

    $("strong").appendTo("p");
    //.appendTo(); → 特定のセレクター内の最後に別のセレクターを挿入する。
    //ここでは全てのpタグの内側の最後に(既存の)strongタグを挿入させる。
    //たとえばページ内に<strong>もぎゅもぎゅ</strong>があれば、strongタグ含めて「もぎゅもぎゅ」がすべてのpタグ内の最後に挿入される。

    $("h1").insertBefore("p");
    //.insertBefore(); → 特定のセレクターの前に別のセレクターを挿入する。
    //ここでは全てのpタグの前に(既存の)h1タグを挿入させる。
    //prependTo()はpタグの内側、insertBefore()は外側に挿入。

    $("h1").insertAfter("p");
    //.insertAfter(); → 特定のセレクターの後に別のセレクターを挿入する。
    //ここでは全てのpタグの後に(既存の)h1タグを挿入させる。
    //appendTo()はpタグの内側、insertAfter()は外側に挿入。

    $("strong").wrap("<h1></h1>");
    //.wrap(); → セレクターを指定した要素で囲む。
    //ここではstrongタグを<h1></h1>で囲む(strongタグが複数あれば、全てのstrongタグが対象となる)。

    $("strong").wrapAll("<h1></h1>");
    //.wrapAll(); → セレクターすべてをまとめて指定した要素で囲む。
    //ここではstrongタグを<h1></h1>で囲む(strongタグが複数あれば、全てのstrongタグがひとまとめに囲まれる)。
    //wrap()はセレクターを一つ一つ指定した要素で囲むが、wrapAll()はひとまとめにして囲む
    //(ページ内に指定したセレクターが散在してれば、一か所にまとめて囲む)。
    //指定したセレクターが複数り、かつ、間に別の要素やテキストがある場合はそれらを除外する。
    //<strong>テキスト</strong>テキストテキスト<strong>テキスト</strong>
    // ↓
    //<h1><strong>テキスト</strong><strong>テキスト</strong></h1>テキストテキスト

    $("p").wrapInner("<strong></strong>");
    //.wrapInner(); → セレクターの子要素やテキストを指定した要素で囲む。
    //ここではpタグ内の要素やテキストを<strong></strong>で囲む。
    //wrap()はpタグの外側を囲むが、wrapInner()は、pタグの中身を囲む。

    $("p").replaceWith("<h1>置き換え後</h1>");
    //.replaceWith(); → セレクターを指定した要素を含めた内容に置き換える。
    //ここではpタグをpタグとその中身を含めてまるっと<h1>置き換え後</h1>に置き換える。

    $("p strong").remove();
    //.remove(); → 指定した要素(要素内のコンテンツ含む)を削除する。
    //ここではpタグ内のstrong要素をその中身とともに削除する。

    $("a").attr("href","http://ascii.jp");
    //.attr("属性名","属性値"); → セレクターの属性の値を変更する。
    //ここではaタグのhref属性の値をhttp://ascii.jpに差し替えている。

    $("a").text($("a").attr("href"));
    //.attr("属性名"); → セレクターの属性の値を取得する。
    //ここではaタグのhref属性の値を取得し、aタグのテキストとして差し替える(このように「お願い」は入れ子にして使える)。

    $("a").removeAttr("target");
    //.removeAttr("属性名"); → セレクターの属性の値を削除する。
    //ここではaタグのtarget属性の値を削除している。

    $("p").addClass("red");
    //.addClass("クラス名"); → セレクターにcalss属性を追加する。
    //ここではpタグにclass[red]を追加している。

    $("p").removeClass("red");
    //.removeClass("クラス名"); → セレクターのcalss属性を削除する。
    //ここではpタグのclass[red]を削除している。

    $("p").css("color","#00ee00");
    //.css("プロパティ名","値"); → セレクターのcssの制御をする。
    //ここではpタグのテキストカラーの色を変更している。

    $("p").css({
        backgroundColor : "#00e",
        fontWeight : "bold",
        color : "#0e0"
    });
    //.css({プロパティ名:"値" , プロパティ名:"値 " , ・・・}); → セレクターの複数のcssの制御をする。
    //プロパティ名と値は:でつなげ、""で囲むのは値だけ。各プロパティは,で区切る。
    //ただし、プロパティ名は通常のcssと違い、-(ハイフン)がある場合は、これを削除し、その後に続く最初のアルファベットを大文字にする。

    $("p").text($("p").css("color"));
    //.css("プロパティ名"); → セレクターのcssのプロパティ値を取得する。
    //ブラウザによって形式が異なるため、#000000またはrgb(0,0,0)の形式で表示される。
    //ここではpタグのcolorの値を取得し、pタグ内にテキストとして書き込む。

    $("p").prepend("先頭に挿入")
          .append("最後に挿入");
    //同じセレクタに対して複数の命令を実行したいとき、.(ドット)でつないで記述することができる。→メソッドチェーン
    //&("セレクタ").jQueryの命令1.jQueryの命令2.jQueryの命令3.・・・.jQueryの命令x;
    //上記の例のように改行して記述することもできる。
})

このソース全部コピペして、一気に実行しようとすると大変なことになると思うので、一つ一つ試してください。

戻る

Top