首页 / JQUERY / jQuery 练习[二] jquery 对象选择器(1)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery 练习[二] jquery 对象选择器(1)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2042字，纯文字阅读大概需要3分钟。

内容图文

根据 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需刷新才能执行] 
jQuery 练习[二] jquery 对象选择器(1) - 文章图片

可分层选择, 如: $(".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

内容总结

以上是互联网集市为您收集整理的jQuery 练习[二] jquery 对象选择器(1)全部内容，希望文章能够帮你解决jQuery 练习[二] jquery 对象选择器(1)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/371117.html

来源：【匿名】