HTMLの要素をダイレクトに指定する方法
- <h1><p>などを指定する。$("h1") , $("p")
- ID名がついた場合。例えば、<div id="wrapper">、を指定するには、$("#wrapper")
- Class名がついた場合。<p class="first">を指定するには、$(".first")
- とにかく、$("要素名、要素に対するID,またはクラス名")
- このあたりは、CSSと同じ指定の仕方なので問題ない。
カンマを使って並べたら複数の要素を指定、スペースを使って並べたら、最初に書いた要素の子孫要素を指定している。
<div id="container">
<dl>
<dt class="top">111</dt><dd class="top">222</dd>
<dt class="middle">333</dt><dd class="middle">444</dd>
<dt class="last">555</dt><dd class="last">666</dd>
</dl>
</div>
<script>
$(function()
{$("dt.top, dd,top").css("color", "red");
});
</script>
- こんなコードを例にして、最初に気になったのは、dt, とdd の立ち位置。
- MDNで調べたところ、dt, dd どちらも親は「dl」でddがdtの子要素、ということはなかった。
- まずはカンマつなぎで、$("dt.top, dd,top").css("color", "red");
- 以下の結果になる.
- 関係ないけれども、きちんとリセットをかけると、dt, ddは縦にきちんと並ぶ。
- $("dt.top dd,top").css("color", "red");と記述しても…
- 反応しません。ddはdtの子要素ではないからです。
- 「222」を赤い文字にしたいときは、$("dl dd.top").css("color", "red");、とすれば良い。
- CSSを記述するときにも、たとえばリセットの時に複数の要素を指定するときには「カンマ」で列挙していたし、#wrapper h3のように、子や孫要素を指定するときは「スペース」で列挙していたことと同じ。