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

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>