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 相关文章推荐
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jquery实现吸顶导航效果
Jan 08 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
PHP用户指南-cookies部分
2006/10/09 PHP
PHP $_SERVER详解
2009/01/16 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
php图片水印添加、压缩、剪切的封装类实现
2020/04/18 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
Ucren Virtual Desktop V2.0
2006/11/07 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
JS实现小星星特效
2019/12/24 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python做文本按行去重的实现方法
2016/10/19 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python yield关键词案例测试
2019/10/15 Python
Python: 传递列表副本方式
2019/12/19 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python 实现客户端与服务端的通信
2020/12/23 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
幼师自荐信
2013/10/26 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
申报材料格式
2014/12/30 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书