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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
原生js编写焦点图效果
Dec 08 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
swiper自定义分页器的样式
Sep 14 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 print EOF实现方法
2009/05/21 PHP
php的memcached客户端memcached
2011/06/14 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
歌唱比赛主持词
2014/03/18 职场文书
高三语文复习计划
2015/01/19 职场文书
Python jiaba库的使用详解
2021/11/23 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
Java对文件的读写操作方法
2022/04/29 Java/Android