jQuery 练习[二]: 获取对象 - 基本选择与层级

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

选择同一层级的其他元素, 如: $("#id2").siblings()

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

选择同一层级的其他 span, 如: $("#id2").siblings("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>　

编缉推荐阅读以下文章

• jQuery 练习[二]: 获取对象(3) - 根据属性、内容匹配, 还有表单元素匹配
• jQuery 练习[二]: 获取对象(2) - 定位子对象
• jQuery 练习[一]: 准备工作