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实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
微信小程序实现弹出菜单功能
Jun 12 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
再次研究下cache_lite
2007/02/14 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
React如何避免重渲染
2018/04/10 Javascript
JavaScript中为事件指定处理程序的五种方式分析
2018/07/27 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python中sleep函数用法实例分析
2015/04/29 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
2014年庆元旦活动方案
2014/02/15 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
岗位聘任书范文
2014/03/29 职场文书
总经理司机岗位职责
2015/04/10 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
初三语文教学反思
2016/03/03 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers