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获取table下某一行某一列的值实现代码
Apr 07 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现查看图片功能
Dec 01 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/11/16 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
Yii学习总结之安装配置
2015/02/22 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
python中文乱码的解决方法
2013/11/04 Python
Python线程详解
2015/06/24 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
python实现银行实战系统
2020/02/26 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
网络安全类面试题
2015/08/01 面试题
植物生产学专业求职信
2014/08/08 职场文书
还款承诺书范本
2015/01/20 职场文书
欠条样本
2015/07/03 职场文书
2016教师节感恩话语
2015/12/09 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android