jQuery CSS: Contoh dan Cara Menggunakannya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 30, 2020

Section Artikel

1 jQuery vs JavaScript
2 Menyembunyikan Elemen HTML
3 Menampilkan Elemen HTML
4 Styling Elemen HTML

jQuery vs JavaScript

jQuery dibuat pada tahun 2006 oleh John Resig. Ini dirancang untuk menangani Ketidaksesuaian Browser dan untuk menyederhanakan Manipulasi DOM HTML, Penanganan Acara, 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:

Menyembunyikan Elemen HTML

Sembunyikan Elemen HTML:

JQuery

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

<h1>Mendapatkan Konten Teks</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello Sweden!</h2>
<h2 id="03">Hello Japan!</h2>

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

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.hide();
});
</script>

</body>
</html>

JavaScript

<!DOCTYPE html>
<html>
<body>

<h1>Menyembunyikan Elemen HTML</h1>
<h2 id="01">Hello World!</h2>
<h2 id="02">Hello Sweden!</h2>
<h2 id="03">Hello Japan!</h2>

<script>
document.getElementById("02").style.display = "none";
</script>

</body>
</html>

Menampilkan Elemen HTML

Menampilkan sebuah Elemen HTML:

JQuery

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

<h1> Menampilkan Elemen HTML </h1>
<h2 id="01" style="display:none">Hello World!</h2>
<h2 id="02" style="display:none">Hello Sweden!</h2>
<h2 id="03" style="display:none">Hello Japan!</h2>

<script>
$(document).ready(function() {
  var myElement = $("#02");
  myElement.show();
});
</script>

</body>
</html>

JavaScript

<!DOCTYPE html>
<html>
<body>

<h1> Menampilkan Elemen HTML </h1>
<h2 id="01" style="display:none">Hello World!</h2>
<h2 id="02" style="display:none">Hello Sweden!</h2>
<h2 id="03" style="display:none">Hello Japan!</h2>

<script>
var myElement = document.getElementById("02");
myElement.style.display = "";
</script>

</body>
</html>

Styling Elemen HTML

Ubah ukuran font elemen HTML:

JQuery

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

<p id ="demo"> JavaScript dapat mengubah style elemen HTML. </p>
<script>
$(document).ready(function() {
  var myElement = $("#demo");
  myElement.css("font-size","35px");
});
</script>

</body>
</html>

JavaScript

<!DOCTYPE html>
<html>
<body>

<p id = "demo"> JavaScript dapat mengubah style elemen HTML. </p>
<script>
var myElement = document.getElementById("demo");
myElement.style.fontSize = "35px";
</script>

</body>
</html>

javascript