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>

 <input name="newsletter2"  value="我是儿子"/>

</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>

 <input name="newsletter2"  value="我是儿子"/>

</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>

 

posted @ 2015-11-08 17:07  Honker书生  阅读(223)  评论(0)    收藏  举报