Jquery选择器（一）

最新推荐文章于 2024-04-16 18:09:03 发布

会做饭的技术男

最新推荐文章于 2024-04-16 18:09:03 发布

阅读量450

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjhj22k2jbjb&title=Jquery%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E4%B8%80%EF%BC%89

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

一、基本选择器

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>

会做饭的技术男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery选择器（一）

一、基本选择器1.查找 ID 为"myDiv"的元素。$(document).ready(function(){ $("#mydiv");});<body> <div id="mydiv">id="mydiv"</div></body>2.查找所有类是 "myClass" 的元素.$(document).read...
复制链接

扫一扫