jQuery中next()方法详解

  • 时间:
  • 556人关注

这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下,另外这篇文章主要知识点是关于jQuery、next()、方法、用法、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

本文实例讲述了jQuery中next()方法用法。分享给大家供大家参考。具体分析如下:

此方法获得匹配元素集合中每个元素紧邻的同辈元素。
也可以使用可选的表达式对同辈元素集合进行筛选。

语法结构:

复制代码 代码如下:
$(selector).next(expr)

 

参数列表:

参数 描述
expr 可选。用于筛选的表达式

 

实例代码:

实例一:

 

复制代码 代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.jb51.net/" />
<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="//www.jb51.net/" />
<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程序设计有所帮助。


上一篇:详解jQuery offsetParent()方法

下一篇:jQuery构造函数init参数知识点总结

相关内容

  • Python gevent协程切换实现方法

    这篇文章主要介绍了Python gevent协程切换实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    04-07Python gevent协程切换

    阅读更多
  • Elasticsearch py客户端库安装及使用方法

    这篇文章主要介绍了Elasticsearch py客户端库安装及使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    04-07Elasticsearch py客户端库

    阅读更多
  • PyQt5结合matplotlib绘图的实现方法

    这篇文章主要介绍了PyQt5结合matplotlib绘图的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    05-06PyQt5结合matplotlib

    阅读更多
  • 通过实例了解python__slots__使用方法

    这篇文章主要介绍了通过实例了解python__slots__使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    04-09python __slots__

    阅读更多
  • python -v 报错问题的解决方法

    在本篇文章里小编给大家整理了关于python -v 报错问题的解决方法及相关知识点,有兴趣的朋友们可以学习下。

    04-09如何解决python -v 报错问题

    阅读更多
  • jQuery UI开发指南

    jQuery UI开发指南

    《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

    大小:6.02 MB前端开发

    点击下载
  • 移动互联网之路:HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

    移动互联网之路:HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通

    移动互联网之路 全面、系统地讲解了 HTML 5、CSS 3 和 jQuery Mobile 从 Web 界面设计到移动应用开发的各种技术和知识点。本书难度适中,知识结构严谨,内容由浅入深、从易到难,讲解通俗易懂,

    大小:92.1 MB移动互联网

    点击下载
  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

    大小:99.0 MBjQuery

    点击下载
  • Bootstrap与jQuery UI框架设计

    Bootstrap与jQuery UI框架设计

    随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

    大小:180 MBjQuery

    点击下载
  • jQuery实战从入门到精通

    jQuery实战从入门到精通

    本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

    大小:189.1 MBjQuery

    点击下载
  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小:48.4 MBjQuery

    点击下载

学习笔记

33小时53分钟前回答

jQuery中slidedown与slideup实例用法

这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlhead title/title style type=text/css *{font-size:12px;} div{width:600px;margin:auto;} #control{background-color:gold;padding:10px;margin-bottom:10px;} /style script src=../js/jquery-1.5.1.min.js type=text/javascript/script script type=text/javascript $(function () { $(#btnslideDown).click(function () { $(#message).slideDown(1000); }); $(#btnslideUp).click(function () { $(#message).slideUp(1000); }); //*****举例1 // $(#btnToggle).click(function () { // $(#message).slideToggle(1000); // }); //*****举例2 动画函……

7小时42分钟前回答

jQuery fadeTo方法调整图片的透明度用法说明

