HTML页面结构:
<body>
<div>div</div>
<span>span</ span>
<p>p</p>
</body>
1、next()
<script>
$ (function () {
$('span') . next () .css ('background', 'red');
});
</script>
//改变<p>p</p>背景样式。
2、prev()
<script>
$ (function () {
$('span') . prev() .css ('background', 'red');
});
</script>
//改变<div>div</div>背景样式。
3、find()
<div>
<h3>h3</h3>
<h2>h2</h2>
<h3>h3</h3>
<h3>h3</h3>
<h2 id='h'>h2</h2>
<h2>h2</h2>
</div>
<script>
$ (function() {
$('div')l. find('h2') .css ('background', 'red');
}) ;
</script>
//div中多条H2的内容,样式会改变。
eq()
$('div') .find('h2') .eq(1) . css (' background', 'red') ;
索引为1的h2会发生样式改变
index()
$ (function() {
alert( $('#h').index() );
}) ;
//索引index()就是当前元素在所有兄弟节点中的位置,此处结果为4
|