jqueryの基本はセレクターでhtmlの要素や属性を選び操作することで、動きのあるホームページを作ることが可能です。
$("セレクター").jquery命令
そこで、今回は、
セレクターの方法を紹介します。
スタイルシートでよく使う選び方
スタイルシートでよく使う要素やID、classを使って選ぶ方法
$("div"),$("div#header"),$("div#header p"),$("#nav ul"),$("#nav ul,#header")
同じ要素の並びから一つの要素を指定する方法
・last-child
・first-child
・nth-child
htmlの例(1)
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
要素:last-child→最後に登場した要素
$("li:last-child").text("変更後")
htmlの例(1)だと
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>
要素:first-child→最初に登場した要素
$("li:first-child").text("変更後")
htmlの例(1)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
要素:nth-child(番号)→要素の中で指定した番号の子要素
$("li:nth-child(2)").text("変更後")
htmlの例(1)だと
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>
階層構造で、要素名を指定するセレクタ
・要素1>子要素2
・要素1+要素2
htmlの例(2)
<p><span>A</span></p>
<span>B</span>
</div>
$("要素1>子要素2")→要素1の子要素2を選択
同要素がある中で、階層の違いで選択できます。
$("div>span").text("C")
htmlの例(2)だと
<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)だと
<p><span>A</span></p>
<span>C</span>
</div>
<span>B</span>が<span>C</span>になります。
属性セレクター
・[属性名] ・要素[属性名!=’値’] ・[属性名$=’値’] ・[属性名*=’値’] ・[属性名^=’値’]
htmlの例(3)
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
[属性名]→その属性が含まれる場合
$("[id]").text("変更後")
html(3)だと
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更後</li>
</ul>
になります。
要素[属性名!=’値’]→指定した属性値が含まれない場合
$("li[id!='last']").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>
になります。
[属性名$=’値’]→指定した属性値が最後についている場合
$("li[id$='d']").text("変更後");
html(3)だと
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>
になります。
[属性名*=’値’]→指定した属性値が含まれる場合
$("li[id*='st']").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>
になります。
[属性名^=’値’]→指定した属性値が最初についている場合
$("li[id^='s']").text("変更後");
html(3)だと
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>
になります。
jquery専用のフィルタ
・first
・last
・even
・odd
$("要素:first")→最初の要素
$("li:first").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
になります。
$("要素:last")→最後の要素
$("li:last").text("変更後");
html(3)だと
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>
になります。
$("要素:even")→0から数えて偶数
$("li:even").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>
になります。
$("要素:odd")→0から数えての奇数
$("li:odd").text("変更後");
html(3)だと
<li id="first">変更前</li>
<li id="second">変更後</li>
<li id="last">変更前</li>
</ul>
になります。
要素の番号により指定
・eq(番号)
・gt(番号)
・lt(番号)
$("要素:eq(番号)")→0から数えて番号の番号
$("li:eq(0)").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
になります。
$("要素:eq(番号)")→0から数えての番号の要素
$("li:eq(0)").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
になります。
$("要素:gt(番号)")→0から数えて、それの番号より後の要素
$("li:gt(1)").text("変更後");
html(3)だと
<li id="first">変更前</li>
<li id="second">変更前</li>
<li id="last">変更後</li>
</ul>
になります。
$("要素:lt(番号)")→0から数えて、それの番号より前の要素
$("li:lt(1)").text("変更後");
html(3)だと
<li id="first">変更後</li>
<li id="second">変更前</li>
<li id="last">変更前</li>
</ul>
になります。
その他のjquery独自フィルター
・header
・has
htmlの例(4)
<div>変更まえ</div>
<h3>変更前</h3>
$("要素:header")→h1～h6までの要素
$(":header").text("変更後");
html(4)だと
<div>変更まえ</div>
<h3>変更後</h3>
になります。
$("要素1:has(要素2)")→要素2が含まれるの要素1
$("h1:has(strong)").text("変更後");
html(4)だと
<div>変更まえ</div>
<h3>変更前</h3>
になります。