是否有一种简单的方法可以将jquery代码转换为javascript?

There are lots of examples out there of achieving certain things in javascript/dom using jQuery. However, using jQuery is not always an option which can make understanding the examples of javascript solutions written in jQuery hard.

有很多使用jQuery在javascript/dom中实现某些功能的例子。但是，使用jQuery并不总是一种选项，它可以使您很难理解用jQuery编写的javascript解决方案示例。

Is there an easy way to convert jQuery code to regular javascript? I guess without having to access or understand the jQuery source code.

是否有一种简单的方法可以将jQuery代码转换成普通的javascript?我猜不需要访问或理解jQuery源代码。

9 个解决方案

#1

The easiest way is to just learn how to do DOM traversing and manipulation with the plain DOM api (you would probably call this: normal JavaScript).

最简单的方法就是学习如何使用普通的DOM api(您可能会称之为:普通JavaScript)进行DOM遍历和操作。

This can however be a pain for some things. (which is why libraries were invented in the first place).

然而，这对某些事情来说是痛苦的。(这就是为什么图书馆一开始就被发明出来)。

Googling for "javascript DOM traversing/manipulation" should present you with plenty of helpful (and some less helpful) resources.

搜索“javascript DOM遍历/操作”应该会为您提供大量有用的(和一些不太有用的)资源。

The articles on this website are pretty good: http://www.htmlgoodies.com/primers/jsp/

这个网站上的文章很不错:http://www.htmlgoodies.com/primers/jsp/

And as Nosredna points out in the comments: be sure to test in all browsers, because now jQuery won't be handling the inconsistencies for you.

正如Nosredna在评论中指出的:一定要在所有浏览器中进行测试，因为现在jQuery不会为您处理不一致的问题。

#2

This will get you 90% of the way there ; )

这能让你达到目标的90%

window.$ = document.querySelectorAll.bind(document)

For Ajax, the Fetch API is now supported on the current version of every major browser. For $.ready(), DOMContentLoaded has near universal support. You Might Not Need jQuery gives equivalent native methods for other common jQuery functions.

对于Ajax来说，每个主要浏览器的当前版本都支持Fetch API。对于$.ready()， DOMContentLoaded几乎支持通用。您可能不需要jQuery为其他常见的jQuery函数提供等效的本机方法。

Zepto offers similar functionality but weighs in at 10K zipped. There are custom Ajax builds for jQuery and Zepto as well as some micro frameworks, but jQuery/Zepto have solid support and 10KB is only ~1 second on a 56K modem.

Zepto提供了类似的功能，但在10K的压缩功能。有针对jQuery和Zepto的定制Ajax构建，也有一些微框架，但是jQuery/Zepto有可靠的支持，在56K调制解调器上10KB只有1秒。

#3

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, which make the process of DOM traversal (something that many folks depend on jQuery for) considerably easier. Unfortunately, they don’t know about these APIs!

不管我们喜欢与否，越来越多的开发人员首先通过jQuery进入JavaScript世界。在许多方面，这些新来者都是幸运的。他们可以访问大量的新JavaScript api，这使得DOM遍历(许多人都依赖jQuery)的过程变得非常简单。不幸的是，他们不知道这些api !

In this article, we’ll take a variety of common jQuery tasks, and convert them to both modern and legacy JavaScript.

在本文中，我们将使用各种常见的jQuery任务，并将它们转换为现代JavaScript和遗留JavaScript。

I proposed it in a comment to OP, and after his suggestion, i publish it has an answer for everyone to refer to.

我在给OP的评论中提出了这个问题，在他的建议之后，我发表了这个问题的答案供大家参考。

Also, Jeffrey Way mentioned about his inspiration witch seems to be a good primer for understanding : http://sharedfil.es/js-48hIfQE4XK.html

此外，Jeffrey Way提到他的灵感女巫似乎是一个很好的理解入门:http://sharedfil.es/js-48hIfQE4XK.html

Has a teaser, this document comparison of jQuery to javascript :

有一个引子，这个jQuery与javascript的文档比较:

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

You should take a look.

你应该看看。

#4

I know this is an old thread but there is an excellent resource showing the native javascript equivalent to jquery, it even includes ES6 examples. This is the most comprehensive one I have found out of the other articles covering this subject.

我知道这是一个旧的线程，但是有一个很好的资源显示与jquery等价的本地javascript，它甚至包含ES6示例。这是我在其他关于这个主题的文章中发现的最全面的一个。

jQuery to Vanilla JS

jQuery香草JS

#5

Is there an easy way to convert jQuery code to regular javascript?

是否有一种简单的方法可以将jQuery代码转换成普通的javascript?

No, especially if:

不,特别是:

understanding the examples of javascript solutions written in jQuery [is] hard.

理解用jQuery编写的javascript解决方案的示例很难。

JQuery and all the frameworks tend to make understanding the code easier. If that's difficult to understand, then vanilla javascript will be torture :)

JQuery和所有框架都倾向于使代码更容易理解。如果这很难理解，那么vanilla javascript将会是一种折磨:)

#6

If you want to learn javascript, watch these Douglas Crockford videos. They are very good.

如果你想学习javascript，看看这些道格拉斯·克罗克福德(Douglas Crockford)的视频。他们非常好。

The Javascript programming language: History, Language, Advanced Features, Platforms, Standards, Style [download slides]
- See YUI blog entry
- 看到YUI博客条目
Javascript编程语言:历史、语言、高级特性、平台、标准、风格[下载幻灯片]见YUI博客条目
Theory of the DOM [download slides]
- See YUI blog entry
- 看到YUI博客条目
DOM理论[下载幻灯片]见YUI博客条目
Advanced Javascript: Inheritance, modules, debugging, efficiency, JSON [download slides]
- See YUI blog entry
- 看到YUI博客条目
高级Javascript:继承，模块，调试，效率，JSON[下载幻灯片]见YUI博客条目

#7

I can see a reason, unrelated to the original post, to automatically compile jQuery code into standard JavaScript:

我可以看到一个与原始帖子无关的原因，可以自动将jQuery代码编译成标准的JavaScript:

16k -- or whatever the gzipped, minified jQuery library is -- might be too much for your website that is intended for a mobile browser. The w3c is recommending that all HTTP requests for mobile websites should be a maximum of 20k.

16k——或者任何gziked、minified jQuery库——对于移动浏览器来说可能太贵了。w3c建议移动网站的所有HTTP请求都应该是最多20k。

w3c specs for mobile

w3c规范为移动

So I enjoy coding in my nice, terse, chained jQuery. But now I need to optimize for mobile. Should I really go back and do the difficult, tedious work of rewriting all the helper functions I used in the jQuery library? Or is there some kind of convenient app that will help me recompile?

所以我喜欢用漂亮简洁的jQuery代码。但是现在我需要对移动设备进行优化。我真的应该回去重新编写jQuery库中使用的所有helper函数吗?或者有什么方便的应用程序可以帮助我重新编译?

That would be very sweet. Sadly, I don't think such a thing exists.

那太好了。遗憾的是，我认为这样的事情并不存在。

#8

Jeremy Keith's book "DOM Scripting" is a great intro to working with Javascript and the DOM. I highly recommend it, whether you want to use jQuery or not. It's good to know what's going on beneath.

Jeremy Keith的书“DOM脚本”是一个关于使用Javascript和DOM的很好的介绍。无论你是否想使用jQuery，我强烈推荐它。很高兴知道下面发生了什么。

#9

There are several good books available. I like ppk on JavaScript. Here's Chapter 8 on the DOM.

有几本好书。我喜欢JavaScript上的ppk。这是关于DOM的第八章。

#1