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使用总结(非常详细)
Mar 22 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
canvas实现图像截取功能
Feb 06 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 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正确配置mysql(apache环境)
2011/08/28 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript函数库-集合框架
2007/04/27 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
JavaScript实现的拼图算法分析
2019/02/13 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
python异步存储数据详解
2019/03/19 Python
python提取log文件内容并画出图表
2019/07/08 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
学院领导推荐信
2013/10/30 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
yy婚礼主持词
2014/03/14 职场文书
药品营销策划方案
2014/06/15 职场文书
住房租房协议书
2014/08/20 职场文书
失职检讨书大全
2015/01/26 职场文书
2014年底个人工作总结
2015/03/10 职场文书
七夕情人节问候语
2015/11/11 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
python b站视频下载的五种版本
2021/05/27 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android