Jquery选择器：通过class名获取ID

记录一下自己不太熟悉的Jquery选择器的用法。

通过class名获取

按 class 查找注意在 class 名称前加一个.：

var a = $('.red'); // 所有节点包含 `class="red"` 都将返回
// 例如:
// 
"red">...
// 
"green red">...

查找同时包含多个class名的对象,如同时包含”car”和“ bus”

var a = $('.car.bus'); // 注意没有空格！
// 符合条件的节点：
// 
"car bus">...
// 
"blue bus car">...

通过div的class名获取该div的ID

有时候我们只知道div的class名中包含其中一个姓名，想获取它的id.

$(".tab-pane.active").attr("id")
// 符合条件的结果：
one
// 
"tab-pane bus active" id="one">...

通过div的ID名获取该div的class

$(".tab-pane.active").attr("id")
$("div #hrefMenu0").attr("class")
// 符合条件的结果：
tab-pane bus active
// 
"tab-pane bus active" id="hrefMenu0">...

通过div的class名获取该div下的子集节点的ID

$(".tab-pane.active").children().attr("id")
// 获取到以下两个id:content，page
<div class="tab-pane active">
      <div id="content">div>
      
"page">
div>

通过div的class名获取该div下的同级节点的ID

$(".tab-pane.active").next().attr("id")
// 获取到以下id:content
<div class="tab-pane active">
div>
 <div id="content">div>

---

参考：

[1].jQuery 选择器与 DOM 操作
[2].JS获取节点的兄弟,父级,子级元素的方法