您现在的位置是:蓝石榴 > 个人博客 > 前端

个人博客

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

2016-12-06前端 1618
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>

很赞哦!(482)