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+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery将json转为数据字典的实例代码
Oct 11 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获取随机数字和字母的方法详解
2013/06/06 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
YII中assets的使用示例
2014/07/31 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
cakephp常见知识点汇总
2017/02/24 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JavaScript知识点整理
2015/12/09 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
JS运算符简单用法示例
2020/01/19 Javascript
详解Python的单元测试
2015/04/28 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
抽象类和接口的区别
2012/09/19 面试题
缴纳养老保险的证明
2014/01/10 职场文书
大学生活动策划方案
2014/02/10 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
详解Redis主从复制实践
2021/05/19 Redis
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
win sever 2022如何占用操作主机角色
2022/06/25 Servers