Bringen Sie eine einfache Implementierung von nativem JS, die einige JQuery-Methoden ersetzt. Ich finde es ziemlich gut, deshalb möchte ich es mit allen teilen und als Referenz verwenden.
1. Elemente auswählen
// jQuery
var els = $('.el');
// Native
var els = document.querySelectorAll('.el');
// Shorthand
var $ = function (el) {
return document.querySelectorAll(el);
}querySelectorAll-Methode gibt ein NodeList-Objekt zurück, das in ein Array konvertiert werden muss.
myList = Array.prototype.slice.call(myNodeList)
2. Elemente erstellen
// jQuery var newEl = $('<p/>'); // Native var newEl = document.createElement('p');
3. Ereignisse hinzufügen
// jQuery
$('.el').on('event', function() {
});
// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() {
}, false);
});4.get/setAttribute
// jQuery $('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key'); // Native document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');
5. Stile hinzufügen und entfernen Klasse
Das DOM-Element selbst hat ein The Das Attribut className mit Lese-/Schreibzugriff kann zum Betreiben von Klassen verwendet werden.
HTML 5 bietet außerdem ein ClassList-Objekt mit leistungsfähigeren Funktionen (wird von IE 9 nicht unterstützt).
// jQuery $('.el').addClass('class'); $('.el').removeClass('class'); $('.el').toggleClass('class'); // Native document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');
6. Elemente anhängen
Elemente am Ende anhängen:
// jQuery $('.el').append($('<p/>')); // Native document.querySelector('.el').appendChild(document.createElement('p'));
Elemente am Kopf anhängen:
//jQuery
$(‘.el').prepend('<p></p>')
//Native
var parent = document.querySelector('.el');
parent.insertBefore("<p></p>",parent.childNodes[0])7. Element klonen
// jQuery var clonedEl = $('.el').clone(); // Native var clonedEl = document.querySelector('.el').cloneNode(true);
8. Element entfernen
Remove
// jQuery
$('.el').remove();
// Native
remove('.el');
function remove(el) {
var toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}9 Element
// jQuery $('.el').parent(); // Native document.querySelector('.el').parentNode;
10. Holen Sie sich das vorherige/nächste Element (Vorheriges/nächstes Element)
// jQuery $('.el').prev(); $('.el').next(); // Native document.querySelector('.el').previousElementSibling; document.querySelector('.el').nextElementSibling;
11.XHR und AJAX
// jQuery
$.get('url', function (data) {
});
$.post('url', {data: data}, function (data) {
});
// Native
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});12. Untergeordnete Elemente löschen
//jQuery
$("#elementID").empty()
//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);13. Überprüfen Sie, ob untergeordnete Elemente vorhanden sind
//jQuery
if (!$("#elementID").is(":empty")){}
//Native
if (document.getElementById("elementID").hasChildNodes()){}14.$(document).ready
Wenn das DOM geladen wird, wird das DOMContentLoaded-Ereignis ausgelöst, das der $(document).ready-Methode von jQuery entspricht .
document.addEventListener("DOMContentLoaded", function() {
// ...
});15. Datenspeicherung
jQuery-Objekte können Daten speichern.
$("body").data("foo", 52);HTML 5 verfügt über ein Datensatzobjekt, das ähnliche Funktionen hat (von IE 10 nicht unterstützt), aber nur Strings speichern kann.
element.dataset.user = JSON.stringify(user); element.dataset.score = score;
16. Animation
Die Animationsmethode von jQuery wird zum Generieren von Animationseffekten verwendet.
$foo.animate('slow', { x: '+=10px' }Die Animationseffekte von JQuery basieren größtenteils auf DOM. Aber derzeit ist die CSS 3-Animation weitaus leistungsfähiger als die DOM-Animation, sodass Sie Animationseffekte in CSS schreiben und die Animation dann anzeigen können, indem Sie die Klassen der DOM-Elemente manipulieren.
foo.classList.add('animate')
Wenn Sie die Callback-Funktion für Animationen verwenden müssen, definiert CSS 3 auch entsprechende Ereignisse.
el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);Das obige ist der detaillierte Inhalt vonDetaillierte Beispiele von 16 Methoden zum Ersetzen von JQuery durch natives JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
