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实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
jQuery实现视频展示效果
May 30 jQuery
js+canvas实现画板功能
Sep 13 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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编程开发“虚拟域名”系统
2006/10/09 PHP
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP 组件化编程技巧
2009/06/06 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php session_decode函数用法讲解
2019/05/26 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
关于Anemometer图形化显示MySQL慢日志的工具搭建及使用的详细介绍
2020/07/13 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
校长岗位职责
2013/11/26 职场文书
自荐书范文
2013/12/08 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
水知道答案观后感
2015/06/08 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
python中mongodb包操作数据库
2022/04/19 Python