jQuery中nextAll()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中nextAll()方法用法。分享给大家供大家参考。具体分析如下:

此方法查找匹配元素之后所有的同辈元素。也可以使用可选的表达式对同辈元素集合进行筛选。

语法结构:

$(selector).nextAll(expr)

参数列表:

参数 描述
expr 可选。用来过滤的表达式。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll().css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈元素中的字体颜色设置蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<style type="text/css"> 

.father{ 

  height:200px; 

  width:200px; 

  border:1px solid blue; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("p").nextAll("div").css("color","blue") 

}) 

</script> 

</head> 

<body> 

<div class="father"> 

  <p>我是p元素</p> 

  <span>我是span元素</span> 

  <div>我是div元素</div> 

  <p>我是p元素</p> 

  <div>我是div元素</div> 

</div> 

</body> 

</html>

将p元素之后的所有同辈div元素中的字体颜色设置蓝色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
JS分页效果示例
Oct 11 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
精通JavaScript的this关键字
May 28 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
jQuery中next()方法用法实例
Jan 07 #Javascript
jQuery中find()方法用法实例
Jan 07 #Javascript
jQuery中closest()函数用法实例
Jan 07 #Javascript
javascript实现全角与半角字符的转换
Jan 07 #Javascript
自己封装的常用javascript函数分享
Jan 07 #Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 #Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 #Javascript
You might like
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
基于php实现的验证码小程序
2016/12/13 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
javascript multibox 全选
2009/03/22 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python使用any判断一个对象是否为空的方法
2014/11/19 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python使用mysql的两种使用方式
2018/03/07 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python