标签：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src = "/jquery/jquery.1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"yellow","border":"1px solid red"});
//jQuery children() 方法
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid blue"});
});
//jQuery find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$(document).ready(function(){
$("div").find("span").css("color":"red","border":"3px solid blue");
});
});
$(document).ready(function(){
$("div").find("*").css("color":"blue","border":"3px solid pink");
});
//jQuery siblings() 方法
$(document).ready(function(){
$("div").siblings().css({"color":"blue","border":"3px solid purple"});
$("div").siblings("p").css({"color":"blue","border":"3px solid black"});
});
//jQuery next() 方法
$(document).ready(function(){
$("h2").next().css({"color":"deepblue"."border":"5px solid pink"});
});
//jQuery nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextAll().css({"color":"deepblue","border":"5px solid grey"});
});
//返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"black","border":"4px solid green"});
});
//jquery first()返回被选元素的首个元素。
$(document).ready(function(){
$("div p").frst().css({"background-color":"yellow"});
});
//jQuery last() 方法返回被选元素的最后一个元素。
$(document).ready(function(){
$("div p").last().css({"background-color":"yellow"});
});
//jQuery eq() 方法返回被选元素中带有指定索引号的元素。
$(document).ready(function(){
$("p").eq(1).css({"background-color":"yellow"});
});
//jQuery filter() 方法
$(document).ready(function(){
$("p").filter().css({"background-color":"blue"});
});
</script>
<style>
.ancestors{
display: block;
border: 1px solid lightgrey;
color:grey;
padding: 5px;
margin: 15px;
}
.descents{
display: block;
border: 3px solid lightgreen;
color:green;
padding: 5px;
margin:15px;
}
.decentdants{
display: block;
border: 3px solid lawngreen;
color: pink;
padding: 10px;
margin:20px;
}
.decentdant{
display: block;
border: 3px solid pink;
color: olivedrab;
padding: 5px;
margin: 15px;
}
.sibilings *{
display: block;
border: 3px solid powderblue;
color:orangered;
padding: 5px;
margin: 15px;
}
.sibling *{
display: block;
border: 3px solid blanchedalmond;
color:red;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body class="ancestors">
body曾曾祖父
<div>div曾祖父
<ul>ul祖父
<li>li直接父
<span>span</span>
</li>
</ul>
</div>
<!--jQuery children() 方法-->
<div class="descents" style="width: 500px;">
div元素
<p>
p(子)
<span>span(孙)</span>
</p>
<p>
p(child)
<span>span(孙)</span>
</p>
</div>
<div class="decentdants" style="width: 500px;">
div元素
<p class="1">p(子)
<span>span（孙）</span>
</p>
<p class="2">p(子)
<span>span（孙）</span>
</p>
</div>
<!--jQuery find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。-->
<div class="decentdant" style="width: 500px;">
div元素
<p>p(子)
<span>span(孙)</span>
</p>
<p>p(child)
<span>span(孙)</span>
</p>
</div>
<!--jQuery siblings() 方法-->
<div class="sibilings">div父
<p>p</p>
<span>span</span>
<p>p</p>
<h2>h2</h2>
<h3>h3</h3>
</div>
<!--jQuery nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。-->
<div class="sibling">
div元素<p>
p
</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
<!--jQuery first() 方法返回被选元素的首个元素。-->
<h1>Welcome to my home!</h1>
<div>
<p>This is a paragraph in div</p>
</div>
<div>
<p>This is another paragraph in div!</p>
</div>
<p>This is paragraph too.</p>
<!--jQuery last() 方法返回被选元素的最后一个元素。-->
<!--jQuery eq() 方法返回被选元素中带有指定索引号的元素。-->
<h1>Welcome to my page!</h1>
<p>我是唐老鸭。(index 0)</p>
<p>唐老鸭。(index 1)</p>
<p>我住在html5.(index 2)</p>
<p>我最好的朋友是米老鼠。(index 3)</p>
<!--jQuery filter() 方法-->
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/whatcanido/p/5097149.html
