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对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
js实现电灯开关效果
Jan 19 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/03 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
Python实现基于权重的随机数2种方法
2015/04/28 Python
Python正则表达式指南 推荐
2018/10/09 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python中return的返回和执行实例
2019/12/24 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python中url标签使用知识点总结
2020/01/16 Python
python def 定义函数,调用函数方式
2020/06/02 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
物理学专业自荐信
2014/06/11 职场文书
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
医院消毒隔离制度
2015/08/05 职场文书
医院病假条范文
2015/08/17 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android