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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
vue获取form表单的值示例
Oct 29 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
简单的js分页脚本
2009/05/21 Javascript
JavaScript 原型继承
2011/12/26 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
EM算法的python实现的方法步骤
2018/01/02 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
高一英语教学反思
2014/01/22 职场文书
诚信考试倡议书
2014/04/15 职场文书
营销团队口号
2014/06/06 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
大学生受助感言
2015/08/01 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP