将jquery方法转换或更改为vanilla javascript [英] Convert or change jquery methods into vanilla javascript

问题描述

大家好，



我需要能够将当前的JQuery方法更改为Vanilla（常规）javascript部分。完整的代码可以在这里找到（编辑小提琴 - JSFiddle [ ^ ]。请注意，该链接不是垃圾邮件，下载，推广等。它只是显示一个流行的工具/ IDE，用于网页结果大多数IT /编码站点使用，尤其是Web设计）。遗憾的是，无法使用外部网站或API（因此转换的原因）。我也明白jquery是javascript的一部分，但这不是我想要的。我希望将剩余的jquery段转换为可用的javascript。 :)



我尝试过：



<$ p $这是我到目前为止所尝试的：

之前：
$（。heading）。each（function（）{
var $ this，colors;
$ this = $（this）;
colors = getColors（）;
$ this.css（{backgroundColor：colors [0]，color：colors [1]， fontFamily：getFont（）}）;
}）;

之后：
document.querySelectorAll（。heading）。forEach（function（head）{
var colors = getColors（）;
head.setAttribute（ style，backgroundColor：+ colors [0] +; color：+ colors [1] +; fontFamily：+ getFont（）+;）;
}）;

第二个之前：

< pre> $（body）。keyup（function（e）{
var colors = getColors（）;
if（（e.which> = 65&& e.which< = 90）|| e.which == 88 || e.which == 90 ||（e.which> = 48&& e.which< = 57））{
$（< div class ='letter'>+ String.fromCharCode（e.which）+< / div> ）.appendTo（。paper）。css（{
backgroundColor：colors [0]，
color：colors [1]，
fontFamily：getFont（） ，
fontSize：getSize（），
padding：getPadding（），
marginRight：getMargin（），
transform：getTransform（）
}）。wrap（< div class ='zoom'>）;
}

2nd部分

 if（e.which == 13）{
 $（< br>）。appendTo（。paper）。css（ backgroundColor，transparent）; 
} 
 if（e.which == 32）{
 $（< span class ='letter space'>< / span> ）.appendTo（。paper）。css（backgroundColor，transp不是）; 
} 
 if（e.which == 46）{
 
} 
}）; 

我正在努力将第二部分成功转换成可行的Javascript。如果有可用的工具，请随意添加（也会欣赏）。我已阅读过许多网站，查看过Mozilla参考资料，然后用Google搜索，但还没有成功找到可行且易于理解的解决方案。也许一个有用的Javascript专家可以解决这个难题？

解决方案

（。heading）。each（function（）{
var

this，colors;

this =

Hi all,

I need to be able to change the current JQuery Methods into Vanilla(regular) javascript parts. The full code can be found here (Edit fiddle - JSFiddle[^]. Note the link is not spam, download, promoting, etc. It is simply displaying to a popular tool/IDE for webpage results that most IT/Coding sites use, especially for Web Design). Unfortunately, external sites or API's cannot be used (thus the reason for the conversion). I also understand that jquery is part of javascript but that is not what I am looking for. I am looking to convert the remaining jquery segments into workable javascript. :)

What I have tried:

Here's what I've tried so far:

Before:
$(".heading").each(function() {
  var $this, colors;
  $this = $(this);
  colors = getColors();
  $this.css({"backgroundColor": colors[0], "color": colors[1], "fontFamily": getFont()});
});

After:
document.querySelectorAll(".heading").forEach(function(head) {
  var colors = getColors();
  head.setAttribute("style", "backgroundColor: " + colors[0] + "; color: " + colors[1] + "; fontFamily: " + getFont() + ";");
});

The Second Before:

<pre>$("body").keyup(function(e) {
  var colors = getColors();
  if ((e.which >= 65 && e.which <= 90) || e.which == 88 || e.which == 90 || (e.which >= 48 && e.which <= 57)) {
    $("<div class='letter'>" + String.fromCharCode(e.which) + "</div>").appendTo(".paper").css({
      "backgroundColor": colors[0],
      "color": colors[1],
      "fontFamily": getFont(),
      "fontSize": getSize(),
      "padding": getPadding(),
      "marginRight": getMargin(),
      "transform": getTransform()
    }).wrap("<div class='zoom'>");
  }

2nd Part

if(e.which==13) {
    $("<br>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if(e.which==32) {
    $("<span class='letter space'>  </span>").appendTo(".paper").css("backgroundColor", "transparent");
  }
  if(e.which==46) {

  }
});

I am struggling to convert the second Before and the 2nd part successfully into workable Javascript. If there is a tool available that does, feel free to add (would also appreciate as well). I have read upon many sites, looked at the Mozilla reference, and googled but have not successfully found the workable and understandable solution. Perhaps a helpful Javascript Expert(s) could solve this dilemma?

解决方案

(".heading").each(function() { var

this, colors;

this =

这篇关于将jquery方法转换或更改为vanilla javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！