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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
javascript的BOM汇总
Jul 16 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
微信小程序保存图片到相册权限设置
Apr 09 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
JavaScript实现串行请求的示例代码
Sep 14 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
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
HTML的select控件美化
2017/03/27 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
pandas apply多线程实现代码
2020/08/17 Python
Python通过len函数返回对象长度
2020/10/22 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
初级会计求职信范文
2014/02/15 职场文书
三万活动总结
2014/04/28 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android