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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
python MySQLdb使用教程详解
2018/03/20 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
python3实现弹弹球小游戏
2019/11/25 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
DNA测试:Orig3n
2019/03/01 全球购物
结构和类有什么异同
2012/07/16 面试题
全国道德模范事迹
2014/02/01 职场文书
业务总经理岗位职责
2014/02/03 职场文书
临床专业自荐信
2014/06/22 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
护士自荐信范文
2015/03/25 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技