如何将此jQuery代码转换为Vanilla JS？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Vanilla JS——最轻快的JavaScript框架

简介 Vanilla JS团队维护每个字节的代码框架,每天努力工作,以确保它是小的和直观的。使用Vanilla JS是谁?很高兴你发问!...事实上,Vanilla JS的使用量已经远远超过了jQuery, Prototype JS, MooTools, YUI 和 Google Web Toolkit 的总和。...没有任何代码，Vanilla JS 太流行了，所有的浏览器在十年前就已经内置了它。...性能比较根据ID获取DOM元素框架代码次数/秒 Vanilla JS document.getElementById('test-table'); 12,137,211 Dojo dojo.byId...'); 326,534 MooTools document.id('test-table'); 78,802 根据标签名获取DOM元素框架代码次数/秒 Vanilla JS document.getElementsByTagName

7.2K4 0

Github 移除 JQuery 的过程

在这篇文章中，我们将解释一点我们最初是如何开始依赖jQuery的，我们是如何意识到不再需要jQuery的，并指出我们没有用另一个库或框架替换它，而是能够使用标准的浏览器api实现所需的一切。...增量解耦即使有了最终目标，我们知道仅仅分配所有资源是不可行的，我们必须重写从jQuery到vanilla JS的所有内容。...许多旧代码都与pjax和facebox jQuery插件的外部接口有显式耦合，因此我们保持了它们的接口相对相同，而在内部使用vanilla JS替换了它们的实现。...因此，即使那些使用JS增强的web表单和其他UI元素通常也会在浏览器中禁用JavaScript。在某些情况下，我们能够完全删除某些遗留行为，而不必在vanilla JS中重写它们。...在jQuery迁移期间，我们寻找适合作为自定义元素提取的模式。例如，我们将显示模式对话框的facebox用法转换为元素。我们追求进步的总体理念也延伸到了定制元素。

2.9K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

解释一下为什么我很少用jQuery

如下我们在HTML里引入Vanilla JS： vanilla.js"> 比上面更快的方法是：什么？没有代码？...是的，就是没有代码，因为Vanilla JS实在太强了，以至于所有的浏览器在10年前内置了它。...所以，我们平时吹牛逼说的什么原生js的实现，用到什么原生API，都是来自于Vanilla JS 性能比较在这里，我们用原生API和各种库进行性能对比，数据来源请看参考框架代码 Vanilla JS...这里不是说jQuery不好，只是我们做项目的时候，不应该把它作为默认。我们都有Vanilla JS了，已经是火箭炮了，还要啥自行车呢？...参考 vanilla-js.com/ hackernoon.com/you-truly-dont-need-jquery-5f2132b32dd1#.k94vnjo64 jsperf.com/dm-jquery-vs-vanilla-selectors

1.2K4 0

从GitHub.com放弃使用jQuery说起

让我干唠是唠不出来什么的，因为咱没怎么用过js，只是最近在学习vue.js，看到了一篇GitHub官方在2018年发布的解释为什么放弃前端框架jQuery的文章，心血来潮，想读一遍，顺便翻译出来，以帮助理解...在这篇文章中，我们将解释一下我们最初是如何依赖 jQuery 的，又是如何意识到何时不再需要它的，并指出——我们能够使用标准浏览器 API 实现我们需要的一切（而不是用另一个库或框架替换它）。...这样我们就可以尽早参与代码审查并提出替代方案。许多旧代码使用了 pjax 和 facebox 这类 jQuery 插件，因此当我们使用 vanilla JS 替换它们时保持了它们的接口不变。...在某些情况下，我们能够完全删除某些遗留代码，而不必在 vanilla JS 中重写它们。这几年来，通过以上所述和诸如此类的努力，我们逐渐减少了对 jQuery 的依赖，直到不再有一行代码引用它。...在 jQuery 移除期间，我们寻找并提取出来那些适合通过自定义标签实现的对象。例如，我们将 facebox 中用来显示模态对话框的部分转换为。

1.3K2 0

不敢相信，技术栈，居然被P站秒了

