jQuery中next()方法详解

时间：2020-07-30 09:08:41
556人关注

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

教程详情	电子资料
教程类别：编辑整理：国波光教程字数：1209字节阅读时间：大概18分钟下载本教程（DOC版）	《从0到1:jQuery快速上手》课件,源码,习题答案《数字媒体交互设计原理与方法》配套资源《数字媒体运营方法与实务》配套资源现代数值计算方法：MATLAB版计算方法简明教程

本文实例讲述了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参数知识点总结

学习笔记

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的好处是，……