~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
// 兄弟中的排行
$(function(){
alert($('#div1').index());
//index()：索引值，代表的就是当前元素在所有兄弟节点中排第几。
//如果不添加参数，索引值与标签类型是无关的。
})
</script>
</head>
<body>
<div></div>
<p>p</p>
<div id="div1">div</div>
<div>div</div>
</body>
</html>
~~~
***
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#span1').index()); //弹出0，显示的是在父级中所以的位置
})
</script>
</head>
<body>
<div><span>span</span></div>
<div><span id="span1">span</span></div>
<div><span>span</span></div>
</body>
</html>
~~~
***
### 筛选后排行
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
// alert($('#span1').index('span'));// 2
//添加了参数span，现在的index就与div没有关系了，而是看#span1在所有span中的排行
//第二种写法也可以
alert($('span').index($('#span1')));// 2
//代表在所有span获取之后进行排行，看#span1排行老几
})
</script>
</head>
<body>
<div><span>span</span></div>
<span>span</span>
<div><span id="span1">span</span></div>
<div><span>span</span></div>
</body>
</html>
~~~
***
### 选项卡练习
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 div {
width: 200px;
height: 200px;
border: 1px #000 solid;
display: none;
}
.active {
background: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
$(function() {
$('#div1').find('input').click(function(){
// alert($(this).index('input'));
$('#div1').find('input').attr('class', '');
$(this).attr('class', 'active');
$('#div1').find('div').css('display', 'none');
$('#div1').find('div').eq($(this).index('input')).css('display', 'block');
// $(this).attr('class', 'active').siblings('input').attr('class', '');
// $('#div1').find('div').eq($(this).index('input')).css('display', 'block').siblings('div').css('display', 'none');
})
})
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
~~~