（7）前端NodeJS也有使用；提问：一个页面至少包含一个视频，一个GIF广告，一些直播视频的预览，一些视频的微缩图，如何监控页面性能，如何找到花时间最长的地方？...JS层面，我们逐步淘汰了jQuery和jQuery UI，而使用Vanilla JS这款更加高效的JS框架。画外音：Vanilla JS，世界上最轻量级的JS框架，没有之一。...其官方网站是： http://vanilla-js.com/ 别的JS库都需要显示引用地址，例如： jquery/2.1.4/jquery.min.js..."> 而Vanilla JS不需要任何引用，在部署引用的时候，只需要：你没看错，没有任何代码，由于它过于流行，所有的浏览器都必须内置它。...（2）你用过Vanilla JS么？

2.3K1 0

如何在Nuxt应用程序中加载外部脚本

最近，我不得不将第三方代码段加载到我的Nuxt应用程序中。... jquery/3.0.0/jquery.min.js">如何使用Nuxt完成此操作以及实现此操作的不同方法。使用vue-meta 您可以使用vue-meta的head()方法插入脚本。幸运的是，Nuxt已预装了vue-meta。..." async defer> 非vue-meta的替代方案如果您想要vue-meta的更多“手动”替代方法，则可以使用Vue的安装生命周期通过DOM vanilla JS方式插入它...后者适用于vanilla(原生)Javascript。谢谢阅读。编码愉快！

5.6K1 0

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

它将简单的，人类可读的文本文件转换为roff用于终端显示，也转换为HTML用于Web。 dox是一个用节点编写的JavaScript文档生成器。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...Clusterize.js - Tiny vanilla JS插件，可轻松显示大型数据集。...jquery.transit - jQuery的超级流畅的CSS3转换和转换。 impress.js - 在HTML文档中使用CSS3转换/转换进行类似Prezi的演示。...Babel（以前为6to5） - 将ES6 +代码转换为vanilla ES5，没有运行时。 Traceur编译器 - ES6功能> ES5。包括类，生成器，承诺，解构模式，默认参数等。

9K2 1

「沙里淘金」精选浏览器端JavaScript库资源推荐

它将简单的，人类可读的文本文件转换为roff用于终端显示，也转换为HTML用于Web。 dox是一个用节点编写的JavaScript文档生成器。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...Clusterize.js - Tiny vanilla JS插件，可轻松显示大型数据集。...jquery.transit - jQuery的超级流畅的CSS3转换和转换。 impress.js - 在HTML文档中使用CSS3转换/转换进行类似Prezi的演示。...Babel（以前为6to5） - 将ES6 +代码转换为vanilla ES5，没有运行时。 Traceur编译器 - ES6功能> ES5。包括类，生成器，承诺，解构模式，默认参数等。

8.2K2 0

号称世界上最流行的灯箱脚本！这款花盒为什么与众不同？

安装和使用由于 Fancybox 是用 vanilla JS 编写的，因此很容易集成到任何地方。您不需要jQuery或任何其他依赖项！...你也可以从CDN进行安装： js...(最新的代码也始终在 GitHub 上可用，而分发文件可以在 dist 文件夹中找到) js"> JS 文件后，将此代码粘贴到页面上的任何位置： Fancybox.bind("[data-fancybox]", { // Your custom options });

6471 0

BootstrapVue 入门

鉴于 Bootstrap是最受欢迎的独立 CSS 框架（在我看来），很多已经或有意向从Vanilla JavaScript 的框架转移到 Vue.js 的开发人员总是发现迁移有点困难，因为 Bootstrap...使用 BootstrapVue，任何人都可以从 Vanilla.js 或 jQuery 切换到 Vue.js，而无需担心 Bootstrap 对 jQuery 的严重依赖，甚至无法找到解决方法。...Using CDN **使用CDN ** 要通过CDN将Bootstrap和BootstrapVue添加到Vue项目，请打开项目公共文件夹中的index.html文件，并将此代码添加到适当的位置： 1<...这就是你需要做的：从构建脚本中删除bootstrap.js文件从你的程序中删除jQuery，BootstrapVue能独立工作将本机Bootstrap标记转换为BootstrapVue自定义组件标记...通过这三个步骤，你可以将现有项目从依赖jQuery的常规Bootstrap迁移到更简单的独立BootstrapVue包，而不会破坏任何现有代码。

