Detaillierte Beispiele von 16 Methoden zum Ersetzen von JQuery durch natives JS

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 = $(&#39;<p/>&#39;);

// Native
var newEl = document.createElement(&#39;p&#39;);

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
$(&#39;.el&#39;).append($(&#39;<p/>&#39;));

// Native
document.querySelector(&#39;.el&#39;).appendChild(document.createElement(&#39;p&#39;));

Elemente am Kopf anhängen:

//jQuery
$(‘.el&#39;).prepend(&#39;<p></p>&#39;)

//Native
var parent = document.querySelector(&#39;.el&#39;);
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!