jQuery中nextAll()方法用法实例
更新时间：2015年01月07日 10:52:38 投稿：shichen2014
这篇文章主要介绍了jQuery中nextAll()方法用法,实例分析了nextAll()方法的功能、定义及查找匹配元素之后所有的同辈元素使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中nextAll()方法用法。分享给大家供大家参考。具体分析如下：
此方法查找匹配元素之后所有的同辈元素。也可以使用可选的表达式对同辈元素集合进行筛选。
语法结构:
复制代码 代码如下:
$(selector).nextAll(expr)
参数列表:
实例代码:
实例一:
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="https://www.jb51.net/" />
<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://www.jb51.net/" />
<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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了jquery.jsPlumb实现拓扑图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了完善的jquery处理机制的相关资料，感兴趣的小伙伴们可以参考一下2016-02-02
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
本篇文章主要是对Jquery EasyUI中弹出确认对话框以及加载效果的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jQuery插件form-validation-engine正则表达式操作示例
这篇文章主要介绍了jQuery插件form-validation-engine正则表达式操作,结合实例形式分析了jQuery插件form-validation-engine进行正则验证操作的相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了jQuery实现新消息闪烁标题提示的方法,实例分析了jQuery操作样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
使用jQuery UI的tooltip()函数，可以使悬浮提示框不再那么千篇一律，以下是完整的代码，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-06-06
当我们点击表格里面的标题显示相关的详细信息，比如点击新闻标题显示正文，而正文通常是在一个页面里面，通过获取传递的参数id查询数据库，然后显示出来2011-11-11
本文主要介绍了JQuery的基本知识，如：jquery内置函数，JQuery对象，Dom对象，jquery选择器，jquery的迭代，jquery的节点遍历等等，有助于对JQuery基本知识的学习与巩固。需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jQuery左右滚动支持图片放大缩略图图片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-08-08
这篇文章主要介绍了greybox——不开新窗口看新的网页2007-02-02
最新评论