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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jquery实现拖拽小方块效果
Dec 10 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 柱状图实现代码
2009/12/04 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
WordPress网站性能优化指南
2015/11/18 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
javascript 短路法代码精简
2009/08/20 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
javascript的函数作用域
2014/11/12 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
基于Vue实现拖拽效果
2018/04/27 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Javascript异步编程async实现过程详解
2020/04/02 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python运算符重载用法实例
2015/05/28 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python socket实现简单聊天室
2018/04/01 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
多个python文件调用logging模块报错误
2020/02/12 Python
介绍一下#error预处理
2015/09/25 面试题
师范生自荐信范文
2013/10/06 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
学校介绍信范文
2014/01/14 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
人代会标语
2014/06/30 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
部门优秀员工推荐信
2015/03/24 职场文书