jQueryn loi vuonna 2006 John Resig. Se on suunniteltu käsittelemään selaimen yhteensopimattomuudet ja yksinkertaistamaan HTML DOM -manipulaatiota, tapahtumien käsittelyä, animaatioita ja Ajaxia.
Yli 10 vuoden ajan jQuery on ollut maailman suosituin JavaScript-kirjasto.
Kuitenkin JavaScript-version 5 (2009) jälkeen useimmat jQuery-apuohjelmat voidaan ratkaista muutamalla rivillä vakio JavaScriptiä:
Palauta elementti id="id01":llä:
myElement = $("#id01");
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<p id="id03">Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("#id01");
$("#demo").text("The text from the id01 paragraph is: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
myElement = document.getElementById("id01");
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Id</h2>
<p id="id01">Hello World!</p>
<p id="id02">Hello Sweden!</p>
<p id="id03">Hello Japan!</p>
<p id="demo"></p>
<script>
const myElement = document.getElementById("id01");
document.getElementById("demo").innerHTML = "The text from the id01 paragraph is: " + myElement.innerHTML;
</script>
</body>
</html>
Palauta kaikki <p>-elementit:
myElements = $("p");
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>Hello Sweden!</p>
<p>Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("p");
$("#demo").text("The text in the first paragraph is: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
myElements = document.getElementsByTagName("p");
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Tag Name</h2>
<p>Hello World!</p>
<p>Hello Sweden!</p>
<p>Hello Japan!</p>
<p id="demo"></p>
<script>
const myElements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "The text in the first paragraph is: " + myElements[0].innerHTML;
</script>
</body>
</html>
Palauta kaikki elementit komennolla class="intro".
myElements = $(".intro");
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Finding HTML Elements by Class Name</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $(".intro");
$("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
myElements = document.getElementsByClassName("intro");
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Class Name</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>
<p id="demo"></p>
<script>
const myElements = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = "The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>
</body>
</html>
Palauta luettelo kaikista <p> elementeistä komennolla class="intro".
myElements = $("p.intro");
Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<h2>Finding HTML Elements by Query Selector</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>
<p id="demo"></p>
<script>
$(document).ready(function() {
var myElements = $("p.intro");
$("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
myElements = document.querySelectorAll("p.intro");
Kokeile itse →
<!DOCTYPE html>
<html>
<body>
<h2>Finding HTML Elements by Query Selector</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>
<p id="demo"></p>
<script>
const myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
"The first paragraph with class='intro' is: " + myElements[0].innerHTML;
</script>
</body>
</html>