Jquery选择器(一)

本文隶属于分类

Web开发

广告推荐

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:class   la   sp   for   io   as   bs   c   一个   

一、基本选择器

 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>

 

Jquery选择器(一)

标签:class   la   sp   for   io   as   bs   c   一个   

原文:http://www.cnblogs.com/qinyi173/p/4947631.html

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区