Skip to main content

jQuery : Events

Events

Sebelumnya kita telah belajar Selector yang mencari elemen-elemen apa saja yang akan dilakukan operasi terhadapnya, maka Event memutuskan kapan dilakukan operasi tersebut, misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya setelah diklik (click) atau setelah klik 2x (dblclik), setelah mouse berada diatas objek (hover), dan sebagainya.

 A. Event Click()

Event click dijalankan setelah terjadi klik pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$('a').click(function(){
alert("Selamat datang di website Fajar Yusuf")
});
});
</script>
</head>
<body>
<a href="www.fajarmyusuf.blogspot.co.id">Klik disini untuk
menuju halaman web Fajar Yusuf</a>
</body>
</html>



B. Event dblclick()

Event dblclick akan dijalankan setelah terjadi klik 2x pada suatu elemen yang telah ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").dblclick(function(){
$(this).css({background:"red"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}

</style>
<title>Latihan double klik</title>
</head>
<body>
<p>klik dua kali pada setiap kotak untuk mengubah
warnanya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>


C. Event mouseover()

Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang ditentukan.

 

D. Event mouseleave()

Event mouseleave akan dijalankan ketika kursor mouse meninggalkan elemen yang ditentukan.

Untuk lebih jelasnya penggunaan event mouseover dan mouseleave, perhatikan skrip berikut ini :

<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("div").mouseover(function(){
$(this).css({background:"red"});
});

$("div").mouseleave(function(){
$(this).css({background:"yellow"});
});
});
</script>
<style type="text/css">
div {
background:yellow;
width: 60px;
height:60px;
float:left;
margin:10px;
cursor:pointer;
}
</style>
<title>Latihan double klik</title>
</head>
<body>
<p>Letakan Kursor pada setiap kotak untuk mengubah
warnya</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>









Labels:

Comments

Post a Comment

Popular posts from this blog

Menambahkan Peraturan Komentar Pada Blog

Menambahkan Peraturan Komentar Pada Blog : Ngblog Menulis sebuah artikel dan dikomentari dengan link aktif/promosi produk dan kata kata spam lainnya memang tidak mengenakan anda mungkin akan sangat merasa kecewa sekali, anda mungkin seperti menulis sebuah artikel namun tidak dihargai karyanya oleh orang lain. Mungkin membuat aturan berkomentar di blog adalah salah 1 cara menetralisirnya, mungkin jika ada aturan tersebut orang berpikir 2 kali untuk meninggalkan komentar Spam, lalu bagaimana cara membuat aturan komentar tersebut? langsung saja kita praktekan Ikuti langkah berikut : Login ke bloger,masuk ke blog yang anda inginkan, Klik Setelan -> POS-KOMENTAR   Scroll kebawah dan cari menu "pesan formulir komentar" klik tambahkan , dan isi kolom sesuai keinginan kalian atau peraturan yang kalian inginkan.  Setelah selesai silakan klik simpan setelan dipojok kanan atas. Lihat hasilnya di blog kalian ,akan seperti ini : Jika ada pertanyaan...
21 comments
Baca Lebih »

Traha Infinity a lancé une campagne événementielle de pré-inscription

Moai Games a officiellement annoncé la sortie d’ un  nouveau  MMORPG  intitulé  Traha Infinity , dans la première moitié de 2022. Ce jeu mobile devrait se dérouler 200 ans avant les événements des précédents jeux  Traha , il a  des  graphismes  Full 3D  et optimisés performances haut de gamme pour smartphones. Traha a  été un énorme succès en Corée avec 4,2 millions de précommandes avant sa sortie officielle en 2019, le jeu mobile n’a jamais eu de sortie mondiale. Ce jeu a été développé par Moai Games et publié par  Nexon , et est devenu l’un des jeux les plus vendus de l’époque. Et maintenant,  Traha Infinity  continuera le même monde comme une suite, plutôt une préquelle. Le nouveau jeu présentera la même vision du monde et la même topographie que le jeu précédent, mais présentera un nouveau scénario. Ils se vantent d’ une qualité graphique  Full 3D haut  de gamme ainsi que d’un système optimisé pour les smartphones. Les joueurs pourront explorer l...
Post a Comment
Baca Lebih »

Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner.

Hai Pembaca FajarYusuf.Com yang pintar dan berwawasan tinggi, kali ini FajarYusuf.Com akan post Contoh Program C++ : Konversi Bilangan Hexadesimal, Oktal , Biner . Mari kita membuat program konversi bilangan yang sangat mudah di buat dengan menggunakan bahasa pemrograman C++. Yaitu dengan menggunakan type data long, untuk Hexadesimal dengan rumus : <<hex<<desimal (merubah dari bilangan Desimal ke Hexadesimal) , untuk Oktal dengan rumus : <<oct<<desimal (merubah dari bilangan Desimal ke Oktal). Dan untuk biner dilakukan pembagian 2. Contoh Coding Program C++ Konversi Bilangan: #include<iostream> using namespace std; int main() { long desimal, pembagi=1073741824, bit; cout<<"Nilai Desimal : "; cin>>desimal; cout<<"Hexadesimal = "<<hex<<desimal<<endl; cout<<"Oktal = "<<oct<<desimal<<endl; ...
Post a Comment
Baca Lebih »