webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

jQuery セレクターのまとめ 1

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>

f:id:ohta-felica:20160518232820j:plain

  • こんなコードを例にして、最初に気になったのは、dt, とdd の立ち位置。
  • MDNで調べたところ、dt, dd どちらも親は「dl」でddがdtの子要素、ということはなかった。
  • まずはカンマつなぎで、$("dt.top, dd,top").css("color", "red");
  • 以下の結果になる.
  • 関係ないけれども、きちんとリセットをかけると、dt, ddは縦にきちんと並ぶ。

f:id:ohta-felica:20160518233413j:plain

  • $("dt.top dd,top").css("color", "red");と記述しても…

f:id:ohta-felica:20160518233847j:plain

  • 反応しません。ddはdtの子要素ではないからです。
  • 「222」を赤い文字にしたいときは、$("dl dd.top").css("color", "red");、とすれば良い。

f:id:ohta-felica:20160518234257j:plain

  • CSSを記述するときにも、たとえばリセットの時に複数の要素を指定するときには「カンマ」で列挙していたし、#wrapper h3のように、子や孫要素を指定するときは「スペース」で列挙していたことと同じ。