head title/title style type=text/css .imgclass{ width:300px; height:300px; border:solid 1px red;} /style script src=jquery-1.9.1.js type=text/javascript/script script type=text/javascript $(function () { $(#Select1).change(function () { var thevalue = $(this).val(); $(img).fadeTo(2000, thevalue); }) }) /script /head body table tr td 透明度: select id=Select1 option value=00/option option value=0.20.2/option option value=0.40.4/option option value=0.60.6/option option value=0.80.8/option option value=11/option /select /td td img src=images/泪奔1.gif class=imgclass / /td /tr /table /body ……

21小时35分钟前回答

jQuery mobile NuGet移动网站用法

问题 默认情况下,你的网站在移动设备上展现的可能不太好。当然,有的移动设备足够让你的网站在它上显示。但是这也不是稳妥的。可能你不希望为移动电话创建一个全新的网站,成本太高。 解决方案 使用jQuery mobile NuGet包,改变共享的布局和视图,并使你的网站在传统的浏览器和大部分手机展现的都很好。 讨论 首先,如果你一直在阅读关于4 MVC的路线图,你会注意到很多讨论是围绕着移动的增强。特别的是,在这个例子中我们将使用jQuery mobile工具箱。 不幸的是,如很多事情表明这将是MVC中的4中的内容,在这个告诉我们还为时过早。与其等待我们不如提供一个非常简单的解决方案,需要最小的努……

6小时3分钟前回答

jQuery中parents()用法浅析

本文实例讲述了jQuery中parents()方法用法。分享给大家供大家参考。具体分析如下: 此方法取得一个包含着所有匹配元素的父辈元素的元素集合。 所取得的父辈元素集合也可以使用表达式进行筛选。 语法结构: 复制代码 代码如下: $(selector).parents(expr) 参数列表: 参数 描述 expr 可选。用于筛选父辈元素的表达式。 实例代码: 实例一: 复制代码 代码如下: !DOCTYPE html html head meta charset= utf-8 meta name=author content=//www.jb51.net/ / titleparents()函数-码农之家/title script type=text/javascript src=mytest/jQuery/jquery-1.8.3.js/script script type=text/javascript $(document).ready(function(){ $(li).parents().css(color,red) }) /script /head body div ul liHTML专区/li li class……

41小时25分钟前回答

jQuery网页遮罩层插件用法示例效果

本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作,取而代之的是弹出一个遮罩层显示一个loading提示框,效果如下。 其实这个需求很简单,但很多组件体积相对这个需求来说太大了,在网上瞎溜达了找到了一个还不错的组件,作者是上面也没有写。现在就来分析一下这个组件的源码和使用 /** * @部分参数说明 */(function($){ $.fn.extend({ //主函数 toggleLoading: function(options){ // 找到遮罩层 var crust = this.childr……

40小时51分钟前回答

jQuery中disabled选择器用法总结

本文实例讲述了jQuery中:disabled选择器用法。分享给大家供大家参考。具体分析如下: 此选择器能够选取所有禁用的表单元素。 语法结构: 复制代码 代码如下: $(:disabled) 此选择器一般也要和其他选择器配合使用,比如类选择器、元素选择器等等。 复制代码 代码如下: $(input:disabled).css(background-color,red); 以上代码能够将不可用的input元素的背景色设置为红色。 实例代码: 复制代码 代码如下: !DOCTYPE html html head meta charset= utf-8 meta name=author content=//www.jb51.net/ / title码农之家/title script type=text/javascript src=mytest/jQuery/jquery-1.8.3.js/script script type=text/javascript $(document).ready(function(){ $(button).click(function(){ $(input:disabled).css(……

2小时24分钟前回答

jquery用法技巧总结

下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(contextmenu,function(e){ return false; });}); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the comme……

1小时24分钟前回答

jQuery中$(this).index与$.each的用法详解

工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) $(function(){ $(.bao).hide(); $(.bao).eq(0).show(); $(.head li).click(function(){ $(this).addClass(cur).siblings().removeClass(cur); $(.bao).eq($(this).index()).show().siblings(.bao).hide() var a=$(.bao).eq($(this).index()).find(li) if(a.length0){ alert(我小于0啊!!) } }); function moren(){ var moren=$(.moren).find(li) if(moren.length==0){ alert(我是空的~没戏) } } }) 先声明 选项卡的头部就叫头部 选项卡的内容就叫内容啊~ 想到的第一种方法(笨方法): 绑定添加了click事件。当切换头部的时候执行.头部根据自己的索引获得相……

14小时37分钟前回答

jQuery中事件对象e的事件冒泡用法实例详解

之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷。查了一天的资料,终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能。 e.stopPropagation()阻止事件冒泡 head title/title script src=Scripts/jquery-1.4.1.js type=text/javascript/script /head body table tr tdspan冒泡事件测试/span/td /tr /table /body 我们先看这段代码: script type=text/javascript $(function () { $(table).click(function () { alert(table alert); }); $(td).……

16小时47分钟前回答

jQuery Position用法及兼容性详解

1、position方法 jquery api地址:http://jquery.cuishifeng.cn/position.html position方法获取匹配元素相对父元素的偏移。 2、说明 2.1 与offset()区别 .offset()是获得该元素相对于documet的当前坐标 .position()方法可以取得元素相对于父元素的偏移位置,父元素为该元素最近的而且被定位过的祖先元素。 2.2 值计算 .元素本身所占用的边框,边距和填充的大小不计。 .父元素的边框和边距不计,父元素的填充计算在内。 3、示例代码 !DOCTYPE htmlhtml head meta charset=utf-8 / titlejQuery position()示例/title style html { line-height: 1.15; } /*父元素--相对定位*/ .parent { position: relative; width: 200px; height: 400px; /*父元素的margin不计算在内*/ margin-top: 10px; /*父元……

19小时57分钟前回答

关于jquery easyui中treegrid用法的例子

项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作。 在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下 table class=easyui-treegrid url=control_node_json?group_id=$info[id]access_node=$_REQUEST[access_node] idField=id treeField=title fit=true toolbar=#control_node_toolbar_{$info[id]} thead tr th field=title width=200px data-options=formatter:title_formatter名称/th th field=name width=200px节点/th th field=status width=50px状态/th th field=remark备注/th /tr thead /table div id=control_node_toolbar_{$info[id]} a href=javascript:alert(test); class=easyui-linkbutton iconCls=icon-add plain=true控制/a /div 上面是整个HTML代码,其中在easyui的好处是,……