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 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
js实现简单选项卡制作
Aug 05 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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根据IP地址获取所在城市具体实现
2013/11/27 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
Javascript中replace()小结
2015/09/30 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
Python中tell()方法的使用详解
2015/05/24 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
python编程的核心知识点总结
2021/02/08 Python
某公司.Net方向面试题
2014/04/24 面试题
中英文自我评价常用句型
2013/12/19 职场文书
公司活动策划方案
2014/01/13 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
道德之星事迹材料
2014/05/03 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年电教工作总结
2014/12/19 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
董事长开业致辞
2015/07/29 职场文书
2015中秋祝酒词
2015/08/12 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技