cari

Rumah >hujung hadapan web >tutorial js >使用jquery选择器获取父元素、子元素、同级元素的方法实例

使用jquery选择器获取父元素、子元素、同级元素的方法实例

伊谢尔伦
伊谢尔伦asal
2018-05-15 11:11:562899semak imbas

一、获取父级元素 

1、 parent([expr]): 获取指定元素的所有父级元素 

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});

firebug查看jquery parent效果

二、获取同级元素：
1、next([expr])：
获取指定元素的下一个同级元素（注意是下一个同级元素哦） 

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

这个例子的结果是，只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素 

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

注意看最后一个”e388a4556c0f65e1904146cc1a846bee”标签哦，也被加上了'p_next_all'这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素，之后加上指定的元素 

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);

注意看第一个“e388a4556c0f65e1904146cc1a846bee”标签啊，这句话的意思是选择p标签后面的所有同级标签，以及自己。。。
以下这两个不举具体的例子了，实际上就是next()和nextAll()的相反喽
4、prev()：获取指定元素的上一个同级元素（是上一个哦）。
5、prevAll()：获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1：>
例如：var aNods = $("ul > a");查找ul下的所有a标签
2、查找子元素方式2：children()
3、查找子元素方式3：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 )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
例： 

<ul class="level-1"> 
<li class="item-i">I</li> 
<li class="item-ii">II 
<ul class="level-2"> 
<li class="item-a">A</li> 
<li class="item-b">B 
<ul class="level-3"> 
<li class="item-1">1</li> 
<li class="item-2">2</li> 
<li class="item-3">3</li> 
</ul> 
</li> 
<li class="item-c">C</li> 
</ul> 
</li> 
<li class="item-iii">III</li> 
</ul>

使用：$('ul.level-2').children().css('border', '1px solid green');
使用 $('ul.level-2').find('li').css('border', '1px solid green')。

Atas ialah kandungan terperinci 使用jquery选择器获取父元素、子元素、同级元素的方法实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery css firebug var dom 选择器 border ul li
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery is()函数的用法实例详解Artikel seterusnya：jquery常用几种选择器的实例用法区别

Artikel berkaitan

Lihat lagi