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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
JS中的三个循环小结
Jun 20 Javascript
详解Node全局变量global模块
Sep 28 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
用ES6写全屏滚动插件的示例代码
May 02 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
利用 window_onload 实现select默认选择
2006/10/09 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript常用方法总结
2015/05/14 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
python障碍式期权定价公式
2019/07/19 Python
python队列原理及实现方法示例
2019/11/27 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
物业管理应届生求职信
2013/10/28 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
推广普通话标语
2014/06/27 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
邀请函格式范文
2015/02/02 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
Vue2.0搭建脚手架
2022/03/13 Vue.js