Section Artikel
jQuery vs JavaScript
jQuery dibuat pada tahun 2006 oleh John Resig. JQuery dirancang untuk menangani Ketidaksesuaian Browser dan untuk menyederhanakan Manipulasi DOM HTML, Event Handler, Animasi, dan AJAX.
Selama lebih dari 10 tahun, jQuery telah menjadi pustaka JavaScript paling populer di dunia.
Namun, setelah JavaScript Versi 5 (2009), sebagian besar utilitas jQuery dapat diselesaikan dengan beberapa baris JavaScript standar:
Menemukan Elemen HTML berdasarkan Id
Kembalikan elemen dengan id = “id01”:
JQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h2>Menemukan Elemen HTML dengan 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("Teks dari paragraf id01 adalah: " + myElements[0].innerHTML); }); </script> </body> </html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Menemukan Elemen HTML dengan 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>
var myElement = document.getElementById("id01");
document.getElementById("demo").innerHTML = "Teks dari paragraf id01 adalah: " + myElement.innerHTML;
</script>
</body>
</html>
Menemukan Elemen HTML dengan Nama Tag
Kembalikan semua elemen <p>:
jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2> Menemukan Elemen HTML dengan Nama Tag </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("Teks di paragraf pertama adalah: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2> Menemukan Elemen HTML dengan Nama Tag </h2>
<p>Hello World!</p>
<p>Hello Sweden!</p>
<p>Hello Japan!</p>
<p id="demo"></p>
<script>
var myElements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "Teks di paragraf pertama adalah: " + myElements[0].innerHTML;
</script>
</body>
</html>
Menemukan Elemen HTML berdasarkan Nama Kelas
Kembalikan semua elemen dengan class = “intro”.
jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Menemukan Elemen HTML dengan Nama Kelas</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("Paragraf pertama dengan class = 'intro' adalah: " + myElements[0].innerHTML);
});
</script>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Menemukan Elemen HTML dengan Nama Kelas</h2>
<p class="intro">Hello World!</p>
<p class="intro">Hello Sweden!</p>
<p class="intro">Hello Japan!</p>
<p id="demo"></p>
<script>
var myElements = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = "Paragraf pertama dengan class = 'intro' adalah: " + myElements[0].innerHTML;
</script>
</body>
</html>
Menemukan Elemen HTML oleh Selector CSS
Kembalikan daftar semua elemen <p> dengan class = “intro”.
jQuery
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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("Paragraf pertama dengan class = 'intro' adalah: " + myElements[0].innerHTML); }); </script> </body> </html>
JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Menemukan Elemen HTML dengan 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>
var myElements = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
"Paragraf pertama dengan class = 'intro' adalah: " + myElements[0].innerHTML;
</script>
</body>
</html>
