Belajar jQuery Focus dan Blur

Halo Sobat Webhozz, Kali ini kita akan mempelajari Efek Jquery Focus & Blur. Berikut langkahnya.

Pertama kita membuat koneksi html ke jquery, seperti ini

<!DOCTYPE html>
<html>
<head>
<title>Latihan jquery</title>
<script src="jquery-3.3.1.min.js"></script>

Lalu langkah kedua kita kasih perintah jquery berubah warna di form kita, seperti ini.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    <!--$("input") itu berhubungan dengan input yang ada di body untuk merubah warna form dan focus dan blur perintah mewarnai formnya.-->
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>
</head>

Continue reading

Membuat Efek Hide dan Show dengan JQuery

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Oke, pada kesempatan kali ini kita akan belajar tentang JQuery. Kita akan membuat objek dari tag HTML bisa menghilang dan muncul kembali.

Kita akan membuat beberapa tag HTML yang dibutuhkan, yaitu div, tombol submit dan sentuhan sedikit css.

Jadi, ceritanya, kita akan membuat tag

ini akan dibuat dengan bentuk kotak berwarna merah lalu hilang atau muncul lagi saat kita tekan tombol submit. Oke…langsung aja kita mulai.

1. Tulis script html awal.

<!DOCTYPE html>
<html>
<head>
	<title>Efek Hilang</title>
</head>
<body>

</body>
</html> 

Continue reading

Tutorial Dasar JQUERY Menggunakan Fungsi Event Click()

Assalamualaikum Wr. Wb

JQuery merupakan Javascript Library yang mana JQuery ini merupakan kumpulan script-script perintah pada Javascript yang sudah siap untuk dipakai. JQuery digunakan untuk meringkas listing kode Javascript sendiri agar lebih mudah untuk dipakai. JQuery sendiri, memiliki banyak versi dan selalu update. Kalo yang sekarang saya pakai ini adalah Jquery versi v3.2.1, yang mana Jquery ini merupakan versi terbaru dari JQuery saat ini. Hanya saja ada kemungkinan bakal ada lagi muncul versi-versi terbaru dari Jquery yang akan update lagi. Sebenarnya, setiap versi itu tidak jauh berbeda hanya saja versi terbaru masih punya fungsi-fungsi dari versi-versi sebelumnya. Jadi, jikalau kamu nanti downloadnya versi yang lebih baru daripada versi yang saya gunakan saat ini maka tidak masalah.

Continue reading