将jquery方法转换或更改为vanilla

将jquery方法转换或更改为vanilla

本文介绍了将jquery方法转换或更改为vanilla javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好,



我需要能够将当前的JQuery方法更改为Vanilla(常规)javascript部分。完整的代码可以在这里找到( []。请注意,该链接不是垃圾邮件,下载,推广等。它只是显示一个流行的工具/ 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专家可以解决这个难题?

解决方案




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?

解决方案




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

08-11 20:55