<!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>