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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 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 EOT定界符的使用详解
2008/09/30 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JavaScript forEach()遍历函数使用及介绍
2015/07/08 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
Less 安装及基本用法
2018/05/05 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
介绍一下Make? 为什么使用make
2016/07/31 面试题
家长对小学生的评语
2014/01/28 职场文书
市场部岗位职责
2015/02/12 职场文书
刑事上诉状范文
2015/05/22 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
消费者投诉书范文
2015/07/02 职场文书
2016年寒假政治学习心得体会
2015/10/09 职场文书
社会实践心得体会范文
2016/01/14 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技