首页 web前端 js教程 使用jquery选择器获取父元素、子元素、同级元素的方法实例

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

May 15, 2018 am 11:11 AM
jquery 使用 元素 获取 选择器

一、获取父级元素 

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('a_par'); 
});
登录后复制

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> 
$('li.third-item').next().css('
background-color
', 'red'); 
</script> 
</body> 
</html>
登录后复制

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

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass('p_next_all');
登录后复制

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

&lt;p&gt;Hello&lt;/p&gt;&lt;p&gt;Hello Again&lt;/p&gt;&lt;p&gt;&lt;span&gt;And Again&lt;/span&gt;&lt;/p&gt; 
var p_nex = $(&quot;p&quot;).nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);
登录后复制

注意看第一个“<p>”标签啊,这句话的意思是选择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').
例:

&lt;ul class=&quot;level-1&quot;&gt; 
&lt;li class=&quot;item-i&quot;&gt;I&lt;/li&gt; 
&lt;li class=&quot;item-ii&quot;&gt;II 
&lt;ul class=&quot;level-2&quot;&gt; 
&lt;li class=&quot;item-a&quot;&gt;A&lt;/li&gt; 
&lt;li class=&quot;item-b&quot;&gt;B 
&lt;ul class=&quot;level-3&quot;&gt; 
&lt;li class=&quot;item-1&quot;&gt;1&lt;/li&gt; 
&lt;li class=&quot;item-2&quot;&gt;2&lt;/li&gt; 
&lt;li class=&quot;item-3&quot;&gt;3&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li class=&quot;item-c&quot;&gt;C&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li class=&quot;item-iii&quot;&gt;III&lt;/li&gt; 
&lt;/ul&gt;
登录后复制

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

以上是使用jquery选择器获取父元素、子元素、同级元素的方法实例的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

crystaldiskmark是什么软件?-crystaldiskmark如何使用? crystaldiskmark是什么软件?-crystaldiskmark如何使用? Mar 18, 2024 pm 02:58 PM

crystaldiskmark是什么软件?-crystaldiskmark如何使用?

foobar2000怎么下载?-foobar2000怎么使用 foobar2000怎么下载?-foobar2000怎么使用 Mar 18, 2024 am 10:58 AM

foobar2000怎么下载?-foobar2000怎么使用

谷歌安全码在哪里获取 谷歌安全码在哪里获取 Mar 30, 2024 am 11:11 AM

谷歌安全码在哪里获取

百度网盘app怎么用 百度网盘app怎么用 Mar 27, 2024 pm 06:46 PM

百度网盘app怎么用

网易邮箱大师怎么用 网易邮箱大师怎么用 Mar 27, 2024 pm 05:32 PM

网易邮箱大师怎么用

教你使用 iOS 17.4「失窃设备保护」新进阶功能 教你使用 iOS 17.4「失窃设备保护」新进阶功能 Mar 10, 2024 pm 04:34 PM

教你使用 iOS 17.4「失窃设备保护」新进阶功能

BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包? Apr 26, 2024 am 09:40 AM

BTCC教学:如何在BTCC交易所绑定使用MetaMask钱包?

小米汽车app怎么用 小米汽车app怎么用 Apr 01, 2024 pm 09:19 PM

小米汽车app怎么用

See all articles