Assalamualaikum Wr,Wb
Sesuai judul postingan kita akan belajar bagaimana cara menyeleksi beberapa element halaman sekaligus
Ketika kita melewatkan sebuah selektor pada fungsi jquery(), atau fungsi $() itu artinya kita sudah menyeleksi sekumpulan elemen.
Pada contoh kali ini kita akan memakai elemen paragraf pada sebuah halaman menggunakan selektor "p", kalau di tulisa dalam jquery seperti ini $("p"). Selektor ini akan menghasilkan semua elemen paragraf. dan akan menghitung jumlah elemen paragraf dengan fungsi jquery size() dan menampilkanya pada kotak alert. yuk langsung praktek aja
Persiapan
- Gunakan Editor seperti visual studio code, untuk membuat halaman web
- Buat File baru dengan akhiran .HTML, disi saya mencontohkan dengan membuat file index.html
- Panggil File jquery.js
- Tambhkan kode jquery untuk menghitung jumlah paragraf
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript/Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<center>
<h1>Menghitung Halaman Paragraf</h1>
<div>
<p>Ini Paragraf 1</p>
<p>Ini Paragraf 2</p>
<p>Ini Paragraf 3</p>
<p>Ini Paragraf 4</p>
</div>
<form>
<input type="button" value="Hitung Paragraf" onclick="hitung()">
</form>
</center>
</body>
</html>
File jquery.js CDN
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>kode untuk menghitung jumlah paragraf
<script>
function hitung(){
alert("Ada Sebanyak " + $("p").size() + " Paragraf");
}
</script>
Taruh kode jquery diantar tag HEAD, kemudian simpan dan dan panggil file index.html dibrowser, klik tombol hitung paragraf, nanti temen akan meliah sebuah kotak alert yang mengitung jumlah paragraf di halaman index.html, coba temen temen tambahkan jumlah paragraf lagi di file index, kemudian simpan, klik lagi tombol hitung paragraf, otomatis jumlah pargraf akan bertambah, Kurang Lebih Tampilanya seperti dibawah ini
Satu lagi Contoh untuk menyeleksi elemen dengan gaya style css. buka halaman index.html copy paste kode dibawah ini
File index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Javascript/Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
p.kedua{
font-weight: bold;
}
p.diwarnai{
background-color: red;
}
</style>
</head>
<body>
<center>
<h1>Menghitung Halaman Paragraf</h1>
<div>
<p>Ini Paragraf 1</p>
<p class="kedua">Ini Paragraf 2</p>
<p>Ini Paragraf 3</p>
<p>Ini Paragraf 4</p>
</div>
<form>
<input type="button" value="Hitung Paragraf" onclick="hitung()">
<input type="button" value="Warnai" onclick="warna()">
</form>
</center>
</body>
</html>
<script>
function hitung(){
alert("Ada Sebanyak " + $("p").size() + " Paragraf");
}
function warna(){
$('p.kedua').toggleClass("diwarnai");
}
</script>
Penambahakan Fungsi Jquery
<script>
function hitung(){
alert("Ada Sebanyak " + $("p").size() + " Paragraf");
}
function warna(){
$('p.kedua').toggleClass("diwarnai");
}
</script>
jangan lupa save dulu perubahan di file index.html, kemudian refresh browser temen temen, klik tombol warnai, kurang lebih tampilanya seperti dibawah ini
Sekian dulu, semoga bisa dipahami dan bermanfaat, InsaAllah Part belajar jquery akan terus diupdate
Tidak ada komentar:
Tulis komentar