Exemples détaillés de 16 méthodes pour remplacer JQuery par du js natif

Vous apporter une implémentation simple de JS natif remplaçant certaines méthodes JQuery. Je pense que c’est plutôt bien, alors j’aimerais le partager avec tout le monde et le donner comme référence.

1. La méthode Select elements

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
 return document.querySelectorAll(el);
}

querySelectorAll renvoie un objet NodeList , qui doit être converti en tableau.

myList = Array.prototype.slice.call(myNodeList)

2. Créer des éléments

// jQuery
var newEl = $(&#39;<p/>&#39;);

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

3. Ajouter des événements

// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
 el.addEventListener('event', function() {

 }, false);
});

4.get/setAttributs

// 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 Ajouter et supprimer des styles Classe

L'élément DOM lui-même a un The. L'attribut className en lecture-écriture peut être utilisé pour faire fonctionner des classes.

HTML 5 fournit également un objet classList avec des fonctions plus puissantes (non pris en charge par IE 9).

// 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. Ajouter des éléments

Ajouter des éléments à la queue :

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

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

Ajouter des éléments à la tête :

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

//Native
var parent = document.querySelector(&#39;.el&#39;);
parent.insertBefore("<p></p>",parent.childNodes[0])

7. Cloner l'élément

// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

8. Supprimer l'élément

Remove
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
 var toRemove = document.querySelector(el);

 toRemove.parentNode.removeChild(toRemove);
}

9. élément

// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;

10. Obtenir l'élément précédent/suivant (élément précédent/suivant)

// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

11.XHR et 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. Effacer les éléments enfants

//jQuery
$("#elementID").empty()

//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);

13. 🎜 >

14.$(document).ready

//jQuery
if (!$("#elementID").is(":empty")){}

//Native
if (document.getElementById("elementID").hasChildNodes()){}

Lorsque le DOM est chargé, l'événement DOMContentLoaded sera déclenché, ce qui est équivalent à la méthode $(document).ready de jQuery .

15. Stockage des données

document.addEventListener("DOMContentLoaded", function() {
  // ...
});

Les objets jQuery peuvent stocker des données.

HTML 5 possède un objet ensemble de données, qui a des fonctions similaires (IE 10 ne le prend pas en charge), mais il ne peut enregistrer que des

chaînes

$("body").data("foo", 52);

.

16. Animation

element.dataset.user = JSON.stringify(user);
element.dataset.score = score;

La méthode d'animation de jQuery est utilisée pour générer des effets d'animation.

Les effets d'animation de JQuery sont largement basés sur DOM. Mais actuellement, l'animation CSS 3 est bien plus puissante que DOM, vous pouvez donc écrire des effets d'animation en CSS, puis afficher l'animation en manipulant les classes d'éléments DOM.

$foo.animate('slow', { x: '+=10px' }

Si vous devez utiliser la

fonction de rappel

foo.classList.add('animate')

pour l'animation, CSS 3 définit également les événements correspondants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!