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实现用户名重名实时检测
Jun 01 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
简单的cookie计数器实现源码
2013/06/07 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
JavaScript伪数组用法实例分析
2017/12/22 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
python验证码识别的示例代码
2017/09/21 Python
wxpython实现图书管理系统
2018/03/12 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
公司委托书格式范文
2014/04/04 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
大学自主招生推荐信
2014/05/10 职场文书
中药学自荐信
2014/06/15 职场文书
办理房产过户的委托书
2014/09/14 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
2014年保密工作总结
2014/11/22 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
小组组名及励志口号
2015/12/24 职场文书
多人股份制合作协议书
2016/03/19 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