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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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版微信自动登录并获取昵称的方法
2016/09/23 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Python 的 with 语句详解
2014/06/13 Python
Python操作MySQL简单实现方法
2015/01/26 Python
python去掉行尾的换行符方法
2017/01/04 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
运动会广播稿300字
2014/01/10 职场文书
光盘行动倡议书
2014/02/02 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
合作经营协议书范本
2014/04/17 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
温馨提示标语
2014/06/26 职场文书
医院感染管理制度
2015/08/05 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
浅析python中特殊文件和特殊函数
2022/02/24 Python