3.3K4 0

WEB：Range 与 Selection

代码分析： ? ? 示例3：selRange.addRange ? 代码分析： ? 示例4：示例2的微调版，从 div 换成 textarea； ? ? 4. IE 专有接口怎么用？...代码分析： ?.../stripe/jquery.payment 状态：2年前停止维护 vanilla-masker：仓库：https://github.com/vanilla-masker/vanilla-masker...jackocnr/intl-tel-input 状态：活跃 text-mask：仓库：https://github.com/text-mask/text-mask 状态：活跃 cleave.js...：仓库：https://github.com/nosir/cleave.js 状态：活跃 ?

1.8K1 1

树形图拖拽插件tree-drag | 开源项目推荐

这一部分的实现代码位置: 「plugins/treeDrag/js/jquery.treeDrag.js」需要生成的dom规则如下：中国...这一部分的实现代码位置：「plugins/treeDrag/js/JsonToDomParser.js」 json规则如下： { "name":"国家", "value":"中国", "id...这一部分的实现代码位置：「plugins/treeDrag/js/JsonToDomParser.js」 ❝JSON转DOM的解析器，我搞了好久没弄出来，最后求助了一个网友，成功解决了这个问题，感谢 @...文件如何使用在要使用插件的html文件里引入下述依赖 jquery-ui.min.js"> <!

2.8K2 0

JS简史

当 jQuery 已经提供了 show/hide/toggle 这些函数时，为什么要自己再写一遍呢？“jQuery并未真正改变用JS创建的东西”，Nelson 说，“但是确实改变了如何创建的方式。...由成千上万行 jQuery 代码组成的大量代码库变得难以维护，又包含了非常多的自定义函数，使得新上手的开发者头疼不已。...下面说说 Vanilla JS。当前，你可能想知道如果某人在开发一个只需不多 JS 的小网站改用什么呢。AngularJS 和 React 看起来都是杀鸡用牛刀，是吧？确实是。...的答案就是：取决于具体的需求，用 jQuery 或 Vanilla JS 都可以。 Vanilla JS 可不是一个框架，也不是一个库，其实什么也不是，就是 JavaScript。...从性能考虑，书写纯 JS 代码几乎肯定会更快(除非你的程序不优化)，即便是在更老更慢的设备上。和很多开发者一样，Smith 对这种新关注点很兴奋：“我从 Vanilla JS 获得了很多回报。

2K4 0

用 ref 访问 Vue.js 程序中的 DOM

在本文中，你将了解如何在 Vue.js 中引用组件中的 HTML 元素。前提条件本文适用于所有使用 Vue 的开发人，包括初学者。...在阅读本文之前，你应该具备一些前提条件： Node.js 10.x或更高版本。...$refs["input"].focus() 通过这种方式，refs 的使用方法以像 JavaScript 中的 document.querySelector('.element') 或 jQuery...正确的使用语法非常重要，因为这意味着 Vue 不会将此视为错误，的确如此。根据我们已经知道的关于 Vue refs的内容，它们会返回一个对象，但是根据未定义的响应来判断，有些东西是错误的。...$refs.input.value) } } 这样就显示了你输入的字符串，当然用 vanilla JavaScript 和 jQuery 也可以实现相同的功能。

3.5K2 0

JQuery选择器和JQuery包装集

checked")匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) $("select option:selected")匹配所有选中的option元素注意 DOM转JQUERY...包装集：$(arrDiv[i]).html(‘div’+i);//arrDivp[i]是DOM对象，直接用$()转为JQuery对象后调用html方法； JQUERY包装集转DOM对象通过索引访问到的...testDiv'); $('choose1choose2').appendTo(testDiv); 意思是将此行...password" value="password"/> JS...(arr|obj,callback) //将一个数组转换为另一个数组将原数组中每个元素加 4 转换为一个新数组：$.map( [0,1,2], function(n){ return n + 4;}

