您现在的位置是:群英 > 开发技术 > web开发
jQuery中next()方法作用是什么,怎样使用
Admin发表于 2022-04-28 11:54:591443 次浏览
这篇文章主要给大家介绍“jQuery中next()方法作用是什么,怎样使用”的相关知识,下文通过实际案例向大家展示操作过程,内容简单清晰,易于学习,有这方面学习需要的朋友可以参考,希望这篇“jQuery中next()方法作用是什么,怎样使用”文章能对大家有所帮助。



next()方法方法获得匹配元素集合中每个元素紧邻的同辈元素。也可以使用可选的表达式对同辈元素集合进行筛选。

语法结构:

代码如下: $(selector).next(expr)

 

参数列表:

参数 描述
expr 可选。用于筛选的表达式

 

实例代码:

实例一:

代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//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="//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中next()方法作用是什么,怎样使用”的文章就介绍到这了,感谢各位的阅读,更多相关jQuery中next()方法作用是什么,怎样使用内容,欢迎关注群英网络资讯频道,小编将为大家输出更多高质量的实用文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: jQuery next方法
相关信息推荐
2022-04-28 17:44:24 
摘要:html设置元素不可见的方法:1、在元素标签中添加hidden属性;2、在元素标签中使用style属性设置“display:none”样式;3、在元素标签中使用style属性设置“visibility:hidden”样式。
2022-05-16 11:37:26 
摘要:区别:1、不一样的运行环境,可以利用浏览器打开H5网页,运用微信平台打开小程序;2、H5开发的成本比较高,而小程序开发完全借助官方下载的开发工具,因此开发成本相对低廉很多;3、从程序本身来看,小程序能得到更多的系统权限,而H5的权限很低。
2022-08-13 17:50:07 
摘要:一、demo简介1.效果展示如下图,我截了三个瞬间,但其实这是一个连续的动画,就是这个大圆不停地吞下小圆。2.这个动画可以拆分为两部分,首先是大圆张嘴闭嘴的动画,相当于画一个圆弧,规定一下它的角度就好
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部