Jquery选择器常用语法
2018-02-27 本文已影响23人
瑾兰
记录一下自己不太熟悉的Jquery选择器的用法。
通过class名获取
按 class 查找注意在 class 名称前加一个.:
var a = $('.red'); // 所有节点包含 `class="red"` 都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
查找同时包含多个class名的对象,如同时包含"car"和“ bus”
var a = $('.car.bus'); // 注意没有空格!
// 符合条件的节点:
// <div class="car bus">...</div>
// <div class="blue bus car">...</div>
通过div的class名获取该div的ID
有时候我们只知道div的class名中包含其中一个姓名,想获取它的id.
$(".tab-pane.active").attr("id")
// 符合条件的结果:
one
// <div class="tab-pane bus active" id="one">...</div>
通过div的ID名获取该div的class
$(".tab-pane.active").attr("id")
$("div #hrefMenu0").attr("class")
// 符合条件的结果:
tab-pane bus active
// <div class="tab-pane bus active" id="hrefMenu0">...</div>
通过div的class名获取该div下的子集节点的ID
$(".tab-pane.active").children().attr("id")
// 获取到以下两个id:content,page
<div class="tab-pane active">
<div id="content"></div>
<ul id="page"></ul>
</div>
通过div的class名获取该div下的同级节点的ID
$(".tab-pane.active").next().attr("id")
// 获取到以下id:content
<div class="tab-pane active">
</div>
<div id="content"></div>
参考:
[foo]: https://hackmd.io/s/B1yNWFM1l "jQuery 选择器与 DOM 操作"
[foo]: http://www.jb51.net/article/45372.htm "JS获取节点的兄弟,父级,子级元素的方法"