使用jquery选择器如何获取父级元素、同级元素、子元素


Posted in Javascript onMay 14, 2014

一、获取父级元素

1、 parent([expr]):

获取指定元素的所有父级元素

<div id="par_div"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></div> 
<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]):

获取指定元素后边的所有同级元素

<div><span>And Again</span></div> 
var p_nex = $("p").nextAll(); 
p_nex.addClass('p_next_all');

注意看最后一个”<p>”标签哦,也被加上了'p_next_all'这个类名哦~~

3、andSelf():

获取指定元素后边的所有同级元素,之后加上指定的元素

我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。

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

注意看第一个“<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').

例:

<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'); 的效果是:

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
JavaScript函数获取事件源的小例子
May 14 #Javascript
javascript单引号和双引号的区别和处理
May 14 #Javascript
document.write的几点使用心得
May 14 #Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 #Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 #Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 #Javascript
JQuery性能优化的几点建议
May 14 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
python实现远程控制电脑
2019/05/23 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
销售会计工作职责
2013/12/02 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
《钱学森》听课反思
2014/03/01 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
工作失误检讨书
2015/01/26 职场文书
财务人员岗位职责
2015/02/03 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python