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 相关文章推荐
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
window.open()实现post传递参数
Mar 12 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
简单了解常用的JavaScript 库
Jul 16 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获取字符串的编码格式的方法(函数)
2013/06/21 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
PHP 错误处理机制
2015/07/06 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
java script编程起步(第三课)
2007/01/10 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python实现祝福弹窗效果
2019/04/07 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
python数值基础知识浅析
2019/11/19 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
Python实现GIF图倒放
2020/07/16 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
法律进企业活动方案
2014/03/04 职场文书
司机职责范本
2014/03/08 职场文书
团代会主持词
2014/04/02 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
出租房屋协议书
2014/09/14 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
python画条形图的具体代码
2022/04/20 Python