4.4K2 0

我们到底需不需要 jQuery

当 jQuery 出现后，使用 jQuery 实现同样的功能，我们只需写很少的代码，并且兼容主流浏览器。于是，大部分网站都会使用 jQuery。时过境迁，我们到底需不需要 jQuery 呢?...如果 HTML 发生改变，如某元素的 id 改了，而 jQuery 是通过 id 来找那元素的，那 jQuery 的代码也需要修改。...认为需要 jQuery 的理由如下 jQuery 的有丰富的插件库。不少现代的框架依赖 jQuery，如 Bootstrap 的 JS 插件，Ember，Meteor JS。...对我来说，对于一般的项目，我都会用 jQuery，毕竟 jQuery 大小不大，比如，jquery-3.0.0-beta1.min.js 在没 gzip 压缩前也就 86 KB。...参考链接 YOU MIGHT NOT NEED JQUERY Why jQuery is still relevant Choosing Vanilla JavaScript in 2016 jQuery

5821 0

前端开发面试题答案(四)

25、js延迟加载的方式有哪些？ defer和async、动态创建DOM方式（用得最多）、按需异步载入js 26、Ajax 是什么? 如何创建一个Ajax？...37、Jquery与jQuery UI 有啥区别？ *jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。...提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等 38、jquery 中如何将数组转化为json字符串，然后再转化回来？...知道怎么用浏览器的各种工具来调试和debug代码么? Chrome,Safari浏览器内核。 45、用js实现千位分隔符?...对于'filename'和'.hiddenfile'，lastIndexOf的返回值分别为0和-1无符号右移操作符(»>) 将-1转换为4294967295，将-2转换为4294967294，这个方法可以保证边缘情况时文件名不变

3.1K2 0

【Java 进阶篇】Java 中 JQuery 对象和 JS 对象：区别与转换

在前端开发中，经常会涉及到 JavaScript（JS）和 jQuery 的使用。这两者都是前端开发中非常重要的工具，但它们之间存在一些区别。...本文将详细介绍 Java 中的 JQuery 对象和 JS 对象的区别，并讨论它们之间的转换方法。 1. 前言在开始之前，让我们简要了解一下 JavaScript 和 jQuery。...，这样就可以使用原生的 DOM 方法了： // jQuery 转 JavaScript 对象 var myElement = $myElement[0]; 反之，也可以将原生的 DOM 对象转换为 jQuery...对象： // JavaScript 转 jQuery 对象 var $myElement = $(myElement); 5....示例代码为了更好地理解 JavaScript 对象和 jQuery 对象的区别，以下是一个简单的示例代码： <!

5524 0

前端必知的ajax

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码：加载并执行 test.js。...jQuery 代码: $.getScript("test.js"); ---- 加载并执行 AjaxEvent.js ，成功后显示信息。...jQuery 代码: $.getScript("AjaxEvent.js", function(){ alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同...如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。...如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

4.2K4 0

GitHub在其网站实现中移除对jQuery的使用

乍一看这消息我挺震惊的，还以为Github把jQuery的代码仓库从它的网站上给删掉了呢，多大仇多大怨啊要干这事儿！再仔细一读，好吧，发现果然还是自己英文不好啊.........Mislav说的大致意思就是：他们终于完成了将jQuery从Github.com的前端代码中移除的工作，并用其他一些方式替代原先jQuery做的工作，比如：用原生的querySelectorAll...（即document.querySelector()方法）去替代jQuery选择器的功能用fetch替代jQuery的ajax请求功能用delegated-events替代jQuery的事件处理功能...用一些填充库去抹平和标注DOM API的差异大量使用自定义元素（即自定义标签，Web Component）也就是说，他们其实是重构了Github.com这个网站，把原先由jQuery编写的代码，替换成了其他一些技术...在可见的未来，jQuery作为一个对原生JS API（Vanilla JS）的可选方案，还会继续存在，被广泛使用，毕竟它的语法也是非常简洁好用的。

1.1K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