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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JS根据生日算年龄的方法
May 05 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue实现表格合并功能
Dec 01 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支持页面回退的两种方法
2008/01/10 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
vue的for循环使用方法
2019/02/12 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
Python+MongoDB自增键值的简单实现
2016/11/04 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
详解python深浅拷贝区别
2019/06/24 Python
Pytorch之保存读取模型实例
2019/12/30 Python
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
供货协议书范本
2014/04/22 职场文书
应用外语系自荐信
2014/06/26 职场文书
2014年车间工作总结
2014/11/21 职场文书