jQueryセレクタの使い方
jQueryセレクタ
セレクタ
≪インスタンス｜Instance｜emdw≫
選択
*
$("*")
すべての要素
#id
$("#lastname")
id=「lastname」の要素
.class
$(".intro")
すべてのclass=「intro」の要素
element
$("p")
すべての
要素
.class.class
$(".intro.demo")
すべてのclass=「intro」、class=「demo」の要素
:first
$("p:first")
最初の
要素
:last
$("p:last")
最後の
要素
:even
$("tr:even")
すべての偶数要素
:odd
$("tr:odd")
すべての奇数要素
:eq(index)
$("ul li:eq(3)")
リストの4番目の要素(indexは0から)
:gt(no)
$("ul li:gt(3)")
indexが3より大きい要素をリストします
:lt(no)
$("ul li:lt(3)")
indexが3未満の要素をリストします
:not(selector)
$("input:not(:empty)")
空でないすべてのinput要素
:header
$(":header")
すべてのタイトル要素
:animated
すべてのアニメーション要素
:contains(text)
$(":contains('W3School')")
指定した文字列を含むすべての要素
:empty
$(":empty")
サブ(要素)ノードのないすべての要素
:hidden
$("p:hidden")
すべての非表示の
要素
:visible
$("table:visible")
すべての表示されるテーブル
s1,s2,s3
$("th,td,.intro")
一致する選択を持つすべての要素
[attribute]
$("[href]")
hrefプロパティを持つすべての要素
[attribute=value]
$("[href='#']")
すべてのhrefプロパティの値が「#」に等しい要素
[attribute!=value]
$("[href!='#']")
すべてのhrefプロパティの値が「#」に等しくない要素
[attribute$=value]
$("[href$='.jpg']")
すべてのhrefプロパティの値には、「.jpg」で終わる要素が含まれます.
:input
$(":input")
すべての要素
:text
$(":text")
すべてのtype=「text」の要素
:password
$(":password")
すべてのtype=「password」の要素
:radio
$(":radio")
すべてのtype=「radio」の要素
:checkbox
$(":checkbox")
すべてのtype=「checkbox」の要素
:submit
$(":submit")
すべてのtype=「submit」の要素
:reset
$(":reset")
すべてのtype=「reset」の要素
:button
$(":button")
すべてのtype=「button」の要素
:image
$(":image")
すべてのtype=「image」の要素
:file
$(":file")
すべてのtype=「file」の要素
:enabled
$(":enabled")
アクティブなすべてのinput要素
:disabled
$(":disabled")
無効なすべてのinput要素
:selected
$(":selected")
選択されたすべてのinput要素
:checked
$(":checked")
選択したすべてのinput要素
参照
<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css("background-color","#00FF00");
$("#choose").css("background-color","#B2E0FF");
$("p").click(function(){
$(this).hide();
});
$("p:first").css("fontSize","38");
$(".intro").css("background-color","#0000FF");
$("tr:even").css("background-color","#B2E0FF");
$("tr:lt(1)").css("background-color","#FFE0FF");
$("p:contains(name)").css("background-color","#FF0000");
$(":input").css("background-color","#0000FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
<form action="">
Name: <input type="text" name="user" />
<br />
Password: <input type="password" name="password" />
<br />
<button type="button">Useless Button</button>
<input type="button" value="Another useless button" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
<br />
</form>
</body>
</html>
</body>
</html>