jQuery 练习[二] jquery 对象选择器(1)

177 阅读 0 评论 117 点赞

我是靠谱客的博主曾经裙子，最近开发中收集的这篇文章主要介绍jQuery 练习[二] jquery 对象选择器(1)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

根据 id 选择(通过 id 只能选择一个对象), 如: $("#div2")

复制代码代码如下:

 
<div id="div1">AAA</div> 
<div id="div2">BBB</div> 
<div id="div3">CCC</div> 

根据标签选择, 如: $("span")

复制代码代码如下:

 
<div><span>AAA</span></div> 
<div>BBB</div> 
<span>CCC</span> 

根据样式的类名选择, 如: $(".class1")

复制代码代码如下:

 
<div class="class1">AAA</div> 
<div class="class2">BBB</div> 
<div class="class1">CCC</div> 

选择所有对象是: $("*")

可混合使用, 如(复制代码):

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可分层选择, 如: $(".class1 div label")

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

如: $(".class1 span")

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

只从子层中选择, 如: $(".class1 > span"); 如果没有中间的 > 会选择其下的所有符合条件的子孙对象

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

其后的, 如: $("div + span"); 这会选择所有紧跟在 div 后面的 span

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

同一层级(后面)的, 如: $("#id2 ~ *"); 这是选择 #id2 后面同一层级的所有(*)对象

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

混合使用, 如: $("#id3 label, #id3 ~ span")

复制代码代码如下:

 
<div class="class1"> 
<div id="id1">111</div> 
<div id="id2"><span>222</span></div> 
<div id="id3"><label>333</label></div> 
<span>444</span><br/> 
<span>555</span> 
</div> 

文章图片所用的测试工具下载地址 JavaScriptTest2.rar