Pendahuluan dan Pengenalan tentang jQuery

Pada artikel ini, kita akan mempelajari jQuery secara bertahap. Untuk memulainya, pertama-tama kalian harus mendownload salinan jQuery terlebih dahulu lalu menyertakannya ke dalam dokumen HTML. Terdapat dua versi jQuery yang tersedia untuk di Download - Compressed (Terkompress) dan Uncompressed (Tidak terkompres).

File jQuery yang tidak terkompres (Uncompressed) paling cocok digunakan dalam pengembangan (Development) atau Debugging; sementara file yang terkompres (Compressed) sangat direkomendasikan dalam produksi (Production) karena dapat menghemat Bandwith dan dapat meningkatkan kinerja pemuatan halaman website karena ukuran filenya yang relatif kecil.

Kalian dapat mendownload jQuery Disini.

Jika file jQuery sudah didownload, kalian dapat melihat bahwa ekstensi file tersebut adalah .js, karena jQuery hanyalah salah satu dari JavaScript Library, kalian dapat memasukkan file jQuery ke dalam dokumen HTML dengan menggunakan elemen <script> sama halnya seperti memasukkan file JavaScript seperti biasa:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Tutorial jQuery | EL Creative Academy</title>

 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <h1>Selamat Datang</h1>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>


Perhatikan bahwa kita harus menyertakan file jQuery tepat sebelum Script Custom; jika tidak, jQuery API tidak akan tersedia ketika kode Custom kita ingin mengaksesnya.

Tips: Seperti yang kalian lihat pada kode diatas, disini saya telah melewatkan atribut type="text/javascript" yang harusnya ada di dalam tag <script> karena atribut tersebut tidak diperlukan pada HTML5. JavaScript adalah bahasa Script Default dalam HTML5 dan di semua browser modern. Namun, kalian tetap masih bisa menggunakannya untuk membuat kode agar lebih mudah dipahami bagi pengguna lainnya.


Memasukkan jQuery dari CDN

Kita juga dapat memasukkan jQuery ke dalam dokumen HTML langsung melalui Link CDN (Content Delivery Network) yang tersedia secara gratis.

CDN dapat menawarkan kinerja dengan mengurangi waktu pemuatan karena mereka menyimpan (Hosting) file jQuery pada beberapa server yang tersebar di seluruh dunia dan ketika pengguna meminta file tersebut, maka CDN akan melayaninya langsung dari server yang paling dekat dengan mereka.

Keuntungan lain dalam menggunakan CDN adalah jika terdapat pengunjung yang masuk ke suatu halaman Web dan telah mendownload salinan file jQuery dari CDN yang sama saat mengunjungi Website lain, maka mereka tidak harus mendownloadnya secara berulang karena sudah ada di dalam Cache browser.

jQuery CDN

MaxCDN

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>


CDNJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


Google Hosted

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


Microsoft CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>


Membuat Halaman Web dengan jQuery

Sejauh ini, kita telah memahami tujuan dari Library jQuery serta cara memasukkannya ke dalam dokumen HTML, sekarang adalah saatnya untuk menggunakannya secara nyata.

Di bagian ini, kita akan melakukan operasi jQuery yang sederhana yaitu mengubah warna Heading dari warna hitam (default) menjadi berwarna merah:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Tutorial jQuery | EL Creative Academy</title>

 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <h1>Selamat Datang</h1>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
   $("h1").css("color", "red");
  })
 </script>
</body>
</html>


Lihat kode di Github | Lihat Live Demo

Pada contoh kode di atas, kita telah melakukan operasi jQuery yang sangat sederhana dengan mengubah warna Header yaitu elemen <h1> menggunakan metode pemilih elemen (Element Selector) dan css(). Kita akan belajar tentang Selector, Event, dan Method dari jQuery pada bagian selanjutnya.

0 Komentar