Javascript Equivalent von Jquery

Ich habe ein Problem bei der Umwandlung von jquery in Javascript, da meine Anwendung Anforderung ist nicht zu jquery und nur in einfachen HTML-und Javascript. Ich weiß, wie man den Code in Jquery schreibt, aber nicht in Javascript konvertieren kann. Mein Code ist wie folgtJavascript Equivalent von Jquery

$(document).ready(function() { 
    $('input[type="button"').click(function() { 
    $(this).prop('disabled','disabled'); 
    }); 
});

Wie man dieses Code-Snippet in Javascript umwandelt.

Quelle

2016-05-05 Iswar K Chettri

Beachten Sie, dass '$ (this) .prop ('behindert', 'behindert');' zu viel jQuery ist, auch wenn Sie verwenden jQuery in einem allgemeinen Sinn: das Sagen von 'this.disabled = true' ist effizienter * und * einfacher zu lesen. – nnnnnn

Weiter zu dem, was @nnnnnn gesagt hat - selbst wenn Sie jQuery verwenden würden, sollten Sie die Eigenschaft auf 'true' setzen anstatt auf '' disabled''..bemerkt, dass' .prop' den Wert einer Eigenschaft auf ein DOM-Element setzt, anstatt ein HTML-Attribut gemäß '.attr 'zu modifizieren – Andy

Verwenden Sie das DOMContentLoaded Ereignis wie folgt:

document.addEventListener("DOMContentLoaded", function(event) { 
 
    console.log("DOM fully loaded and parsed"); 
 
    var btns = document.querySelectorAll("input[type=button]"); 
 
    for (let i = 0; i < btns.length; i++) { 
 
    btns[i].addEventListener("click", function() { 
 
     //Do stuff 
 
     console.log("button" + i + "clicked"); 
 
    }); 
 
    } 
 
});

Quelle

2016-05-05 07:24:25

'querySelector' wird nur ein Element auswählen! – Rayon

Hat das mit '.forEach' funktioniert? Überprüfen Sie die Konsole auf Fehler ... – Rayon

Eine Knoten-Sammlung hat keine 'forEach'-Methode. – Andy

Verwenden window.onloadload-event auf der Liste zur Auswahl der Elemente in dem Dokument, die die angegebene Gruppe von Selektoren entsprechen window
document.querySelectorAll zu handhaben.
[].forEach.call, um durch ausgewählte Elemente zu iterieren.
addEventListener, um den angegebenen Listener für das Element zu registrieren.

window.onload = function() { 
    var elems = document.querySelectorAll('input[type="button"]'); 
    [].forEach.call(elems, function(el) { 
    el.addEventListener('click', function() { 
     this.disabled = true; 
    }); 
    }); 
};

Edit:document.addEventListener('DOMContentLoaded', function() {}); statt window.onload verwendet werden könnten, aber Browser compatibility prüfen, wie gut. Eine weitere einfachere Alternative wäre, Ihre <script> als last-child von <body> ohne Ihre script in einem load Handler zu platzieren.

Quelle

2016-05-05 07:22:08 Rayon

+1 Sie können vorschlagen,' document.addEventListener ("DOMContentLoaded", Funktion (Ereignis) {}); 'statt' window.onload' zu verwenden. Weil '$ (document) .ready' völlig anders ist als 'window.onload' –

@RajaprabhuAravindasamy, das kam mir zuerst in den Sinn, aber jemand schlug mir vor, [__Browser compatibility__] (https://developer.mozilla.org/de-DE/docs/Web/Ereignisse/DOMContentLoaded # Browser_compatibility) – Rayon

Window.load ist völlig anders als document.ready –

Javascript Equivalent von Jquery

Antwort

Verwandte Themen