Jquery选择器（一）

一、基本选择器

1.查找 ID 为"myDiv"的元素。

$(document).ready(function(){
$("#mydiv");
});

<body>
<div id="mydiv">id="mydiv"</div>
</body>

2.查找所有类是 "myClass" 的元素.

$(document).ready(function(){
$(".myClass");
});

<body>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
</body>

3.查找一个 p元素。

$(document).ready(function(){
$("p");
});

<body>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<p>我是p元素</p>
</body>

4.找每一个元素

$(document).ready(function(){
$("*");
});

<body>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<p>我是p元素</p>
</body>

5.选择多个选择器元素

$(document).ready(function(){
$("#mydiv,p").css("color","red");
});

<body>
<div id="mydiv">div class="mydiv"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<p>我是p元素</p>
</body>

二、层级选择器

1.后代选择器（所有包含孙子）

$(document).ready(function(){
$("form input").css("color"," red");
});

<body>
<form>
<label>Name:</label>
<input name="name" value="我是儿子" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="我是孙子"/>
</fieldset>
</form>
</body>

2.子元素选择器（只匹配到儿子）

$(document).ready(function(){
$("form > input").css("color"," red");
});

<body>
<form>
<label>Name:</label>
<input name="name" value="我是儿子" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="我是孙子"/>
</fieldset>

</form>
</body>

3.相邻元素选择器

$(document).ready(function(){
$("label+ input").css("color"," red");
});

<body>
<form>
<label>Name:</label>
<input name="name" value="我是儿子" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="我是孙子"/>
</fieldset>

</form>

</body>

4.兄弟选择器

匹配form之后的input元素

$(document).ready(function(){
$("form~input").css("color"," red");
});

<body>
<form>
<label>Name:</label>
<input name="name" value="我是儿子" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="我是孙子"/>
</fieldset>

</form>

<input name="newsletter2" value="我是form之后的input"/>

</body>