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操作css样式
May 15 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 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概述.
2006/10/09 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
高亮显示web页表格行的javascript代码
2010/11/19 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
js字符串转成JSON
2013/11/07 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
简单学习vue指令directive
2016/11/03 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
化工机械应届生求职信
2013/11/04 职场文书
遗嘱继承公证书
2014/04/09 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
保险公司演讲稿
2014/09/02 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
MySQL创建定时任务
2022/01/22 MySQL