jQuery中next()方法用法实例


Posted in Javascript onJanuary 07, 2015

本文实例讲述了jQuery中next()方法用法。分享给大家供大家参考。具体分析如下:

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

语法结构:

$(selector).next(expr)

参数列表:

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

实例代码:

实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/> 

<meta name="author" content="https://3water.com/" />

<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://3water.com/" />

<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程序设计有所帮助。

Javascript 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
vue-cli 关闭热更新操作
Sep 18 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
jQuery中children()方法用法实例
Jan 07 #Javascript
You might like
Laravel关系模型指定条件查询方法
2019/10/10 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python实现网页链接提取的方法分享
2014/02/25 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
中学生班主任评语
2014/01/30 职场文书
合伙经营协议书
2014/04/18 职场文书
医德考评自我评价
2014/09/14 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
关于车尾的标语大全
2015/08/11 职场文书
python如何在word中存储本地图片
2021/04/07 Python
详解Redis主从复制实践
2021/05/19 Redis