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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
vue实现分页的三种效果
Jun 23 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
Javascript之datagrid查询详解
Sep 15 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
JavaScript中的其他对象
2008/01/16 Javascript
一些mootools的学习资源
2010/02/07 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Python模块常用四种安装方式
2020/10/20 Python
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
大学生学期自我鉴定
2014/03/19 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
房屋认购协议书
2015/01/29 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang