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之Partial Application学习
Jan 10 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
原生js页面滚动延迟加载图片
Dec 20 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 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
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Python实现查找系统盘中需要找的字符
2015/07/14 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
pygame实现打字游戏
2021/02/19 Python
Django 批量插入数据的实现方法
2020/01/12 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
学院书画协会部门岗位职责
2013/12/01 职场文书
教师的实习鉴定
2013/12/15 职场文书
企业宣传方案
2014/03/04 职场文书
销售经理竞聘书
2014/03/31 职场文书
庆祝国庆节标语
2014/10/09 职场文书
任命书怎么写
2015/03/02 职场文书
大客户经理岗位职责
2015/04/09 职场文书
管理失职检讨书
2015/05/05 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS