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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Servlet返回的数据js解析2种方法
Dec 12 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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简单防盗链实现方法
2015/07/29 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python实现ftp客户端示例分享
2014/02/17 Python
在Django的通用视图中处理Context的方法
2015/07/21 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
python sleep和wait对比总结
2021/02/03 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
主题酒店策划书
2014/01/28 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
篮球社团活动总结
2014/06/27 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
岗位聘任协议书
2015/09/21 职场文书
win sever 2022如何占用操作主机角色
2022/06/25 Servers