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 相关文章推荐
javascript使用location.search的示例
Nov 05 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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标签的实例代码
2013/11/26 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
php生成微信红包数组的方法
2019/09/05 PHP
dojo 之基础篇
2007/03/24 Javascript
js+css在交互上的应用
2010/07/18 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python redis存入字典序列化存储教程
2020/07/16 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
门卫岗位安全职责
2013/12/13 职场文书
办公室前台的岗位职责
2013/12/20 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
军事博物馆观后感
2015/06/05 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python