jQuery中next()方法用法实例
更新时间：2015年01月07日 10:48:05 投稿：shichen2014
这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下
本文实例讲述了jQuery中next()方法用法。分享给大家供大家参考。具体分析如下：
此方法获得匹配元素集合中每个元素紧邻的同辈元素。
也可以使用可选的表达式对同辈元素集合进行筛选。
语法结构:
复制代码 代码如下:
$(selector).next(expr)
参数列表:
实例代码:
实例一:
复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="https://www.jb51.net/" />
<title>next()函数-脚本之家</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").next().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 charset="utf-8"/>
<meta name="author" content="https://www.jb51.net/" />
<title>next()函数-脚本之家</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").next("span").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元素紧邻的span元素中的字体颜色设置为蓝色。
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery 简短 右键菜单 兼容ie6 ie7 ie8 firefox chrome2010-01-01
这篇文章主要介绍了jQuery中:submit选择器用法,实例分析了:submit选择器的功能、定义及匹配提交按钮的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery通过改变input的type属性实现密码显示隐藏切换功能
大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求，大家都是怎么实现的呢？今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能，需要的朋友参考下2017-02-02
Jquery知识点一 Jquery的ready和Dom的onload的区别
onload是所有dom元素创建完毕，图片、css等都加在完毕后才触发 ready则是dom元素创建完毕后就被触发2011-01-01
JS遮罩层效果 兼容ie firefox jQuery遮罩层
史上最精简，最强大的JS遮罩层效果，支持ie firefox jQuery遮罩层2010-07-07
这篇文章主要介绍了jQuery实现的滑块滑动导航效果,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下2018-06-06
这篇文章主要为大家详细介绍了jQuery利用键盘上下键移动表格内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
本文为大家介绍下jquery的dom对象的事件隐藏显示和对象数组，感兴趣的朋友可以参下2013-12-12
这篇文章主要介绍了jQuery实现的鼠标经过时变宽的效果,实例演示了jQuery的Kwicks插件实现针对鼠标事件的响应与页面元素样式动态变换的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-04-04
最新评论