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 :
Définissez le texte interne d'un élément HTML :
myElement.text("Hello Sweden!");
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>Setting Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<script>
$(document).ready(function() {
var myElement = $("#01");
myElement.text("Hello Sweden!");
});
</script>
</body>
</html>
myElement.textContent = "Hello Sweden!";
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>Setting Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<script>
const myElement = document.getElementById("01");
myElement.textContent = "Hello Sweden!";
</script>
</body>
</html>
Obtenez le texte interne d'un élément HTML :
myText = $("#02").text();
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>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myText = $("#02").text();
$("#demo").text(myText);
});
</script>
</body>
</html>
myText = document.getElementById("02").textContent;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>Get Text Content</h2>
<p id="01">Hello World!</p>
<p id="02">Hello Sweden!</p>
<p id="03">Hello Japan!</p>
<p id="demo"></p>
<script>
const myText = document.getElementById("02").textContent;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html>
Définissez le contenu HTML d'un élément :
myElement.html("<p>Hello World</p>");
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>Set HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>
<p id="demo"></p>
<script>
$(document).ready(function() {
$("#02").html("<p>Hello World!</p>");
});
</script>
</body>
</html>
myElement.innerHTML = "<p>Hello World</p>";
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>Set HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>
<p id="demo"></p>
<script>
document.getElementById("02").innerHTML = "<p>Hello World!</p>";
</script>
</body>
</html>
Récupère le contenu HTML d'un élément :
content = myElement.html();
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>Set HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>
<script>
$(document).ready(function() {
var content = $("#02").html();
$("#01").html(content);
});
</script>
</body>
</html>
content = myElement.innerHTML;
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<body>
<h2>Setting HTML</h2>
<div id="01"><p>Hello World!</p></div>
<div id="02"><p>Hello Sweden!</p></div>
<script>
const content = document.getElementById("02").innerHTML;
document.getElementById("01").innerHTML = content;
</script>
</body>
</html>