jQueryを使うときは、HTMLソースのどの要素(タグ・class・id)に何をしてほしいかを明確にしてください。
ここでは「してほしいこと」をどうやってお願いするかを説明します。
テキスト
テキストテキストテキスト
テキスト
テキスト
テキスト
<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;
//上記の例のように改行して記述することもできる。
})
このソース全部コピペして、一気に実行しようとすると大変なことになると思うので、一つ一つ試してください。