jQueryDOM


Table des matières

    Afficher la table des matières


jQuery contre JavaScript

jQuery a été créé en 2006 par John Resig. Il a été conçu pour gérer les incompatibilités des navigateurs et pour simplifier la manipulation HTML DOM, la gestion des événements, les animations et Ajax.

Depuis plus de 10 ans, jQuery est la bibliothèque JavaScript la plus populaire au monde.

Cependant, après la version 5 de JavaScript (2009), la plupart des utilitaires jQuery peuvent être résolus avec quelques lignes de JavaScript standard :


Suppression d'éléments HTML

Supprimez un élément HTML :

jQuery

$("#id02").remove();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<h2>Remove an HTML Element</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>

<script>
$(document).ready(function() {
  $("#id02").remove();
});
</script>

</body>
</html>

Javascript

document.getElementById("id02").remove();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Remove an HTML Element</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>

<script>
document.getElementById("id02").remove();
</script>

</body>
</html>

Obtenir l'élément parent

Renvoie le parent d'un élément HTML :

jQuery

myParent = $("#02").parent().prop("nodeName"); ;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<h2>Getting Parent HTML Element</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>

<p id="demo"></p>

<script>
$(document).ready(function() {
  $("#demo").text($("#02").parent().prop("nodeName")); 
});
</script>

</body>
</html>

Javascript

myParent = document.getElementById("02").parentNode.nodeName;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Get Parent HTML Element</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.getElementById("02").parentNode.nodeName;
</script>

</body>
</html>