jqueryのセレクター方法

jqueryの基本はセレクターでhtmlの要素や属性を選び操作することで、動きのあるホームページを作ることが可能です。

$("セレクター").jquery命令

そこで、今回は、
セレクターの方法を紹介します。

スタイルシートでよく使う選び方

スタイルシートでよく使う要素やID、classを使って選ぶ方法

$("div"),$("div#header"),$("div#header p"),$("#nav ul"),$("#nav ul,#header")

同じ要素の並びから一つの要素を指定する方法

・last-child
・first-child
・nth-child

htmlの例(1)

<ul>
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

要素:last-child→最後に登場した要素

$("li:last-child").text("変更後")

htmlの例(1)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>

要素:first-child→最初に登場した要素

$("li:first-child").text("変更後")

htmlの例(1)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

要素:nth-child(番号)→要素の中で指定した番号の子要素

$("li:nth-child(2)").text("変更後")

htmlの例(1)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>

階層構造で、要素名を指定するセレクタ

・要素1>子要素2
・要素1+要素2

htmlの例(2)

<div>
<p><span>A</span></p>
<span>B</span>
</div>

$("要素1>子要素2")→要素1の子要素2を選択
同要素がある中で、階層の違いで選択できます。

$("div>span").text("C")

htmlの例(2)だと

<div>
<p><span>A</span></p>
<span>C</span>
</div>

divの子要素になるspanなので、<span>B</span>が<span>C</span>になります
<span>A</span>は孫要素になります。

$("要素1+要素2")→ある要素の次の要素を選びたいとき

$("p + span").text("C")

htmlの例(2)だと

<div>
<p><span>A</span></p>
<span>C</span>
</div>

<span>B</span>が<span>C</span>になります。

属性セレクター

・[属性名]
・要素[属性名!=’値’]
・[属性名$=’値’]
・[属性名*=’値’]
・[属性名^=’値’]

htmlの例(3)

<ul>
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

[属性名]→その属性が含まれる場合

$("[id]").text("変更後")

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更後</li>
</ul>

になります。

要素[属性名!=’値’]→指定した属性値が含まれない場合

$("li[id!='last']").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>

になります。

[属性名$=’値’]→指定した属性値が最後についている場合

$("li[id$='d']").text("変更後");

html(3)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>

になります。

[属性名*=’値’]→指定した属性値が含まれる場合

$("li[id*='st']").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>

になります。

[属性名^=’値’]→指定した属性値が最初についている場合

$("li[id^='s']").text("変更後");

html(3)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>

になります。

jquery専用のフィルタ

・first
・last
・even
・odd

$("要素:first")→最初の要素

$("li:first").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

になります。

$("要素:last")→最後の要素

$("li:last").text("変更後");

html(3)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>

になります。

$("要素:even")→0から数えて偶数

$("li:even").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>

になります。

$("要素:odd")→0から数えての奇数

$("li:odd").text("変更後");

html(3)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>

になります。

要素の番号により指定

・eq(番号)
・gt(番号)
・lt(番号)


$("要素:eq(番号)")→0から数えて番号の番号

$("li:eq(0)").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

になります。

$("要素:eq(番号)")→0から数えての番号の要素

$("li:eq(0)").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

になります。

$("要素:gt(番号)")→0から数えて、それの番号より後の要素

$("li:gt(1)").text("変更後");

html(3)だと

<ul>
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>

になります。

$("要素:lt(番号)")→0から数えて、それの番号より前の要素

$("li:lt(1)").text("変更後");

html(3)だと

<ul>
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>

になります。

その他のjquery独自フィルター

・header
・has

htmlの例(4)

<h1><strong>変更前</strong></h1>
<div>変更まえ</div>
<h3>変更前</h3>

$("要素:header")→h1~h6までの要素

$(":header").text("変更後");

html(4)だと

<h1><strong>変更後</strong></h1>
<div>変更まえ</div>
<h3>変更後</h3>

になります。

$("要素1:has(要素2)")→要素2が含まれるの要素1

$("h1:has(strong)").text("変更後");

html(4)だと

<h1><strong>変更後</strong></h1>
<div>変更まえ</div>
<h3>変更前</h3>

になります。


コメントする