Tutorial Belajar Jquery Dasar Untuk Pemula Part 2

Selamat Malam sobat, pada hari Rabu ini saya akan berbagi informasi tentang belajar jquery dasar untuk pemula

Apa itu JQUERY ?

jQuery adalah library JavaScript yang populer digunakan untuk meningkatkan interaksi dan efek-efek visual pada sebuah halaman web. Dengan menggunakan jQuery, Anda dapat dengan mudah menambahkan fitur-fitur menarik pada halaman web Anda, seperti animasi, event handling, dan Ajax.

Untuk memulai belajar jQuery, Anda perlu memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript. Setelah itu, Anda dapat mengikuti langkah-langkah berikut ini:

1. Download dan pasang jQuery di halaman web Anda. Anda dapat mengunduh file jQuery dari situs resmi jQuery atau menggunakan jQuery yang disediakan oleh CDN (Content Delivery Network) seperti Google.

2. Tambahkan kode jQuery ke halaman web Anda. Anda dapat menambahkan kode jQuery di dalam tag <script> di bagian head atau di bagian akhir halaman sebelum tag </body>.

3. Mulai menulis kode jQuery. Anda dapat menulis kode jQuery di dalam tag <script> atau membuat file terpisah yang bernama misalnya "myscript.js" dan menambahkannya ke halaman web menggunakan tag <script> seperti biasa.

4. Jalankan kode jQuery. Anda dapat menjalankan kode jQuery dengan menggunakan method $() atau jQuery(). Method ini akan menjadi titik awal dari setiap kode jQuery yang Anda tulis.

Pengertian Selector Jquery

Contoh sederhana menggunakan jQuery adalah sebagai berikut:

$(document).ready(function() {
  $("button").click(function() {
    $("p").hide();
  });
});

Kode di atas menggunakan method $(document).ready() untuk menjamin bahwa seluruh elemen pada halaman telah dimuat sebelum menjalankan kode jQuery. Method $("button").click() akan menjalankan kode di dalamnya ketika tombol diklik. Di dalamnya, method $("p").hide() akan menyembunyikan elemen <p> pada halaman.

Mengganti background Color dengan jquery

$(document).ready(function() {
  $("#button").mouseover(function() {
   $(".test").css("background-color", "yellow");
  });
});

pada kode di atas id yang bernama button di mouse over, itu artinya cursor sedang berada di atas cursor lalu lakukan action pada class test dan ubah css yaitu properti background color ganti dengan warna kuning.

Cara Menginstall Jquery

Pertama kaliankunjungi website http://jquery.com/download/. untuk mendownload file jquery

kemudian klik pilihan download the compressed, production jQuery 1.11.1, lalu copy semua code javascript lalu paste ke file baru dan save menjadi jquery.js.

Lalu panggil file jquery dan letakkan pada bagian tag had di file html kalian.

<script type="text/javascript" src="jquery.js"></script>

Menggunakan CDN

Cara yang kedua kalian bisa mendownload jQuery yang telah disiapkan oleh google atau Microsoft yaitu jQuery CDN.

Cara pakainya cukup mudah hanya dengan pilih salah satu kode dibawah ini lalu copy kode tersebut dan masukkan ke dalam tag head di file kalian.

Cdn dari google

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

Demikian adalah penjelasan dasar tentang jQuery. Selanjutnya, Anda dapat mempelajari lebih lanjut tentang fitur-fitur yang ditawarkan oleh jQuery, seperti manipulasi elemen, animasi, dan event handling. Semoga bermanfaat.