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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
原生js实现放大镜效果
Jan 11 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python常见工厂函数用法示例
2018/03/21 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
捐款活动总结
2014/08/27 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
同学聚会通知书
2015/04/20 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
详解CocosCreator项目结构机制
2021/04/14 Javascript