JQuery Tutorial #1

JQuery Tutorial #1

Apa itu jQuery?
jQuery adalah pustaka JavaScript yang cepat, kecil, dan kaya fitur.
Itu membuat hal-hal seperti traversal dan manipulasi dokumen HTML, penanganan acara, dan animasi menjadi lebih mudah.
Semua kekuatan jQuery diakses melalui JavaScript, jadi memiliki pemahaman yang kuat tentang JavaScript sangat penting untuk memahami, menyusun, dan men-debug kode Sobat Tekno nih.

Pertama, mari kita lihat contoh manipulasi HTML dengan JavaScript.
Untuk mendapatkan elemen dengan id = "start" dan mengubah html menjadi "Go" kita perlu melakukan hal berikut:
var el = document.getElementById("start");
el.innerHTML = "Go";


Untuk melakukan manipulasi yang sama dengan jQuery, kita hanya perlu satu baris kode:
$("#start").html("Go");

Mulai

Sobat Tekno dapat mengunduh salinan perpustakaan jQuery dari www.jquery.com, atau, sebagai alternatif, Sobat Tekno dapat memasukkannya dari CDN (Content Delivery Network), seperti Google atau Microsoft.
Saya akan menggunakan CDN dari situs web jQuery resmi.
Untuk mulai menggunakan jQuery, pertama-tama kita harus menambahkannya ke kepala dokumen HTML menggunakan tag skrip:
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
    </body>
</html>

Ini adalah praktik yang baik untuk menunggu dokumen HTML dimuat sepenuhnya dan siap sebelum bekerja dengannya.
Untuk itu saya menggunakan acara siap dari objek dokumen:
$(document).ready(function() {
   // jQuery code ada disini
});

"$" Digunakan untuk mengakses jQuery. Dari sini, kode mengakses objek dokumen dan menentukan fungsi yang akan dipanggil ketika acara siap dokumen dipecat.
Ini mencegah kode jQuery dari menjalankan sebelum dokumen selesai memuat.
Karena kode di atas digunakan di hampir semua kasus ketika menggunakan jQuery, ada jalan pintas yang berguna untuk menulisnya:
$(function() {
// jQuery code ada disini
});

Sekarang, dengan memiliki pustaka jQuery di bagian kepala saya dan telah menentukan acara siap dokumen, kita dapat memulai manipulasi jQuery pertama kami! Mari kita ubah konten elemen div.

HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  </head>
  <body>
    <div id="start">Start</div>
  </body>
</html>
The Javascript:
$(function() {
$("#start").html("Go!");
});

Syntax
jQuery digunakan untuk memilih (meminta) elemen HTML dan melakukan "aksi" padanya.

Sintaks dasarnya adalah: $ ("selector"). Action ()
  - $ mengakses jQuery.
  - (pemilih) menemukan elemen HTML.
  - Tindakan () kemudian dilakukan pada elemen.
Untuk contoh :
$ ("p"). hide () // menyembunyikan semua elemen <p>
$ (". demo"). sembunyikan () // sembunyikan semua elemen dengan class = "demo"
$ ("# demo"). hide () // menyembunyikan elemen dengan id = "demo"

Melihat kembali kode dari contoh sebelumnya:
$ ("# start"). html ("Go!");


Penyeleksi

Mari kita lihat semua penyeleksi jQuery.
Seperti yang Sobat lihat dalam pelajaran sebelumnya, pemilih jQuery mulai dengan tanda dolar dan tanda kurung: $ ().
Pemilih paling dasar adalah pemilih elemen, yang memilih semua elemen berdasarkan nama elemen.
$ ("div") // memilih semua elemen <div>

Berikutnya adalah pemilih id dan kelas, yang memilih elemen dengan id dan nama kelas mereka:
$ ("# test") // pilih elemen dengan id = "test"
$ (". menu") // memilih semua elemen dengan class = "menu"

Sobat juga dapat menggunakan sintaks berikut untuk penyeleksi:
$ ("div.menu") // semua elemen <div> dengan class = "menu"

$ ("p: first") // elemen <p> pertama

$ ("h1, p") // semua elemen <h1> dan semua <p>

$ ("div p") // semua elemen <p> yang merupakan turunan dari elemen <div>

$ ("*") // semua elemen DOM

Selektor yang Berguna


Oke, demikian lah artikel tutorial jQuery hari ini. Oh ya ini kan baru yang "#1" nih Sobat Tekno. Nah Saya akan membuatnya sampai "#6". Yah sudah saya perkirakan dan di akhir pembahasan setelah "#6" Akan saya selipkan sejarah JQuery.
Gimana belajarnya tadi Sobat Tekno ribet ya? Maaf tapi memang begitulah JQuery. Sobat Tekno dapat menerapkan dalam hati bahwa "BELAJAR BAHASA PEMOGRAMAN ITU MENYENANGKAN" (PROGRAM LANGUAGE IS FUN). Yah sampai jumpa di Next artikel Sobat Tekno!


Salam Tekno~ Bahasa Pemograman JQuery Tutorial

Dapatkan Tips Menarik Setiap Harinya!

  • Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
  • Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi dan game.

2 Responses to "JQuery Tutorial #1"

  1. Terima kasih ilmunya mas. Ijin belajar jquery sapa tau bisa berguna buat masa depan.

    ReplyDelete
    Replies
    1. Sama sama mas. Monggo, Selamat belajar mas.

      Delete
Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel