【jQuery】jQueryの基本：セレクタの指定・フィルターの種類

jQueryは次の書き方で記します。セレクタはHTML要素から取得する書き方です。セレクタに一致する要素を取得します。

$(`セレクタ`).jQueryメソッド

See the Pen LYRVOwX by バイオハックch (@synd1090) on CodePen.

$()は返り値としてjQueryオブジェクトを返します。jQueryオブジェクトとは、要素を保存してこれを操作するオブジェクトです。

要素名でも指定することができます。

$(`h2`).css(`color`,`red`);

クラス・idでも指定することができます。

$(`.head`).css(`color`,`red`);
$(`#head`).css(`color`,`red`);

下のコードでは、クラス名headまたはh2要素を持つものを取得します。

$(`.head,h2`).css(`color`,`red`);

$(`.header h3`).css(`color`,`red`);

別の階層に入っていたら取得しません。

<div class="header">
    <h3 class="head">aaa</h3>
    <div>
        <h3 class="head">aaa</h3>
    </div>
</div>

$(`.header　> h3`).css(`color`,`red`);

<ul>
  <li class="number1">1</li>
  <li class="number2">2</li>
</ul>

$(`.number1 + li`).css(`color`,`red`);

<ul>
  <li class="number1">1</li>
  <li class="number2">2</li>
  <li class="number3">3</li>
</ul>

$(`.number1 ~ li`).css(`color`,`red`);

<ul>
  <li class="number1">1</li>
  <li class="number2">2</li>
  <li class="number3">3</li>
</ul>

$(`ul > li:first`).css(`color`,`red`);

$(`ul > li:even`).css(`color`,`red`);
$(`ul > li:odd`).css(`color`,`red`);

数字は0から始まります。

$(`ul > li:eq(2)`).css(`color`,`red`);

<ul>
  <li class="number1">1</li>
  <li class="number2">2</li>
  <li class="number3">3</li>
</ul>

$(`li:contains("2")`).css(`color`,`red`);

<ul>
  <li class="number1">1</li>
  <li class="number2"></li>
  <li class="number3">3</li>
</ul>

$(`li:empty`).css(`color`,`red`);

<ul>
  <li class="number1"><span>1</span></li>
  <li class="number2">2</li>
  <li class="number3">3</li>
</ul>

$(`li:has(span)`).css(`color`,`red`);

$(`ul li:first-child`).css(`color`,`red`);
$(`ul li:last-child`).css(`color`,`red`);

nth-child( )内に何個おきかの数字が入ります。

$(`ul li:nth-child(2n)`).css(`color`,`red`);