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 相关文章推荐
onpropertypchange
Jul 01 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php横向重复区域显示二法
2008/09/25 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
ie focus bug 解决方法
2009/09/03 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
chrome调试javascript详解
2015/10/21 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue加载自定义的js文件方法
2018/03/13 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python相似模块用例
2016/03/04 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
详解Python中的测试工具
2019/06/09 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
学校司机岗位职责
2013/11/14 职场文书
应届护士推荐信
2013/11/16 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
养牛场项目建议书
2014/05/13 职场文书
英语求职信范文
2014/05/23 职场文书
建筑工地大门标语
2014/06/18 职场文书
求职自我推荐信
2014/06/25 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
民主生活会发言材料
2014/10/20 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
文明家庭事迹材料
2014/12/20 职场文书
预备党员半年考察意见
2015/06/01 职场文书
单位更名证明
2015/06/18 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers