首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最快的非jquery方式做兄弟函数?

最快的非jQuery方式实现兄弟函数是使用原生JavaScript的nextSibling和previousSibling属性。这两个属性可以获取当前元素的下一个兄弟节点和上一个兄弟节点。

下面是一个示例代码:

代码语言:javascript
复制
// 获取下一个兄弟节点
function getNextSibling(element) {
  var sibling = element.nextSibling;
  while (sibling && sibling.nodeType !== 1) {
    sibling = sibling.nextSibling;
  }
  return sibling;
}

// 获取上一个兄弟节点
function getPreviousSibling(element) {
  var sibling = element.previousSibling;
  while (sibling && sibling.nodeType !== 1) {
    sibling = sibling.previousSibling;
  }
  return sibling;
}

这样,你可以使用getNextSibling和getPreviousSibling函数来获取元素的下一个兄弟节点和上一个兄弟节点。

这种方式的优势是不依赖于任何第三方库,可以直接在原生JavaScript中使用。它适用于所有的前端开发场景,并且可以与其他JavaScript库和框架无缝集成。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅供参考,具体产品选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery最方便前端验证方式2种(空验证与比较验证)

jQuery最方便前端验证方式2种(空验证与比较验证) 目录 jQuery最方便前端验证方式2种(空验证与比较验证) 使用jQuery地址: 验证需求: 1、空验证 2、比较验证 jQuery...只能输入英文字符和数字 ---- 使用jQuery地址: https://code.jquery.com/jquery-3.4.1.min.js 在线版本方式测试。...验证需求: 1、空验证 当用户没有输入用户名就提交时候【阻止提交】并提示相应文字。...核心代码: 这里最核心代码是取消form表单提交操作,这里不建议直接使用onSubmit事件,建议单独加载一遍,使用bind方式加载事件。...(参数判断()) return true; return false; } 我们在if中逐一添加想要判断函数,使用对应逻辑链接所有的函数返回值。

