parents(): 获取元素所有父节点,参数就是筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('.div2').parents().css('background','red');//整个document变红
$('.div2').parents('.div1').css('background','red');//整个div1变红
})
</script>
</head>
<body>
<div class="div1">aaaa
<div class="div2">bbbb</div>
</div>
</body>
</html>
closest():获取指定的最近的父节点,(包括元素自身), 必须有参数
<span style="color:#333333;">$('.div2').closest('.div1').css('background','red')</span>
siblings():获取除自身外所有相邻元素,参数具有筛选功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
// $('span').siblings().css('background','red')//除自身外所有相邻元素变红
$('span').siblings('p').css('background','red')//除自身外,所有p变红
})
</script>
</head>
<body>
<div>div</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>span</span>
<h1>h1</h1>
<h1>h1</h1>
</body>
</html>
nextAll():找到下面的所有兄弟节点,参数具有筛选功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('div').nextAll('p').css('background','red')//找到下面的所有兄弟节点,参数具有筛选功能
})
</script>
</head>
<body>
<div>div</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>span</span>
<h1>h1</h1>
<h1>h1</h1>
</body>
</html>
nextUntil()//往下找直到....截止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('div').nextUntil('h1').css('background','red')//找到下面的所有兄弟节点,参数具有筛选功能
})
</script>
</head>
<body>
<div>div</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>span</span>
<h1>h1</h1>
<h1>h1</h1>
<em>123</em>
</body>
</html>
clone(): 复制节点,设置参数来控制之前的行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('div').click(function(){
alert('csq');
})
$('div').clone(true).appendTo($('span'));//clone()复制节点,设置参数来控制之前的行为
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
wrap()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.js"></script>
<script>
$(function(){
$('p').wrap('<div></div>');
});
</script>
</head>
<body>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
<p>我是p元素</p>
</body>
</html>