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 select(列表)的操作(取值/赋值)
Mar 16 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vue实现动态按钮功能
May 13 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
Vue实现背景更换颜色操作
Jul 17 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php实现的农历算法实例
2015/08/11 PHP
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
JS实现密码框效果
2020/09/10 Javascript
Python中的rjust()方法使用详解
2015/05/19 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python读取图片任意范围区域
2019/01/23 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
违纪检讨书范文
2015/01/27 职场文书
同学会邀请函模板
2015/01/30 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
Java中的Kotlin 内部类原理
2022/06/16 Java/Android
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技