jQuery选择器之获取父级元素、同级元素、子元素


   作者蓝石榴    由lan16转载自蓝石榴    更新于2016-12-06 19:01    已被浏览130次

1.父级元素
  1)parent()获取指定元素的所有父级元素,用法如下:
  <div id="div1">
    <span id="span1">1</span>
    <span id="span2">2</span>
    <span id="span3">3</span>
    <span id="span4">4</span>
    <span id="span5">5</span>
    <span id="span6">6</span>
  </div>
  <script language="javascript">
    $("#span4").parent();//这个获取的等同于$("#div1")
  </script>

2.同级元素
  1)next()用来获取下一个同辈元素;
  2)nextAll()获取指定元素后边的所有同级元素;
  3)prev()用来获取上一个同辈元素;
  4)prevAll()获取指定元素前边的所有同级元素;
  5)siblings()用来获取所有的同辈元素;
  6)andSelf()获取指定元素后边的所有同级元素,之后加上指定的元素。
  用法如下:
  <div>
    <span id="span1">1</span>
    <span id="span2">2</span>
    <span id="span3">3</span>
    <span id="span4">4</span>
    <span id="span5">5</span>
    <span id="span6">6</span>
  </div>
  <script language="javascript">
    $("#span4").next();//这个获取的等同于$("#span5")
    $("#span4").nextAll();//这个获取的等同于$("#span5,#span6")
    $("#span4").prev();//这个获取的等同于$("#span3")
    $("#span4").prevAll();//这个获取的等同于$("#span1,#span2,#span3")
    $("#span4").siblings();//这个获取的等同于$("#span1,#span2,#span3,#span5,#span6")
    $("#span4").prev().andSelf();//这个获取的等同于$("#span3,#span4")
  </script>

3.子级元素
  children()和find()都是用来获得子元素,children()和find()的异同:
  1)children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样;
  2)children方法获得的仅仅是元素一下级的子元素,即:immediate children;
  3)find方法获得所有下级元素,即:descendants of these elements in the DOM tree;
  4)children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法的参数selector方法是必选的;
  5)find方法事实上可以通过使用 jQuery(selector,context)来实现。即$('div').find('span')等同于$('span','div')。
  用法如下:
  <div id="div1">
    <span id="span1">1</span>
    <span id="span2">2</span>
    <span id="span3">3</span>
    <span id="span4">4</span>
    <span id="span5">5</span>
    <span id="span6">6</span>
  </div>
  <script language="javascript">
    $("#div1").children();//这个获取的等同于$("#span1,#span2,#span3,#span4,#span5,#span6")
    $("#div1").children("#span5");//这个获取的等同于$("#span5")
    $("#div1").find("#span5");//这个获取的等同于$("#span5")
  </script>