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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
基于jQuery实现滚动切换效果
Dec 02 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
Jan 04 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Vue如何清空对象
Mar 03 Vue.js
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下载远程文件类(支持断点续传)
2008/11/14 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
领悟php接口中interface存在的意义
2013/06/27 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
PHP PDO操作总结
2014/11/17 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
python中的闭包用法实例详解
2015/05/05 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python如何判断数独是否合法
2016/09/08 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
PyTorch的torch.cat用法
2020/06/28 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
机械个人求职信范文
2014/01/24 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
贫困证明怎么写
2015/06/16 职场文书
公司财务管理制度
2015/08/04 职场文书
企业法律事务工作总结
2015/08/11 职场文书
医德医风学习心得体会
2016/01/25 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP