Web dengan Jquery Bag. 1

Untuk memulainya, kita memerlukan file library jQuery, yang bisa kita dapatkan dari halaman download pada website resmihttp://www.jquery.com. The Starterkit jQuery menyediakan beberapa markup dan CSS untuk bekerja dengan. Setelah men-download dan mengekstrak isinya kita masukkan jquery.js ke dalam direktori yang kita inginkan.Sekarang kita bisa memulai dengan contoh yang sederhana, yaitu menampilkan text “Hello N2haq”. Kita mulai dengan halaman html kosong. Lakukan editing dengan editor kesayangan anda.

 <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
   // we will add our javascript code here
 </script>
 </head>
 <body>
   <!-- we will add our HTML content here -->
 </body>
 </html>

Halaman ini hanya memuat library jquery.js (pastikan titik URL ke tempat Anda menyimpan salinan jquery! Contoh ini mengasumsikan bahwa anda menyimpannya dalam direktori yang sama dengan file ini). Dua komentar menunjukkan di mana kita akan memperluas template dengan kode.

Karena hampir segala sesuatu yang kita lakukan ketika menggunakan jQuery membaca atau memanipulasi document object model (DOM), maka  kita perlu memastikan bahwa selalu memulai dengan menggunakan fungsi ready.

Untuk melakukan ini, kita wajib menambahkan event ready pada setiap dokumen.

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello N2haq!");
   });
 });

Sekarang mari kita membuat sebuah contoh yang agak sulit. Tampilkan sebuah pesan peringatan ketika kita mengklik sebuah link.

Tambahkan baris berikut ke dalam <body>:

 <a href="">Link</a>

Sekarang tambahkan script pada fungsi $(document).ready

 $(document).ready(function() {
   $("a").click(function() {
     alert("Hello N2haq!");
   });
 });

Jika berhasil, maka ini akan menampilkan pesan setelah Anda mengklik pada link. Anda sekarang dapat menyisipkan script ini ke dalam file html Anda. Kemudian, buka file html Anda di browser dan klik link tersebut.  Anda akan melihat jendela pop-up dengan “Halo N2haq!”.

Mari kita bahas satu per satu script yang telah kita buat.

$ (“a”) adalah sebuah seleksi pada  jQuery, dalam hal ini, ia memilih semua elemen link (<a>). $ Itu sendiri adalah alias untuk “class” pada  jQuery, sehingga $ () membangun sebuah objek jQuery baru. Fungsi click () adalah metode dari objek jQuery, menjalankan fungsi yang tersedia saat event dilakukan.

Hal ini mirip dengan kode berikut:

 <a href="" onclick="alert('Hello world')">Link</a>

Perbedaannya cukup jelas, kita tidak perlu menulis onclick di setiap elemen tunggal. JQuery memiliki pemisahan antara struktur HTML dan javascript (JS), sama seperti ketika kita memisahkan script CSS.

Comments

comments