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 相关文章推荐
js活用事件触发对象动作
Aug 10 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
asm.js使用示例代码
Nov 28 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
Javascript闭包实例详解
Nov 29 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
Vuex模块化应用实践示例
Feb 03 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php获取301跳转URL简单实例
2013/12/16 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python单例设计模式实现解析
2020/01/07 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
如何理解Python中的变量
2020/06/01 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
节能宣传周活动总结
2014/05/08 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
工地材料员岗位职责
2015/04/11 职场文书
讲文明倡议书
2015/04/29 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang