javascript - 将 jQuery 翻译为 JavaScript

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我是 SO 和 JS 的新手。我想将这段代码翻译成纯JS，但我真的很挣扎。有人可以帮我吗？

$(document).ready(function(){
    var displayFix = function(num) {
        if (num.length > 9) {
            total.text(num.substr(0,9));
        }
    };
    var number = "";
    var newNumber = "";
    var operator = "";
    var total = $(".display");
    total.text("0");

    $(".numbers span").not(".clear, .dot").click(function(){
        number += $(this).text();
        total.text(number);
        displayFix(number);
    });
    $(".dot").click(function() {
        if ( number.length == 0)     
    { number = "0.";
    } else {
        number += $(this).text();
        total.text(number);
        displayFix(number);
    };
    });
    $(".operators span").not(".igual").click(function(){
        operator = $(this).text();
        newNumber = number;
        number = "";
        total.text("0");
    });
    $(".clear").click(function(){
        number = "";
        total.text("0");
        newNumber = "";
    });
    $(".igual").click(function(){
        if (operator === "+"){
            number = (parseFloat(newNumber,10) + parseFloat(number,10)).toString(10);
        } else if (operator === "-"){
            number = (parseFloat(newNumber,10) - parseFloat(number,10)).toString(10);
        } else if (operator === "/"){
            number = (parseFloat(newNumber,10) / parseFloat(number,10)).toString(10);
        } else if (operator === "*"){
            number = (parseFloat(newNumber,10) * parseFloat(number,10)).toString(10);
        }
        total.text(number);
        displayFix(number);
        number = "";
        newNumber = "";
    });
        $(document).keypress(function(event){
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode === 49) {
            $("#num1").click();
       } else if (keycode === 50) {
            $("#num2").click();
        } else if (keycode === 51) {
            $("#num3").click();
        }
    });
});

我想我可以替换以下几行:

• var total = $(".display")与 var total = document.querySelector(".display")
• total.text("0")与 total.innerHTML="0"
• $(".dot").click(function() {与 document.querySelector(".dot").onclick = function() {

此外，我使用的浏览器是更新版 Chrome，我不需要它来支持其他浏览器。

Answer 1

youmightnotneedjquery是你的 friend 。您将看到您可以定义自己的 jQuery.ready() 替代品:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

然后您需要习惯不使用 jQuery 包装器，这意味着处理数组索引和可能的空结果。因此，例如 document.querySelector(".dot").onclick = function() { 还不够，你想做

var dots = document.querySelector(".dot");
for(var i=0; i<dots.length; i++ ){
   dots[i].onclick = function() { ... }
}

最后，由于没有 jQuery .not()，您需要手动丢弃元素:

var operators = document.querySelector(".operators span");
for(var i=0; i<operators.length; i++ ){
    var operator = operators[i];
    if(operator.className.indexOf("igual") < 0){
        //do stuff
    }else{
        //don't
    }
}

注意:当您的选择器只是一个 id 或一个类时，您可能需要使用 document.getElementById() 和 document.getElementsByClassName .

希望这个简短的指导足以让您开始。