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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vue中appear的用法
Aug 17 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP实现事件机制的方法
2015/07/10 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
客房主管岗位职责
2013/12/09 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
大学新闻系求职信
2014/06/03 职场文书
本溪水洞导游词
2015/02/11 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers