Exemples détaillés de 16 méthodes pour remplacer JQuery par du js natif-js tutoriel-php.cn

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

伊谢尔伦

Libérer： 2017-06-17 11:46:35

original

1802 Les gens l'ont consulté

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

// Native
var els = document.querySelectorAll(&#39;.el&#39;);

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

Copier après la connexion

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

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

Copier après la connexion

2. Créer des éléments

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

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

Copier après la connexion

3. Ajouter des événements

// jQuery
$(&#39;.el&#39;).on(&#39;event&#39;, function() {

});

// Native
[].forEach.call(document.querySelectorAll(&#39;.el&#39;), function (el) {
 el.addEventListener(&#39;event&#39;, function() {

 }, false);
});

Copier après la connexion

4.get/setAttributs

// jQuery
$(&#39;.el&#39;).filter(&#39;:first&#39;).attr(&#39;key&#39;, &#39;value&#39;);
$(&#39;.el&#39;).filter(&#39;:first&#39;).attr(&#39;key&#39;);

// Native
document.querySelector(&#39;.el&#39;).setAttribute(&#39;key&#39;, &#39;value&#39;);
document.querySelector(&#39;.el&#39;).getAttribute(&#39;key&#39;);

Copier après la connexion

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
$(&#39;.el&#39;).addClass(&#39;class&#39;);
$(&#39;.el&#39;).removeClass(&#39;class&#39;);
$(&#39;.el&#39;).toggleClass(&#39;class&#39;);

// Native
document.querySelector(&#39;.el&#39;).classList.add(&#39;class&#39;);
document.querySelector(&#39;.el&#39;).classList.remove(&#39;class&#39;);
document.querySelector(&#39;.el&#39;).classList.toggle(&#39;class&#39;);

Copier après la connexion

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;));

Copier après la connexion

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])

Copier après la connexion

7. Cloner l'élément

// jQuery
var clonedEl = $(&#39;.el&#39;).clone();

// Native
var clonedEl = document.querySelector(&#39;.el&#39;).cloneNode(true);

Copier après la connexion

8. Supprimer l'élément

Remove
// jQuery
$(&#39;.el&#39;).remove();

// Native
remove(&#39;.el&#39;);

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

 toRemove.parentNode.removeChild(toRemove);
}

Copier après la connexion

9. élément

// jQuery
$(&#39;.el&#39;).parent();

// Native
document.querySelector(&#39;.el&#39;).parentNode;

Copier après la connexion

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

// jQuery
$(&#39;.el&#39;).prev();
$(&#39;.el&#39;).next();

// Native
document.querySelector(&#39;.el&#39;).previousElementSibling;
document.querySelector(&#39;.el&#39;).nextElementSibling;

Copier après la connexion

11.XHR et AJAX

// jQuery
$.get(&#39;url&#39;, function (data) {

});
$.post(&#39;url&#39;, {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open(&#39;GET&#39;, url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open(&#39;POST&#39;, url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

Copier après la connexion

12. Effacer les éléments enfants

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

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

Copier après la connexion

13. 🎜 >

14.$(document).ready

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

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

Copier après la connexion

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() {
  // ...
});

Copier après la connexion

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);

Copier après la connexion

16. Animation

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

Copier après la connexion

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(&#39;slow&#39;, { x: &#39;+=10px&#39; }

Copier après la connexion

Si vous devez utiliser la

fonction de rappel

foo.classList.add(&#39;animate&#39;)

Copier après la connexion

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!