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 相关文章推荐
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JavaScript类的继承多种实现方法
May 30 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的简易冒泡法代码分享
2012/08/28 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
PHP实现的购物车类实例
2015/06/17 PHP
JS 面向对象之神奇的prototype
2011/02/26 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
Javascript的闭包详解
2014/12/26 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
2016/10/26 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
Python HTMLParser模块解析html获取url实例
2015/04/08 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
python线程、进程和协程详解
2016/07/19 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
python 实现目录复制的三种小结
2019/12/04 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
护士专业推荐信
2013/11/02 职场文书
玲玲的画教学反思
2014/02/04 职场文书
活动总结格式
2014/08/30 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Java 写一个简单的图书管理系统
2022/04/26 Java/Android