Latihan 4 jQuery

Apa itu jQuery ? jQuery adalah sebuah library framework dari javascript.

 

Hampir semua developer dunia sekarang sudah aktif menggunakan jquery sebagai pengganti javascript. artinya developer tidak perlu lagi mengetikkan syntax javascript yang terbilang cukup panjang-panjang untuk sebuah event.

 

Oleh karena itu banyak yang sudah aktif menggunakan jquery karena jquery juga merupakan pengembangan dari javascript.

 

kelebihan dari jquery yang saya rasakan sendiri. dan mungkin akan bertambah lagi bagi anda sendiri setelah mempelajari dan menggunakan framework jquery.

 

adapun beberapa kelebihan dari jQuery adalah :

 

  • Lebih mudah di mengerti.
  • Lebih mudah di gunakan.
  • Ringan.
  • Penulisan syntax yang lebih pendek tetapi sudah memiliki kebergunaan yang besar.
  • Free.
  • Bisa di kembangkan untuk membuat plugin-plugin web lain. Jquery ada 2 versi  yang bisa di di download:

Ø  Production version : Pada jQuery versi produksi, digunakan pada halaman website kalian, jQuery ini juga sudah dikompersi dan diminified sedemikian rupa sehingga kita mudah untuk menggunakanya.

Ø  Development version : jQuery Development Version ini digunakan untuk pengujian

dan pengembangan.

 

Kedua versi tersebut kalian dapat mendownloadnya di  http://jquery.com/download/.

selanjutnya kalian bisa membuat tag <script> didalam tag <head>, dan panggil file jQuery yang

tadi sudah kita download seperti syntax dibawah ini :

 

<script type=”text/javascript” src=”lokasi file jquery anda”></script>

 

Cara menggunakan jquery yang kedua kalian bisa mendownload jQuery yang telah disiapkan oleh google atau Microsoft yaitu jQuery CDN. Cara menggunakannya kalian bisa pilih salah satu kode dibawah ini dan copykan kode tersebut didalam tag <head> :

 

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js“></script>

 

Latihan jQuery (selector dan Event)

 

Buat file dengan nama jquery_click.php

<html>
<head>
<script type=”text/javascript” src=”js/jquery-3.1.1.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<!—di klik di kalimat nanti, cukup sekali klik –>
<p> kalau di klik lagi ,.ga ada kata lagi dech</p>
<p>klik lagi …</p>
<p>coba click saya</p>
</body>
</html>

 

Jquery_dblclick.php

<html>
<head>
<!– coba perhatikan, disini saya menarik jquery secara online –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<!—di klik di kalimat nanti, dua kali klik –>
<p> kalau di klik lagi dua kali,.ga ada kata lagi dech</p>
<p>klik lagi dua kali…</p>
<p>coba click saya dua kali</p>
</body>
</html>

 

Jquery_massage.php

<html>
<head>
<script type=”text/javascript” src=”js/jquery-3.1.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#arahkan”).mouseenter(function(){
alert(“ini adalah jquery massage”);
});
});
</script>
</head>
<body>
<p id=”arahkan”>coba arahkan cursor kesini …</p>
</body>
</html>

 

Jquery_2_massage.php

<html>
<head>
<script type=”text/javascript” src=”js/jquery-3.1.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#pesan”).hover(function(){
alert(“ini pesan pertama”);
};
// disini kita membuat fungsi pesan, dimana setelah kita mengclick pesan maka akan muncul pesan kedua
function(){
alert(“ini pesan kedua”);
});
});
</script>
</head>
<body>
<p id=”pesan”>coba arahkan cursor kesini.</p>
</body>
</html>

 

Jquery_input.php

<html>
<head>
<script type=”text/javascript” src=”js/jquery-3.1.1.min.js”></script>
<script>
$(document).ready(function(){
$(“input”).focus(function(){
// membuat warna merah pad input text apabila kita memfocuskan
$(this).css(“background-color”, “red”);
});
// membuat warna hijau apbila kita mengarahkan ke input text yang lainnya
$(“input”).blur(function(){
$(this).css(“background-color”, “green”);
});
});
</script>
</head>
<body>
Nama: <input type=”text” name=”nama”><br>
password: <input type=”text” name=”password”>
</body>
</html>

 

Jquery_warna_kalimat.php

<html>
<head>
<script type=”text/javascript” src=”js/jquery-3.1.1.min.js”></script>
<script>
$(document).ready(function(){
$(“p”).on({
// kalau cursor diarahkan ke kalimat akan berwarna biru mouseenter: function(){
$(this).css(“background-color”, “blue”);
},
// kalau cursor dipindahkan dari kalimat akan berwarna hijau mouseleave: function(){
$(this).css(“background-color”, “green”);
},
// kalau cursor di click di kalimat akan berwarna kuning click: function(){
$(this).css(“background-color”, “yellow”);
}
});
});
</script>
</head>
<body>
<p>kita akan belajar jquery dengan warna,….</p>
</body>
</html>

sumber : Afri Yuda, S.Kom

Cara Daftar Google Adsense Indonesia Agar Cepat Diterima

Google Adsense adalah salah satu program PPC (Pay Per Click) yang paling banyak digemari oleh ...

Learn more
Share This:Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *