jquery next nextAll nextUntil siblings的区别介绍


Posted in Javascript onOctober 05, 2013

next:紧挨着$('')的一个元素

nextAll:在$('')以后的所有的同辈元素

nextUntil:until有直到。。。之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在nextUntil参数之前,不包括匹配的元素本身

sibings:$('')前后的所有同辈元素

简单理解就是,next就是找他的弟弟/妹妹,nextAll就是找他所有的弟弟/妹妹,nextUntil就是找比他小一定年龄的弟弟/妹妹,siblings就是找他所有的哥哥/姐姐,还有他的所有的弟弟/妹妹。所以同理的同辈关系,prev,prevAll ,prevUntil

下面是简单的测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Document</title> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
</head> 
<body> 
<div class="first"> 
<a href="#">hhh</a> 
<h1>这是一个标题</h1> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<div>hhha</div> 
<p>这是一个test</p> 
<p>这是一个test</p> 
</div> 
<script> 
$(function(){ 
//$('p:first').next().css('background','red'); 
//$('p:first').nextAll().css('background','yellow'); 
//$('p:first').nextUntil('div').css({'font-size':20,background:'red'}); 
//$('p:first').siblings().css('background','yellow'); 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
如何更好的编写js async函数
May 13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
jquery中animate动画积累的解决方法
Oct 05 #Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
javascript自启动函数的问题探讨
Oct 05 #Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
You might like
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
详解javascript遍历方式
2015/11/11 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue 组件简介
2020/07/31 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python实现代码统计器
2019/09/19 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
绝对经典成功的大学生推荐信
2013/11/08 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
浅析Python中的随机采样和概率分布
2021/12/06 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python