「jQueryの基礎：主なセレクタ」の実例です。
ボタンをクリックすると、右の文章が変わります。
注意：続けて実行するときは、先の実行結果が残ってしまうので、「再読み込み」や「最新の情報に更新」をしてください。
例２：クラスのセレクタclass="aaa" の個所を書き換えます。
<script>
function 例２() {
$(".aaa").text('class="aaa"を書き換えました');
}
</script>
例３：ＩＤのセレクタid="id2" の部分を非表示にします。
<script>
function 例３() {
$(".aaa").css("display", "none");
}
</script>
|
Ａ：<div id="id1">の行
Ｂ：<h4> の行 </h4>Ｃ：<h4 class="aaa"> の行 </h4>Ｄ：</div>の行Ｅ：<div id="id2">の行
Ｆ：<h5 class="acc"> の行 </h5>
|
|
セレクタ タグ：< > を付けずにdiv, h4 とする クラス：.aaa のように「.」を付ける ＩＤ：#id2 のように「#」を付ける |
メソッド １ 赤色にする ２ 「書き換えました」にする ３ 非表示にする |
<script>
function 例４() {
var セレクタ = eval(フォーム１.セレクタ.value);
var メソッド = フォーム１.メソッド.value;
if (メソッド == 1) $(セレクタ).css("color", "red");
else if (メソッド == 1) $(セレクタ).text('書き換えました');
else if (メソッド == 1) $(セレクタ).css("display", "none");
else alert("メソッドは1～3です！");
}
</script>
以降はすべて、次のスクリプトのセレクタの部分をいろいろと変えたものです。
すなわち、セレクタに該当する個所が赤くなります。
<script>
function 例Ｘ() {
$(セレクタ).css("color", "red");
}
</script>
例４："h4, .aaa" （区切記号は「,」）複数指定：タグが<h4>、または、class="aaa" の個所 例５－１："[class='aaa']"".aaa" としたのと同じ。[ ]の前の指定がないと「すべての」の意味になる。 例５－２："h5[class='aaa']"<h5>のタグの内部にclass='aaa' がある個所です。Ｋは該当するがＬは該当しません。 例６－１："mytag .aaa" (区切記号は半角空白）<mytag>の内部で、class='aaa' がある個所。例５ではタグのなかであったが、これはＬも対象になります。 例６－２："mytag > .aaa"<mytag>の内部で、直下に class='aaa' がある個所。Ｌでの class='aaa' は、<mytag>の直下は<h5>であり、<h5>の下に class='aaa' があるので、直下ではなく、対象になりません。 例７："h5[class^='a']" （ワイルド指定が「^」)例５－２の拡張です。<h5>のタグの内部に class='a～"（先頭がaで始まる任意のクラス名）がある個所です。右では、Ｆ（acc）とＫ（aaa）が対象になります。 |
Ａ：<div id="id1">の行
Ｂ：<h4> の行 </h4>Ｃ：<h4 class="aaa"> の行 </h4>Ｄ：</div>の行Ｅ：<div id="id2">の行
Ｆ：<h5 class="acc"> の行 </h5>
|
<script>
function 実験２() {
var セレクタ = eval(フォーム２.セレクタ.value);
$(セレクタ).css("color", "red");
}
</script>