2.1K40
  • jQuery选择器Sizzle原理分析(下)

    曾经红级一时jQuery还记得吗?拥有号称当时业界最快DOM选择器Sizzle,那么为什么他能自称是最快呢?让我们来分析一下Sizzle.js源码,了解他设计精妙之处。...作者:朱胜--腾讯web前端工程师 @IMWeb前端社区 好了有了之前词法分析过程,现在我们来到select函数来,这个函数整体流程,前面也大概说过: 1. 先词法分析获得token列表 2....首先把所有的token元素生成一个嵌套函数,然后再针对种子集合,去执行这个函数,把符合条件留下来,由于函数是通过闭包方式来保存,所以当同一个选择符查询时,可以直接执行函数来查询,从而加快了查询性能...parentNode +:表示附近兄弟关系 对应DOM属性previousSibling 是元素第一个节点所以 first为true ~:表示普通兄弟关系 对应DOM属性previousSibling...缓存已查询jQuery对象:通过空间换时间方式,不要每次都要执行过滤函数。 扫码下方二维码, 随时关注更多前端干货文章! ▼ 微信:IMWebTech

    76820

    java-游戏中零点重置场景下工具函数(获取下次重置时间戳)

    前言: 在程序员中, 经常会涉及到过零点重置玩家数据, 我目前游戏开发, 刚好遇到个防沉迷功能模块, 涉及到累计时间判断....虽说都是小简单问题, 估计大部分写一写就出来了, 所以我这边文章也还是笔记, 就当是写过工具代码记一下 自定义重置时间, 获取几天后(下几次)重置时间 代码如下 public static int...59:00), mills: 1605038400000(2020-11-11 04:00:00) * * @param mills 当前时间 * @param resetHour 设定重置小时...59:00), mills: 1605038400000(2020-11-11 04:00:00) * * @param mills 当前时间 * @param resetHour 设定重置小时..., 感谢您查阅 若是有问题欢迎指正 谢谢 :) ---- 以上笔记来自公众号分享, 发到这里我也是想看看能不能涨粉:) 还望各位理解 同时 也还请各位赏脸, 动动您发财小手, 扫码关注一下下

    50920

    JavaWeb18-jquery学习笔记(Java全栈开发)

    jquery一.筛选 筛选与之前选择器雷同,筛选提供都是函数. 1....:从下一个兄弟开始,直到指定元素结束 parent():获取父元素 parents():匹配元素祖先元素元素(不包含根元素) prev():上一个兄弟 prevAll():前面的所有兄弟 prevUntil...不包括浏览器默认) 委派 live jQuery 给所有匹配元素附加一个事件处理函数,即使这个元素是以后再添加进来也有效,例如给A标签添加事件,之后再追加a标签都具有相同事件。...请求方式 格式1: $.ajax(url,[settings]) 格式2:setting可以使用json格式 jQuery.ajax(settings) 参数: async 设置是否异步,true:表示异步...(ajax) 默认 true type 设置请求方式

    6.8K90

    01-老马jQuery教程-jQuery入口函数及选择器

    1.什么是jQuery? 1.1 jQuery介绍 jQuery是一个轻型、快速、小巧功能丰富JavaScript类库。本质就是一堆js函数组合。...jQuery有助于刚入门开发人员,更深入理解原生DOM开发方式 jQuery库封装的确非常经典,一下小项目和简单项目足够支撑 第三方类库太丰富!...1.3 关于jQuery版本说明 1.x:兼容ie678,使用最为广泛,官方只BUG维护,功能不再新增。...image.png 1.4 jQuery安装 官网下载地址:http://jquery.com/download/ npm方式安装 npm install jquery bower方式安装 bower...$(document).ready(function(){ // ....此处是页面DOM加载完成入口 }); // 第二种方式:直接给jQuery全局函数传入一个回调函数 $(function

    2.5K100

    好久不用 jQuery, 来复习一下

    其独特而又优雅代码风格改变了 JavaScript 程序员设计思路和编写程序方式。 ?...1.1.2 jQuery 引用 ① 下载 jQuery  ☞ 1.x:兼容 ie678,使用最为广泛,官方只 BUG 维护,    ♞ 功能不再新增。...对象1和对象2是兄弟关系 remove() 对象.remove():将对象删除掉 empty() 对象.empty():将对象后代元素全部清空,但是保留当前对象以及其属性节点 1.4 jQuery...for(初始化值;循环结束条件;步长) 1.5.2 jQuery 遍历方式 /* * index:就是元素在集合中索引 * element:就是集合中每一个元素对象 * this:集合中每一个元素对象...要解决这个问题,可以使用 jQuery 中另一个关于页面加载方法 load() 方法。load() 方法会在元素 onload 事件中绑定一个处理函数

    5.5K40

    第50次文章:JQuery基础

    jQuery设计宗旨是“write Less,Do More”,即倡导写更少代码,更多事情。...JavaScript框架:本质上就是一些js文件,封装了js原生代码而已 二、快速入门 1、下载JQuery (1)目前jQuery有三个大版本 1.x:兼容ie678,使用最为广泛,官方只BUG...对象区别与转换 (1)jquery对象在操作时,更加方便 (2)jquery对象和js对象方法不通用 (3)两者相互转换方式 jq -- > js: jq对象[索引] 或者 jq对象.get(索引)...alert("abc"); }); (2)入口函数 $(function () { //给b1按钮添加单击事件 //1.获取b1按钮 $("#b1").click(function...语法::last 获得选择元素中最后一个元素 元素选择器。语法::not(selector) 不包括指定内容元素 偶数选择器。语法::even 偶数,从0开始计数 奇数选择器。

    1.6K30

    01-老马jQuery教程-jQuery入口函数及选择器

    1.1 jQuery介绍 jQuery是一个轻型、快速、小巧功能丰富JavaScript类库。本质就是一堆js函数组合。...jQuery有助于刚入门开发人员,更深入理解原生DOM开发方式 jQuery库封装的确非常经典,一下小项目和简单项目足够支撑 第三方类库太丰富!...1.3 关于jQuery版本说明 1.x:兼容ie678,使用最为广泛,官方只BUG维护,功能不再新增。...download/ npm方式安装npm install jquery bower方式安装bower install jquery 2.入口函数介绍 2.1window.onload事件问题 在之前...$(document).ready(function(){ // ....此处是页面DOM加载完成入口 }); // 第二种方式:直接给jQuery全局函数传入一个回调函数 $(function

    2.4K00

    jQuery选择器和选取方法

    简单选择器可以组合成“组合选择器”,比如 “div.note>p”和“blockquote i”,只要用组合字符分隔符就行。简单选择器和组合选择器还可以分组成逗号分隔列表。...除了$()函数支持选择器语法,jQuery还定义了一些选取方法。...传递判断函数给filter(),会为每一个匹配元素调用该函数,filter()则返回一个jQuery对象,仅包含判断函数为true(或任意真值)元素。...如果传递 判断函数给not(),该判断函数调用就与在filter()中一样,只是返回jQuery对象仅包含那些使得判断函数返回false或其他假值元 素: $("div").not("#header..., #footer");        //除了两个特殊元素之外所有元素 在jQuery 1.4中,提取选区另一种方式是has()方法。

    5.1K40

    一文入门jQuery

    文章目录 jQuery概念 快速入门 步骤: JQuery对象和JS对象区别与转换 选择器:筛选具有相似特征元素(标签) 基本操作学习 事件绑定 入口函数 样式控制:css方法 分类 基本选择器...jQuery设计宗旨 是“write Less,Do More”,即倡导写更少代码,更多事情。...快速入门 步骤: 下载JQuery 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛,官方只BUG维护, 功能不再新增。...’][]…”) 包含多个属性条件选择器 过滤选择器 首元素选择器 语法: :first 获得选择元素中第一个元素 尾元素选择器 语法: :last 获得选择元素中最后一个元素 元素选择器 语法...对象1和对象2是兄弟关系 remove():移除元素 对象.remove():将对象删除掉 empty():清空元素所有后代元素。

    3.5K20

    Web前端知识(四)

    4.1.1.3.jQuery特点 1.轻量级 2.强大选择器 3.出色Dom封装 4.可靠事件处理 5.浏览器兼容性强 6.链式操作方式 7.隐式迭代 4.1.2.jQuery代码风格 l在jQuery...程序中,不管是页面元素选择、内置功能函数,都是美元符号“”来起 始。...而这个“”就是jQuery当中最重要且独有的对象:jQuery对象 $(function () {}); 执行一个匿名函数 $(‘#idName’); 进行执行ID元素选择 $(‘#idName...可以写做: 执行功能函数 jQuery(function () {}); jQuery(‘#idName’); jQuery(‘#idName’).css(‘color’, ‘red’);...p $(“div~p”) 选取紧跟后兄弟元素中所有p 间接后代: 直接后代: 紧跟第一个兄弟: 选取紧跟后面所有兄弟元素 【注意点】:一定是紧跟着(紧挨着),中间不能有插队!!!

    7.4K30

    jquery要怎么写才能速度最快?(转…

    jQuery会自动把这条语句转成$.parent.find('child'),这会导致一定性能损失。它比最快形式慢了5%-10%。...$('div').find('h3').eq(2).html('Hello'); 采用链式写法时,jQuery自动缓存每一步结果,因此比链式写法要快。...根据测试,链式写法比(不使用缓存链式写法,大约快了25%。 7....因为elem.data()方法是定义在jQuery函数prototype对象上面的, 而$.data()方法是定义jQuery函数上面的,调用时候不从复杂jQuery对象上调用,所以速度快得多。...所以,尽量少生成jQuery对象。 举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用版本,另一个是供jQuery函数使用版本。

    1.6K30

    不只是离线缓存! - 论如何善用ServiceWorker

    当然,开发者至上,为了方便本地调试,本机地址localhost和127.0.0.1被浏览器所信任,允许以HTTPS方式运行serviceworker。...其并行处理后,只要有任何一个返回正确,就直接返回哪个最快请求结果,返回错误直接忽视,除非所有的请求都失败了,才会返回reject 这是一段同时请求jquerypackage.json代码,它将从四个镜像同时请求...此函数好处在于可以在用户客户端判断哪一个镜像发挥速度最快,并保证用户每一次获取都能达到最大速度。同时,任何一个镜像站崩溃了都不会造成太大影响,脚本将自动从其他源拉取信息。...让我们看一下Network选项卡: [4.png] 其中,知乎返回最快,但他并没有完整返回文件源文件1.8KB,但他只返回了1.4KB。这也直接导致了整个函数fail。...我个人采取方式是读取arrayBuffer,阻塞fetch函数直到把整个文件下载下来。

    3.4K21

    jQuery最佳实践

    $('div').find('h3').eq(2).html('Hello'); 采用链式写法时,jQuery自动缓存每一步结果,因此比链式写法要快。...根据测试,链式写法比(不使用缓存链式写法,大约快了25%。 7....因为elem.data()方法是定义在jQuery函数prototype对象上面的,而$.data()方法是定义jQuery函数上面的,调用时候不从复杂jQuery对象上调用,所以速度快得多。...所以,尽量少生成jQuery对象。 举例来说,许多jQuery方法都有两个版本,一个是供jQuery对象使用版本,另一个是供jQuery函数使用版本。...$("#text"); var $ts = $.text($text); 由于后一种针对jQuery函数版本不通过jQuery对象操作,所以相对开销较小,速度比较快。

    1.3K20
    领券