jQuery 选择器用法实例分析【prev + next】


Posted in jQuery onMay 22, 2020

本文实例讲述了jQuery 选择器用法。分享给大家供大家参考,具体如下:

jQuery 选择器 (prev + next)

定义和用法

jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回。

注意: 选择器next的查找范围必须是与"prev元素"相邻的下一个元素,并且必须是"prev元素"的同辈元素。

语法

// 这里的prev表示具体的选择器

// 这里的next表示具体的选择器

jQuery( "prev + next" )

参数

参数 描述
prev 一个有效的选择器。
next 一个有效的选择器。

返回值

返回封装了与"prev元素"紧邻的下一个同辈元素中、符合选择器next的DOM元素的jQuery对象。

虽然与一个"prev元素"紧邻的下一个同辈元素最多只有一个,但是"prev元素"可以有多个,因此匹配到的DOM元素也可以有多个,并且都被封装在返回的jQuery对象中。

如果找不到任何相应的匹配,则返回一个空的jQuery对象

实例

以下面这段代码为例:

/* HTML代码 */
<div id="n1">
 <p id="n2" class="test">
  <span id="n3" class="a">Welcome</span>
  <span id="n4">Hello</span>
 </p>
 <p id="n5" class="detail">
  <span id="n6" class="b codeplayer">To
   <span id="n7" class="a">w3cschool.cn</span>
   <span id="n8"></span>
   <span id="n9"></span>
  </span>
 </p>
</div>
/* jQuery代码 */
<script>
// 扩展jQuery对象,添加showTagInfo()方法
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
// 每个元素的标识信息形如:"tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName + ( this.id ? "#" + this.id : "" ); 
} ).get();
$("body").append( tags.join("<br>") + "<br><br>" );
};
 
// 选择了id为n5的一个元素
$("p + p").showTagInfo();
 
// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next,n8是n7的next,n9是n8的next
$("span + span").showTagInfo();
 
// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a,因此无法匹配其next——n9
$("span.a + span").showTagInfo();
 
// 返回一个空的jQuery对象
// HTML中虽然有span标签,但不是p标签的同辈元素,而是其子代或后代
$("p + span").showTagInfo();
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
You might like
在线短消息收发的程序,不用数据库
2006/10/09 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
简单实现python爬虫功能
2015/12/31 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
计算机售后服务承诺书
2014/05/30 职场文书
2014年收银工作总结
2014/11/13 职场文书
文明倡议书
2015/01/19 职场文书
2015年植树节活动总结
2015/02/06 职场文书
民主评议党员个人总结
2015/02/13 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
李强感恩观后感
2015/06/17 职场文书
办公用品管理制度
2015/08/04 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle