Inilah Pengertian, Fungsi, dan Modul Tutorial jQuery (+ Video Tutorial)

byInzaghi's Blog Admin -
0

Assalamu‘alaikum wr. wb.

Hello guys! Jika kita menggunakan JavaScript, tentunya sudah tidak asing lagi yang namanya jQuery, yang merupakan salah satu Library JavaScript paling populer untuk Pengembangan Aplikasi Web dan pembuatan Website. Dengan menggunakan jQuery, akan memudahkan kita untuk membuat Kode Program daripada JavaScript Murni (Plain JavaScript).

Pengertian, Fungsi, dan Modul Tutorial jQuery

Sumber : Duniailkom.com, Tutorialsteacher.com, Geeksforgeeks.org, dan W3schools.com


TENTANG JQUERY

Sumber : Biznetgio.com [Klik di sini jika Tidak bisa mengakses Situs ini.] dan Glints.com

Bagi yang berkecimpung dalam dunia pemrograman khususnya JavaScript, pastinya sudah tidak lagi asing dengan istilah jQuery. jQuery merupakan framework atau sebuah library JavaScript populer yang dapat mempercepat dan mempermudah developer dalam membuat aplikasi atau website.

Istilah jQuery pun terbilang cukup populer dan banyak digunakan oleh para developer. Sebab, developer seringkali kesulitan dalam menggunakan JavaScript karena sintaksnya terlalu rumit. Hadirnya jQuery dapat membuat proses coding menjadi lebih efisien dan cepat.

A. Pengertian dan Sejarah jQuery

jQuery adalah suatu perpustakaan (library) JavaScript. Dalam lingkup pemrograman, library merupakan kumpulan fungsi yang telah disiapkan agar proses pembuatan aplikasi menjadi lebih mudah. Oleh karena itu, jQuery dapat dianggap sebagai himpunan fungsi-fungsi JavaScript yang mempermudah penulisan kode JavaScript.

Perannya dalam pemrograman adalah sebagai library JavaScript yang membantu pengembang dalam mengatur interaksi antara JavaScript dan HTML atau situs web yang beroperasi di sisi klien. Selain itu, jQuery juga berperan dalam penyederhanaan penulisan kode, membuatnya lebih ringkas dan jelas.

Kelebihan lainnya adalah jQuery menyediakan antarmuka yang konsisten dan dapat berfungsi pada berbagai jenis peramban, sehingga mampu menangani ketidaksesuaian antar peramban. Terakhir, jQuery mempermudah pencarian, pemilihan, dan manipulasi elemen-elemen Model Objek Dokumen (DOM) dalam JavaScript.

Diciptakan pertama kali oleh John Resig pada Tahun 2006, jQuery telah berkembang menjadi proyek sumber terbuka (opensource) dan menjadi perpustakaan JavaScript yang paling terkenal di dunia. Situs resmi jQuery dapat diakses di Jquery.com.

B. Fungsi jQuery

jQuery adalah sebuah perpustakaan JavaScript yang dibuat untuk menyederhanakan pengembangan aplikasi web dan membuatnya lebih mudah digunakan. Fungsi utama dari jQuery adalah sebagai berikut :

1. Manipulasi DOM (Document Object Model)

jQuery menyediakan metode dan fungsi yang memungkinkan pengembang web untuk dengan mudah mengakses, memodifikasi, dan memanipulasi elemen-elemen dalam DOM. Ini memungkinkan perubahan dinamis pada halaman web, seperti menambah, menghapus, atau mengubah konten dan tampilan halaman.

2. Penanganan Peristiwa

jQuery memudahkan penanganan peristiwa (event handling) pada elemen-elemen HTML. Anda dapat dengan mudah menambahkan penggerak ke elemen, seperti klik tombol, hover, atau pengisian formulir, dan mengaitkan tindakan tertentu dengan peristiwa tersebut.

3. Animasi

jQuery memfasilitasi pembuatan animasi dan efek visual di halaman web. Anda dapat dengan mudah menganimasikan perubahan properti seperti ukuran, warna, dan posisi elemen HTML, serta mengendalikan kecepatan dan durasi animasi.

4. Komunikasi AJAX

jQuery menyederhanakan komunikasi asinkron dengan server menggunakan teknik AJAX (Asynchronous JavaScript and XML). Ini memungkinkan pengembang untuk mengambil atau mengirim data dari atau ke server tanpa harus me-refresh seluruh halaman, sehingga meningkatkan responsivitas dan pengalaman pengguna.

5. Penanganan HTML dan CSS

jQuery memungkinkan manipulasi elemen-elemen HTML dan properti CSS dengan mudah. Anda dapat dengan cepat mengubah konten, mengganti kelas, mengatur properti CSS, dan banyak lagi.

6. Pembuatan Plugin

jQuery memungkinkan pengembang untuk membuat plugin sendiri yang dapat digunakan di berbagai proyek. Ini memudahkan pengembangan berkelanjutan dan perluasan fungsionalitas.

7. Cross-browser Compatibility

jQuery dirancang untuk mengatasi perbedaan dalam perilaku JavaScript di berbagai browser. Dengan menggunakan jQuery, pengembang dapat memastikan bahwa aplikasi web mereka berfungsi dengan baik di berbagai jenis browser.

8. Peringatan Kesalahan

jQuery menyediakan mekanisme untuk menangani peringatan dan kesalahan dalam kode JavaScript, sehingga memudahkan pengembang dalam mencari dan memperbaiki masalah.

C. Kelebihan dan Kekurangan jQuery

jQuery memiliki sejumlah kelebihan dan kekurangan, dan perlu dipertimbangkan mana yang sesuai dengan proyek pengembangan web Anda.

Inilah beberapa Kelebihan jQuery :

Sederhana dan Mudah Dipelajari : jQuery dirancang untuk menyederhanakan tugas-tugas yang sering digunakan dalam pengembangan web. Ini membuatnya mudah dipelajari bahkan bagi pemula dalam pemrograman web.

  1. Manipulasi DOM yang Mudah : jQuery mempermudah pengembang dalam mengakses, memanipulasi, dan memanipulasi elemen-elemen dalam DOM. Anda dapat dengan mudah menambahkan, mengubah, atau menghapus elemen-elemen HTML.
  2. Cross-browser Compatibility : jQuery menangani perbedaan dalam perilaku JavaScript di berbagai browser, sehingga Anda tidak perlu khawatir tentang masalah kompatibilitas lintas browser.
  3. Plugin Ecosystem : jQuery memiliki ekosistem plugin yang kaya. Anda dapat menemukan berbagai plugin yang dibuat oleh komunitas untuk menambahkan fungsionalitas tambahan ke situs web Anda.
  4. Event Handling yang Mudah : Penanganan peristiwa (event handling) dengan jQuery sangat mudah dipahami dan diimplementasikan. Anda dapat dengan cepat mengaitkan tindakan dengan peristiwa seperti klik tombol atau pengisian formulir.
  5. Pustaka Populer : Karena popularitasnya, jQuery memiliki sumber daya online yang luas, termasuk tutorial, dokumentasi, dan forum dukungan. Ini memudahkan pengembang dalam mengatasi masalah dan belajar lebih lanjut tentang cara menggunakan jQuery.

Dan inilah beberapa Kekurangan jQuery :

  1. Berat : Meskipun jQuery telah disederhanakan dibandingkan dengan JavaScript murni, perpustakaan ini tetap memiliki ukuran yang cukup besar. Ini dapat memperlambat waktu pemuatan halaman web jika digunakan tanpa perencanaan yang baik.
  2. Penurunan Popularitas : Dengan munculnya kerangka kerja JavaScript modern seperti React, Angular, dan Vue.js, penggunaan jQuery dalam pengembangan aplikasi web canggih semakin berkurang. Para pengembang sering beralih ke kerangka kerja yang lebih kuat dan fleksibel.
  3. Kinerja Terbatas : Dalam beberapa kasus, jQuery mungkin tidak seefisien atau tidak secepat pemrograman JavaScript murni, terutama dalam hal animasi atau manipulasi yang intensif.
  4. Overhead untuk Fitur Tertentu : Terkadang, jQuery mungkin terlalu berlebihan untuk proyek sederhana atau ketika Anda hanya memerlukan beberapa fitur kecil. Ini bisa menambah overhead dan kompleksitas yang tidak perlu.
  5. Perawatan dan Kedaluwarsa : Seiring berjalannya waktu, jQuery perlu diperbarui dan dikelola agar tetap relevan. Ketergantungan pada versi lama atau plugin yang sudah tidak terawat dapat mengakibatkan masalah keamanan atau kinerja.

D. Jenis-jenis Plugin jQuery

jQuery berperan dalam menyederhanakan fungsi-fungsi individu dan dapat diperluas melalui pembuatan plugin. Plugin, pada dasarnya, merupakan kumpulan kode Javascript yang menggunakan pustaka jQuery untuk menggabungkan fungsi-fungsi individu, menciptakan fitur dan alat-alat untuk situs web.

Pengguna jQuery dapat membuat plugin berdasarkan kode yang ada dalam pustaka jQuery dan membagikannya secara daring untuk digunakan oleh publik. Meskipun plugin dapat ditemukan di berbagai sumber, plugin yang terdapat dalam repositori resmi jQuery UI dianggap lebih aman dan memiliki kualitas yang terjamin.

Repositori ini dijaga oleh komunitas profesional jQuery, memastikan bahwa plugin-plugin yang ada telah melalui kurasi yang ketat. Berikut adalah beberapa contoh plugin jQuery yang banyak digunakan dan populer.

1. Effect

Effect adalah suatu plugin jQuery yang simpel, memungkinkan pengguna untuk menerapkan berbagai efek animasi pada elemen-elemen di halaman situs. Dengan menekan tombol yang telah ditetapkan untuk efek tertentu, elemen halaman akan menampilkan perilaku yang berbeda, seperti terpental, menghilang dalam pola lipat, geser, fade out, dan lainnya.

2. TaggingJS

TaggingJS, sebuah skrip jQuery yang berasal dari JavaScript Library, memungkinkan penambahan sistem pemberian tag pada situs. Dengan menggunakan skrip ini, kamu dapat menambahkan topik atau subjek yang relevan ke dalam konten, meningkatkan kemampuan indeks dan peringkat konten dalam mesin pencari seperti Google.

3. Autocomplete

Plugin jQuery Autocomplete memberikan fitur yang mirip dengan fitur autocomplete yang ada di Google. Fitur ini memberikan saran pelengkapan otomatis untuk istilah pemrograman, meningkatkan pengalaman pengguna dengan memberikan opsi yang relevan selama pengetikan.


TUTORIAL DASAR MENGGUNAKAN JQUERY

Sumber : Malasngoding.com dan Educba.com

Ada 2 (Dua) cara untuk memulai penggunaan jQuery. Pertama, bisa melakukan Instalasi melalui Package Manager. Kedua, juga hanya bisa menyertakan Link CDN untuk JavaScript pada HTML.

A. Cara Online (Menghubungkan ke HTML)

1. Install via Package Manager (Mengetik Baris Perintah)

Sama seperti Bootstrap, jQuery juga mempunyai cara yang sama, yaitu dengan mengetik Baris Perintah. Salah satunya adalah dengan menggunakan NPM, dan ketiklah Perintah berikut ini :

npm install jquery

Maka hasilnya :

Anda juga bisa menginstal jQuery dengan cara lainnya, misalnya dengan menggunakan Yarn dan Bower.

Install jQuery dengan Yarn :

yarn add jquery

Install jQuery dengan Bower :

bower install jquery

Paket jQuery Bower berisi file tambahan selain distribusi default. Dalam kebanyakan kasus, Anda dapat mengabaikan file-file ini, namun jika Anda ingin mengunduh sendiri rilis defaultnya, Anda dapat menggunakan Bower untuk menginstal jQuery dari salah satu url di atas, bukan dari paket yang terdaftar. Misalnya, jika Anda ingin menginstal file jQuery terkompresi saja, Anda dapat menginstal file tersebut saja dengan perintah berikut ini :

bower install https://code.jquery.com/jquery-3.7.1.min.js

Untuk selengkapnya mengenai Cara Download dan Instalasi jQuery, silakan lihat di sini (Jquery.com).

2. Menyalin Kode Sumber JavaScript CDN

Anda juga dapat menggunakan jQuery CDN jika Anda tidak ingin mengunduh dan meng-host file jQuery sendiri dan ingin menggunakan CDN. Baik Microsoft dan Google meng-Hosting jQuery.

Microsoft CDN :

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

Google CDN :

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

Selain dari Microsoft dan Google, juga ada Content Delivery Network (CDN) lainnya untuk jQuery, yaitu CDNJS dan jsDelivr.

CDNJS :

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

jsDelivr CDN :

<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>

Sehingga, bisa menyertakan Library jQuery ke dalam Kode HTML :

<html>
    <head>
    <title>Contoh Penggunaan jQuery</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type = "text/javascript">
        $(document).ready(function() {
        document.write("HI there!");
        });
    </script>
    </head>
<body>
    <h1>Hello there!</h1>
</body>
</html>

Hasil :

B. Cara Offline (Menginstal/Download jQuery)

Untuk Anda yang jarang tersambung dengan koneksi internet cara ini sangat efektif karena Anda hanya perlu men-download file jQuery-nya dan menyimpan file jQuery-nya pada project kerja Anda, kemudian hanya tinggal menghubungkannya. Cara untuk menggunakan jQuery sangatlah mudah. sama seperti cara menghubungkan file JS dengan HTML atau PHP.

1. Download File jQuery

Tahap awal yang harus di lakukan adalah Anda harus men-Download file library jQuery-nya di Situs Resmi jQuery.

Kemudian, pilihilah salah satu Opsi untuk Download jQuery.

2. Meletakan File jQuery

Kode jQuery yang diminifikasi (Dikompres)

Kode jQuery yang Tidak dimkompres (Kode Utuh)

Jika kita klik pada "Download Compressed/Uncompressed, maka akan muncul File JavaScript dari jQuery yang di-Hosting melalui CDN seperti pada Gambar di atas.

Caranya, Salin dari salah satu Kode jQuery diatas. Kemudian, Simpanlah dengan Nama File (dengan Versi jQuery Terbaru) ke dalam Folder jquery :

jquery/jquery-3.7.1.js

Untuk melakukan Minifikasi (Minify) Kode JavaScript jQuery, Salinlah (Copy) File jquery-3.7.1.js di Situs ini dan di-Download.

Dan inilah Struktur Folder dari Project jQuery pada Project Anda :

📁 nama_project_anda
├── 📁 jquery
   ├── jquery-3.7.1.js
├── 📁 css
├── 📁 js
├── index.html

Atau Anda juga bisa mengunduhnya (Download) File jQuery Versi Terbaru (3.7.1) di sini.

3. Menyalin Kode Sumber JavaScript dalam HTML

Kalian bisa memilih salah satu contoh berikut untuk menginstal jQuery secara online. Anda dapat memasukkannya dari CDN (Content Delivery Network) pada bagian <head> di halaman HTML Anda sama seperti menghubungkan HTML dengan JavaScript.

MaxCDN menyediakan dukungan CDN untuk JavaScript jQuery. Anda juga harus menyertakan jQuery :

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

Sehingga, menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
    <title>Tutorial belajar JQuery Part 1 : Pengertian dan cara menggunakan jquery</title>
    <link rel="stylesheet" type="text/css" href="CSS/style.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="../jquery/jquery-3.7.1.js"></script>
</head>
<body>
 
</body>
</html>


DASAR-DASAR JQUERY

Sumber : Duniailkom.com, Tutorialspoint.com, dan Teachmesoft.com

Hampir semua situs-situs besar menggunakan jQuery untuk memudahkan proses penulisan kode JavaScript, termasuk situs Inzaghi's Sites yang dibangun dengan WordPress (secara default, WordPress juga menggunakan jQuery).

Query adalah sebuah library JavaScript. Dalam dunia Pemrograman, Library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi.

A. Dasar-dasar pada jQuery

Sumber : Tutorialspoint.com

Sebelum kita mulai belajar tentang Syntax jQuery, mari kita lihat secara singkat konsep dasar JavaScript. Hal ini karena jQuery adalah sebuah kerangka kerja yang dibangun menggunakan kemampuan JavaScript. Jadi, saat bekerja dengan jQuery, Anda dapat menggunakan semua fungsi dan kemampuan lain yang tersedia di JavaScript. Jadi mari kita lihat dengan cepat pada konsep-konsep paling dasar tetapi paling sering digunakan dalam jQuery.

1. String

Sebuah string dalam JavaScript (jQuery) adalah objek yang tidak dapat diubah yang berisi tidak ada, satu, atau banyak karakter. Berikut adalah contoh-contoh valid dari String JavaScript :

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

2. Numbers

Angka dalam JavaScript adalah nilai format IEEE 754 berbasis presisi ganda 64-bit. Mereka tidak dapat diubah, sama seperti string. Berikut adalah contoh-contoh valid dari Numbers JavaScript :

5350
120.27
0.26

3. Boolean

Sebuah boolean dalam JavaScript (jQuery) dapat berupa true atau false. Jika suatu angka adalah nol, itu defaultnya menjadi false. Jika string kosong, defaultnya menjadi false. Berikut adalah contoh-contoh valid dari Boolean JavaScript:

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

4. Objek

JavaScript (jQuery) mendukung konsep Objek dengan sangat baik. Anda dapat membuat objek menggunakan objek literal seperti berikut :

var emp = {
   name: "Zara",
   age: 10
};

Anda dapat menulis dan membaca properti objek menggunakan notasi titik sebagai berikut :

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

5. Array

Anda dapat mendefinisikan array menggunakan array literal seperti berikut :

var x = [];
var y = [1, 2, 3, 4, 5];

Sebuah array memiliki properti panjang yang berguna untuk iterasi :

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

6. Fungsi

Sebuah fungsi dalam JavaScript (jQuery) dapat menjadi bernama atau tanpa nama. Sebuah fungsi bernama dapat didefinisikan menggunakan kata kunci function seperti berikut :

function named(){
   // do some stuff here
}

Sebuah fungsi tanpa nama dapat didefinisikan dengan cara yang sama seperti fungsi normal tetapi tidak memiliki nama.

Sebuah fungsi tanpa nama dapat diberikan nilai ke variabel atau diteruskan ke metode seperti yang ditunjukkan di bawah.

var handler = function (){
   // do some stuff here
}

jQuery sering menggunakan fungsi tanpa nama seperti berikut :

$(document).ready(function(){
   // do some stuff here
});

7. Argumen

Variabel argumen JavaScript (jQuery) adalah semacam array yang memiliki properti panjang. Contoh berikut menjelaskannya dengan baik.

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Objek argumen juga memiliki properti callee, yang merujuk pada fungsi di dalamnya. Misalnya :

function func() {
   return arguments.callee;
}

func();                // ==> func

8. Context

Kata kunci terkenal this dalam JavaScript (jQuery) selalu merujuk pada konteks saat ini. Dalam suatu fungsi, konteks this dapat berubah, tergantung pada cara fungsi tersebut dipanggil :

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Anda dapat menentukan konteks untuk panggilan fungsi menggunakan metode built-in call() dan apply().

Perbedaan antara keduanya adalah bagaimana mereka meneruskan argumen. Call meneruskan semua argumen sebagai argumen ke fungsi, sementara apply menerima larik sebagai argumen.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

9. Callback

Sebuah callback adalah fungsi JavaScript biasa (jQuery) yang dilewatkan ke beberapa metode sebagai argumen atau opsi. Beberapa callback hanyalah peristiwa, dipanggil untuk memberi pengguna kesempatan untuk bereaksi ketika suatu keadaan tertentu dipicu.

Sistem peristiwa jQuery menggunakan callback seperti ini di mana-mana, sebagai contoh :

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

Sebagian besar callback menyediakan argumen dan konteks. Pada contoh penangan peristiwa, callback dipanggil dengan satu argumen, yaitu Objek Peristiwa.

Beberapa callback diperlukan untuk mengembalikan sesuatu, yang lain membuat nilai pengembalian itu opsional. Untuk mencegah pengiriman formulir, penangan peristiwa pengiriman formulir dapat mengembalikan false seperti berikut:

$("#myform").submit(function() {
   return false;
});

10. Closures

JavaScript (jQuery) closures dibuat setiap kali suatu variabel yang didefinisikan di luar cakupan saat ini diakses dari dalam suatu cakupan dalam.

Contoh berikut menunjukkan bagaimana variabel counter terlihat dalam fungsi create, increment, dan print, tetapi tidak di luar fungsi tersebut :

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
       print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Pola ini memungkinkan Anda membuat objek dengan metode yang beroperasi pada data yang tidak terlihat oleh dunia luar. Harus dicatat bahwa penyembunyian data adalah dasar dari pemrograman berorientasi objek.

11. Pola Proxy

Sebuah proxy adalah objek yang dapat digunakan untuk mengontrol akses ke objek lain. Ini mengimplementasikan antarmuka yang sama dengan objek lain ini dan meneruskan semua pemanggilan metode kepadanya. Objek lain ini sering disebut sebagai subyek nyata.

Sebuah proxy dapat diinstansiasi di tempat subyek nyata ini dan memungkinkan untuk diakses dari jarak jauh. Kami dapat menyimpan metode setArray jQuery dalam penutupan dan menimpanya seperti berikut :

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };

})();

Di atas membungkus kodenya dalam suatu fungsi untuk menyembunyikan variabel yang diproksikan. Proxy kemudian mencatat semua pemanggilan ke metode dan mendelegasikan pemanggilan ke metode asli. Menggunakan apply(this, arguments) menjamin bahwa pemanggil tidak akan dapat melihat perbedaan antara metode asli dan yang diproksikan.


Untuk selengkapnya, silakan tunggu saja Pembahasan tentang Modul Pemrograman JavaScript selanjutnya.

B. Aturan Dasar Penulisan Kode jQuery

Sumber : Duniailkom.com

Berikut ini adalah beberapa Aturan Dasar Penulisan Kode dalam jQuery.

1. Pengertian jQuery Object ($)

Sepanjang penggunaan jQuery, hampir selalu didahului tanda $. Tanda dollar '$' (dollar sign) adalah sebuah shortcut untuk mengakses jQuery Object. Di dalam jQuery Object inilah seluruh fungsi-fungsi jQuery berada. Sebagai contoh, untuk mencari element HTML yang memiliki atribut id="tombol", kita bisa menulis :

$("#tombol")

Jika karena sesuatu hal kita tidak bisa menggunakan tanda $ (biasanya karena bentrok dengan library lain), bisa menggunakan jQuery(), seperti berikut :

jQuery("#tombol")

2. Pengertian jQuery Action dan Event

Untuk bisa melakukan 'sesuatu' terhadap element HTML, kita tinggal menyambung penulisan jQuery Object dengan jQuery Action, atau dikenal juga dengan jQuery Event.

Format dasarnya adalah sebagai berikut :

$(selector).action()

Selector digunakan untuk mencari element mana dari HTML yang akan dimanipulasi. Bisa berupa sebuah paragraf <p>, sebuah gambar <img>, atau sesuatu yang lebih kompleks, seperti element <tr> pertama dari tabel kedua. Kita akan membahas jenis-jenis selector jQuery dalam tutorial selanjutnya.

Action adalah sesuatu yang bisa kita lakukan dengan element HTML tersebut, apakah menyembunyikannya, menampilkannya, mengubah warna, menambahkan element baru, dll. Action mirip seperti Event dalam JavaScript, tetapi dengan penambahan berbagai fitur lain. Di dalam jQuery, sebuah action bisa disambung dengan action lain, atau dikenal dengan isitilah chaining.

Berikut contoh penulisan jQuery Object, selector dan action :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Belajar jQuery Bersama Inzaghi</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        // Simpan nilai asli dari elemen h1
        var originalFontSize = $("h1").css("font-size");
        var originalColor = $("h1").css("color");

        $("#tombol_hide").click(function () {
          $("h1").hide();
        });

        $("#tombol_show").click(function () {
          $("h1").show();
        });

        $("#tombol_small").click(function () {
          $("h1").css("font-size", "20px");
        });

        $("#tombol_red").click(function () {
          $("h1").css("color", "red");
        });

        $("#tombol_reset").click(function () {
          $("h1").css("font-size", originalFontSize);
          $("h1").css("color", originalColor);
        });
      });
    </script>
  </head>
  <body>
    <h1>Belajar jQuery di Inzaghi's Blog</h1>
    <button id="tombol_hide">Sembunyikan</button>
    <button id="tombol_show">Tampilkan</button>
    <button id="tombol_small">Perkecil</button>
    <button id="tombol_red">Merahkan</button>
    <button id="tombol_reset">Ulangi</button>
  </body>
</html>

Hasil Output :

Tampilan diatas masih sangat sederhana, dimana ketika tombol ditekan, akan terjadi "sesuatu" terhadap tag <h1>. Menggunakan jQuery, kita bisa membuat berbagai efek menarik lainnya.

Untuk sementara, anda dapat abaikan apa maksud kode-kode diatas. Disini saya hanya memperlihatkan bagaimana sebuah kode jQuery ditulis, terutama bagian seperti  $("h1").hide(), atau $("h1").css("font-size","20px"). Ini semua adalah cara penulsain gabungan dari jQuery Object, jQuery Selector, dan jQuery Action.


JQUERY MANIPULATION

Sumber : Tutorialsteacher.com, Tutorialspoint.com, dan W3schools.com

Anda telah mempelajari tentang pemilih jQuery pada bagian sebelumnya. Pemilih jQuery menemukan elemen-elemen DOM tertentu dan melingkupinya dengan objek jQuery. Sebagai contoh, document.getElementById() dalam JavaScript akan mengembalikan objek DOM, sedangkan $('#id') akan mengembalikan objek jQuery. Gambar berikut mengilustrasikan perbedaannya.

jQuery menyediakan sejumlah metode untuk memanipulasi DOM secara efisien. Anda tidak perlu menulis kode yang besar dan kompleks untuk mengatur atau mengambil konten dari elemen HTML apa pun.

A. jQuery DOM Manipulation

jQuery menyediakan metode-metode seperti attr(), html(), text(), dan val() yang berfungsi sebagai pengambil dan pengatur untuk memanipulasi konten dari dokumen HTML.

Berikut adalah beberapa operasi dasar yang dapat Anda lakukan pada elemen-elemen DOM dengan bantuan metode-metode standar dari Library jQuery :

  • Ekstrak konten dari sebuah elemen
  • Ubah konten dari sebuah elemen
  • Menambahkan elemen anak di bawah elemen yang sudah ada
  • Menambahkan elemen induk di atas elemen yang sudah ada
  • Menambahkan elemen sebelum atau setelah elemen yang sudah ada
  • Menggantikan elemen yang sudah ada dengan elemen lain
  • Menghapus elemen yang sudah ada
  • Membungkus konten dalam sebuah elemen

1. Get Content

jQuery menyediakan metode html() dan text() untuk mengekstrak konten elemen HTML yang cocok. Berikut adalah Sintaks dari kedua metode ini :

$(selector).html();

$(selector).text();

Metode text() jQuery mengembalikan nilai teks biasa dari konten, sedangkan html() mengembalikan konten dengan tag HTML. Anda perlu menggunakan pemilih jQuery untuk memilih elemen target.

Contoh :

Berikut adalah contoh bagaimana cara mendapatkan konten dengan metode text() dan html() jQuery :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#text").click(function(){
         alert($("p").text());
      });
      $("#html").click(function(){
         alert($("p").html());
      });
   });
</script>
</head>
<body>
   <p>Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b></p>
   
   <button id="text">Get Text</button>
   <button id="html">Get HTML</button>
</body>
</html>

Output :

2. Get Form Fields

Metode val() jQuery digunakan untuk mendapatkan nilai dari bidang formulir apa pun. Berikut adalah sintaks sederhana dari metode ini.

$(selector).val();

Contoh :

Berikut adalah contoh lain untuk menunjukkan bagaimana mendapatkan nilai dari suatu bidang input dengan metode val() jQuery.

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("#b1").click(function(){
         alert($("#name").val());
      });
      $("#b2").click(function(){
         alert($("#class").val());
      });
   });
</script>
</head>
<body>
   <p>Name: <input type="text" id="name" value="Inzaghi Posuma"/></p>
   <p>Class: <input type="text" id="class" value="Class 12th"/></p>
   
   <button id="b1">Get Name</button>
   <button id="b2">Get Class</button>
</body>
</html>

Output :

3. Set Content

Metode html() dan text() jQuery dapat digunakan untuk mengatur konten elemen HTML yang cocok. Berikut adalah sintaks dari kedua metode tersebut ketika digunakan untuk mengatur nilai :

$(selector).html(val, [function]);

$(selector).text(val, [function]);

Di sini, val adalah HTML atau teks yang akan diatur sebagai konten elemen. Kita dapat menyediakan fungsi callback opsional ke metode-metode ini yang akan dipanggil ketika nilai elemen akan diatur.

Metode text() jQuery mengatur nilai teks biasa dari konten, sedangkan metode html() mengatur konten dengan tag HTML.

Contoh :

Berikut adalah contoh yang menunjukkan bagaimana mengatur konten suatu elemen dengan metode text() dan html() jQuery :

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#text").click(function () {
          $("p").text(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
        $("#html").click(function () {
          $("p").html(
            "Lorem ipsum <b>dolor sit amet,</b>  consectetur adipisicing elit, <b>sed do eiusmod tempor.</b>"
          );
        });
      });
    </script>
  </head>
  <body>
    <p>Click on any of the two buttons to see the result</p>

    <button id="text">Set Text</button>
    <button id="html">Set HTML</button>
  </body>
</html>

Output :

4. Set Form Fields

Metode val() jQuery juga digunakan untuk mengatur nilai dari bidang formulir apa pun. Berikut adalah sintaks sederhana dari metode ini ketika digunakan untuk mengatur nilai.

$(selector).val(val);

Di sini, val adalah nilai yang akan diatur untuk bidang input. Kita dapat menyediakan fungsi callback opsional yang akan dipanggil ketika nilai bidang tersebut akan diatur.

Contoh :

Berikut adalah contoh lain yang menunjukkan bagaimana mengatur nilai suatu bidang input dengan metode val() jQuery.

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#b1").click(function () {
          $("#name").val("Inzaghi Posuma");
        });
        $("#b2").click(function () {
          $("#class").val("Class 12th");
        });
      });
    </script>
  </head>
  <body>
    <p>Name: <input type="text" id="name" value="" /></p>
    <p>Class: <input type="text" id="class" value="" /></p>

    <button id="b1">Set Name</button>
    <button id="b2">Set Class</button>
  </body>
</html>

Output :

5. Mengganti Elemen

Metode replaceWith() jQuery dapat digunakan untuk menggantikan elemen DOM lengkap dengan elemen HTML atau DOM lainnya. Berikut adalah sintaks dari metode ini :

$(selector).replaceWith(val);

Di sini, val adalah nilai yang ingin Anda miliki sebagai pengganti elemen asli. Ini bisa berupa HTML atau teks biasa.

Contoh :

Berikut adalah contoh di mana kita akan menggantikan elemen <p> dengan elemen <h1> dan kemudian kita menggantikan elemen <h1> dengan elemen <h2>.

<!DOCTYPE html>
<html>
  <head>
    <title>The jQuery Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function () {
        $("#b1").click(function () {
          $("p").replaceWith("<h1>This is new heading</h1>");
        });
        $("#b2").click(function () {
          $("h1").replaceWith("<h2>This is another heading</h2>");
        });
      });
    </script>
  </head>
  <body>
    <p>Click below button to replace me</p>

    <button id="b1">Replace Paragraph</button>
    <button id="b2">Replace Heading</button>
  </body>
</html>

Output :

B. Menambahkan Elemen dengan jQuery

Sumber : Tutorialspoint.com

jQuery menyediakan berbagai metode untuk menambahkan elemen-elemen DOM baru dalam dokumen HTML yang ada. Anda dapat menambahkan elemen-elemen baru ini di berbagai lokasi (sebelum, setelah salah satu tag yang sudah ada) berdasarkan kebutuhan Anda.

1. Metode jQuery append()

Metode jQuery append() menambahkan konten di akhir setiap elemen yang cocok. Anda juga dapat menambahkan beberapa elemen dalam satu panggilan fungsi.

Berikut adalah sintaks dari metode append() :

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk dimasukkan di akhir setiap elemen dalam kumpulan elemen yang cocok.

Sinopsis :

Pertimbangkan konten HTML berikut :

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Sekarang jika kita menerapkan metode append() sebagai berikut :

$(".inner").append("<p>Inzaghi</p>");

Ini akan menghasilkan hasil sebagai berikut ini :

<div class="container">
   <h2>jQuery append() Method</h2>
   <div class="inner">Hello
   <p>Inzaghi</p>
   </div>
   <div class="inner">Goodbye
   <p>Inzaghi</p>
   </div>
</div>

Inilah Contoh berikut dan verifikasi hasilnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").append("<p>Inzaghi</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery append() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

2. Metode jQuery appendTo()

Metode jQuery appendTo() melakukan tugas yang sama seperti append(). Perbedaan utamanya terletak pada sintaks, khususnya dalam penempatan konten dan target.

Berikut adalah sintaks dari metode appendTo() :

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk dimasukkan di akhir setiap elemen dalam kumpulan elemen yang cocok.

Inilah Contoh berikut dan verifikasi hasilnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Inzaghi</p>").appendTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery appendTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

3. Metode jQuery after()

Metode jQuery after() menambahkan konten setelah setiap elemen yang cocok. Anda juga dapat menyisipkan beberapa elemen dalam satu panggilan fungsi.

Berikut adalah sintaks dari metode after():

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk disisipkan di akhir setiap elemen dalam kumpulan elemen yang cocok.

Pertimbangkan konten HTML berikut :

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Jika kita terapkan metode after() seperti ini :

$(".inner").after("<p>Inzaghi</p>");

Ini akan menghasilkan hasil berikut :

<div class="container">
   <h2>jQuery after() Method</h2>
   <div class="inner">Hello</div>
   <p>Inzaghi</p>
   <div class="inner">Goodbye</div>
   <p>Inzaghi</p>
</div>

Mari coba Contoh berikut dan verifikasi hasilnya.

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").after("<p>Inzaghi</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery after() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

4. Metode jQuery insertAfter()

Metode jQuery insertAfter() menambahkan konten setelah setiap elemen yang cocok. Metode after() dan insertAfter() melakukan tugas yang sama. Perbedaan utamanya ada pada sintaks, khususnya dalam penempatan konten dan target.

Berikut adalah Sintaks dari metode after() :

$(content).insertAfter(selector);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk disisipkan di akhir setiap elemen dalam kumpulan elemen yang cocok.

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Inzaghi</p>").insertAfter(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertAfter() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

5. Metode jQuery prepend()

Metode jQuery prepend() menambahkan konten di awal setiap elemen yang cocok. Anda juga dapat menambahkan beberapa elemen dalam satu panggilan fungsi.

Berikut adalah Sintaks dari metode prepend() :

$(selector).prepend(content, [content]);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk disisipkan di awal setiap elemen dalam kumpulan elemen yang cocok.

Pertimbangkan konten HTML berikut :

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Sekarang jika kita menerapkan metode prepend() sebagai berikut :

$(".inner").prepend("<p>Inzaghi</p>");

Ini akan menghasilkan hasil berikut :

<div class="container">
   <h2>jQuery prepend() Method</h2>
   <div class="inner">
   <p>Inzaghi</p>
   Hello
   </div>
   <div class="inner">
   <p>Inzaghi</p>
   Goodbye
   </div>
</div>

Contohnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").prepend("<p>Inzaghi</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prepend() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

6. Metode jQuery prependTo()

Metode jQuery prependTo() melakukan tugas yang sama seperti prepend(). Perbedaan utamanya terletak pada sintaks, khususnya dalam penempatan konten dan target.

Berikut adalah Sintaks dari metode prependTo() :

$(selector).prepend(content, [content]);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk dimasukkan di awal setiap elemen dalam kumpulan elemen yang cocok.

Contohnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Inzaghi</p>").prependTo(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery prependTo() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output  :

7. Metode jQuery before()

Metode jQuery before() menambahkan konten sebelum setiap elemen yang cocok. Anda juga dapat menyisipkan beberapa elemen dalam satu panggilan fungsi.

Berikut adalah Sintaks dari metode before() :

$(selector).before(content, [content]);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk dimasukkan di awal setiap elemen dalam kumpulan elemen yang cocok.

Pertimbangkan konten HTML berikut :

<div class="container">
   <h2>jQuery before() Method</h2>
   <div class="inner">Hello</div>
   <div class="inner">Goodbye</div>
</div>

Sekarang jika kita menerapkan metode before() sebagai berikut :

$(".inner").before("<p>Inzaghi</p>");

Ini akan menghasilkan hasil berikut :

<div class="container">
   <h2>jQuery before() Method</h2>
   <p>Inzaghi</p>
   <div class="inner">Hello</div>
   <p>Inzaghi</p>
   <div class="inner">Goodbye</div>
</div>

Contohnya :

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $(".inner").before("<p>Inzaghi</p>");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery before() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

8. Metode jQuery insertBefore()

Metode jQuery insertBefore() menambahkan konten sebelum setiap elemen yang cocok. Metode before() dan insertBefore() melakukan tugas yang sama. Perbedaan utamanya terletak pada Sintaks, khususnya dalam penempatan konten dan target.

Berikut adalah Sintaks dari metode insertBefore() :

$(content).insertBefore(selector);

Di sini, parameter konten bisa berupa string HTML, elemen DOM, node teks, array elemen dan node teks, atau objek jQuery untuk dimasukkan di awal setiap elemen dalam kumpulan elemen yang cocok.

Contohnya :    

<!DOCTYPE html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("<p>Inzaghi</p>").insertBefore(".inner");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery insertBefore() Method</h2>
      <div class="inner">Hello</div>
      <div class="inner">Goodbye</div>
   </div>
   <br>
   
   <button>Add Text</button>
</body>
</html>

Hasil Output :

C. Manipulasi CSS dengan jQuery

Sumber : Tutorialsteacher.com dan Tutorialspoint.com

Pustaka jQuery menyertakan berbagai metode untuk memanipulasi properti gaya dan kelas CSS elemen DOM.

Tabel berikut mencantumkan metode jQuery untuk penataan gaya dan manipulasi css.

jQuery Methods
Description
css()
Get or set style properties to the specified element(s).
addClass()
Add one or more class to the specified element(s).
hasClass()
Determine whether any of the specified elements are assigned the given CSS class.
removeClass()
Remove a single class, multiple classes, or all classes from the specified element(s).
toggleClass()
Toggles between adding/removing classes to the specified elements

Gambar berikut menunjukkan bagaimana metode jQuery mengubah gaya dan kelas css elemen DOM.

Mari kita lihat gambaran umum metode jQuery yang penting untuk manipulasi gaya dan css.

1. Metode jQuery css()

Metode jQuery css() mendapatkan atau mengatur properti gaya ke elemen yang ditentukan.

$('selector expression').css('style property name','value');

$('selector expression').css({
                                'style property name':'value',
                            });

Tentukan pemilih untuk mendapatkan referensi elemen yang ingin Anda atur propertinya, kemudian panggil metode css() dengan nama properti gaya dan parameter nilai. Anda juga dapat mengatur beberapa properti gaya dengan melewatkan objek JSON dengan 'nama properti gaya':'nilai'.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {

         $('#myDiv').css('background-color','yellow');
               $('#btnShow').click(function(){
               $('p').css({'font-size':'16px','font-weight':'bold'});

               alert($('#myDiv').css('background-color'));           
            });
        });
    </script>
</head>
<body>
   <h1>jQuery css() Method Demo</h1>
   <button id="btnShow">Show div style</button>
   
   <div id="myDiv">
      <p>
         This is first paragraph.
      </p>
   </div>
   <div>
         <p>This is second paragraph.</p>
      </div>
   <div >
      <p>This is third paragraph.</p>
   </div>
</body>
</html>

Hasil Output :

Pada contoh di atas, kami mengatur latar belakang #myDiv dan gaya font untuk semua elemen <p>. Dengan cara yang sama, kita dapat mendapatkan nilai dari properti gaya apa pun menggunakan metode css() dengan menentukan nama propertinya sebagai parameter pertama.

2. Metode jQuery addClass()

Metode jQuery addClass() menambahkan satu atau beberapa kelas CSS ke elemen yang ditentukan.

$('selector expression').addClass('css class name');

Pertama, tentukan pemilih untuk mendapatkan referensi elemen yang ingin Anda atur propertinya, kemudian panggil metode addClass() dengan satu atau beberapa nama kelas sebagai parameter string. Beberapa nama kelas harus dipisahkan oleh spasi.

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
                  
         $('#btnAddDivClass').click(function(){
            $('#myDiv').addClass('yellowDiv');

         });

                  
         $('#btnAddPClass').click(function(){
            $('p').addClass('impPrg');
         });
         
        });
    </script>
   <style>
    .yellowDiv{
      background-color:yellow;
      margin: 10px 0 0 0;
      height:50px;
    }
    
    .impPrg{
      font-size:16px;
      font-weight:bold;
    }
  </style>
</head>
<body>
   <h1>jQuery addClass() Method Demo</h1>
   <button id="btnAddDivClass">Add div class</button>
   <button id="btnAddPClass">Add p class</button>
   
   <div id="myDiv">
      <p>This is first paragraph.</p>
   </div>
   <div>
      <p>This is second paragraph.</p>
   </div>
   <div >
      <p>This is third paragraph.</p>
   </div>
</body>
</html>

Hasil Output :

Pada contoh di atas, kami mengatur kelas CSS dari setiap elemen <div> (#myDiv) serta beberapa elemen <p> menggunakan metode addClass().

3. Metode jQuery toggleClass()

Metode toggleClass() jQuery berguna untuk beralih antara menambah/menghapus kelas pada elemen-elemen yang ditentukan.

$('selector expression').toggleClass('css class name');

Tentukan sebuah selector untuk mendapatkan referensi dari elemen-elemen yang ingin Anda atur untuk mem-bertukar (toggle) kelas CSS, dan kemudian panggil metode toggleClass() dengan nama kelas CSS sebagai parameter string.

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
                        
            $('#btnToggleDivClass').click(function(){
                $('#myDiv').toggleClass('redDiv');

            });
                
        });
    </script>
    <style>
    .yellowDiv{
        background-color:green;
        margin: 10px 0 0 0;
        height:100px;
        width: 100px;
    }
    .redDiv{
        background-color:red;
        margin: 10px 0 0 0;
        height:100px;
        width: 100px;
    }
  </style>
</head>
<body>
    <h1>jQuery toggleClass() Method Demo</h1>
    <button id="btnToggleDivClass">Toggle div Class</button>
    
    <div id="myDiv" class="yellowDiv" >
    </div>
</body>
</html>

Hasil Output :

4. Metode jQuery removeClass()

jQuery menyediakan metode removeClass() untuk menghapus kelas CSS yang ada dari elemen HTML yang sesuai. Berikut adalah sintaks dari metode removeClass() :

$(selector).removeClass(className);

Metode ini mengambil parameter yang merupakan satu atau lebih kelas yang dipisahkan oleh spasi yang akan dihapus dari atribut kelas setiap elemen yang sesuai. Lebih dari satu kelas dapat dihapus sekaligus, dipisahkan oleh spasi, dari himpunan elemen yang sesuai, seperti berikut :

$(selector).removeClass("Class1 Class2");

Misalkan HTML berikut dengan kelas-kelas CSS yang telah didefinisikan :

<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello big">Hello</div>
   <div class="goodbye small">Goodbye</div>
</div>
</body>

Jika kita menggunakan metode removeClass() seperti berikut :

$(".hello").removeClass("big");
$(".goodbye").removeClass("small");

Ini akan menghasilkan hasil berikut :

<body>
<div class="container">
   <h2>jQuery removeClass() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>
</body>

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
   <script>
      $(document).ready(function() {
         $("button").click(function(){
            $( ".hello" ).removeClass("big" );
            $( ".goodbye" ).removeClass("small" );
         });
      });
   </script>
<style>
   .big{ font-weight: bold; font-size:20px; }
   .small{ font-weight: normal; font-size:10px; }
</style>
</head>
<body>
   <div class="container">
      <h1>jQuery removeClass() Method Demo</h1>
      <div class="hello big">Hello</div>
      <div class="goodbye small">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Class</button>
</body>
</html>

Hasil Output :


JQUERY ANIMATION

Sumber : Tutorialsteacher.com dan Csveda.com

jQuery menyertakan metode-metode yang memberikan efek khusus pada elemen-elemen saat menyembunyikan, menampilkan, mengubah properti gaya, dan operasi fade-in atau fade-out. Metode-metode efek khusus ini dapat berguna dalam membangun antarmuka pengguna interaktif.

Tabel berikut mencantumkan metode-metode jQuery untuk menambahkan efek khusus pada elemen-elemen DOM.

jQuery Methods for Special Effects
Description
animate()
Perform custom animation using element's style properties.
queue()
Show or manipulate the queue of functions to be executed on the specified element.
stop()
Stop currently running animations on the specified element(s).
fadeIn()
Display specified element(s) by fading them to opaque.
fadeOut()
Hides specified element(s) by fading them to transparent.
fadeTo()
Adjust the opacity of the specified element(s)
fadeToggle()
Display or hide the specified element(s) by animating their opacity.
hide()
Hide specified element(s).
show()
Display specified element(s).
toggle()
Display hidden element(s) or hide visible element(s).
slideUp()
Hide specified element(s) with sliding up motion.
slideDown()
Display specified element(s) with sliding down motion.
slideToggle()
Display or hide specified element(s) with sliding motion.

1. jQuery animate() Method

Metode animate() jQuery melakukan animasi kustom dengan menggunakan properti gaya elemen. Metode animate() mengubah properti gaya yang ada menjadi properti yang ditentukan dengan gerakan.

Tentukan suatu pemilih untuk mendapatkan referensi elemen yang ingin Anda tambahkan efek animasi dan kemudian panggil metode animate() dengan objek JSON untuk properti gaya, kecepatan animasi, dan opsi lainnya.

Sintaks :

$('selector expression').animate({ stylePropertyName : 'value'},
                                duration,
                                easing, 
                                callback);

$('selector expression').animate({ propertyName : 'value'},{ options });

a. Terapkan Animasi

Pada contoh berikut, kita mengubah tinggi dan lebar elemen dengan animasi.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    });
            });
    </script>
    <style>
        .redDiv {
            background-color: orange;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <h1>jQuery animate() Method Demo</h1>

    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :

b. Tetapkan Durasi Animasi

Anda dapat menerapkan durasi animasi dalam milidetik sebagai parameter kedua metode animate().

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').animate({
                            height: '200px',
                            width: '200px'
                        },
                        4000);
                });
    </script>
</head>
<body>
    <h1>jQuery animate() Method Demo</h1>

    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :

c. Terapkan Metode Pelonggaran

Tentukan parameter string yang menunjukkan fungsi easing mana yang akan digunakan untuk transisi. Pustaka jQuery menyediakan dua fungsi pelonggaran, yaitu Linier dan Ayunan.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: blue;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').animate({
                    height: '200px',
                    width: '200px'
                },
                5000, 'swing');

        });
    </script>
</head>
<body>
    <h1>jQuery animate() Method Demo</h1>

    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :

d. Fungsi Callback pada Animasi Selesai

Tentukan fungsi panggilan balik untuk dijalankan ketika animasi selesai.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: red;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    },
                    5000,
                    function () {
                        $('#msgDiv').append('Animation completed');
                    });

        });
    </script>
</head>
<body>
    <h1>jQuery animate() Method Demo</h1>

    <div id="myDiv" class="redDiv">
    </div>

    <div id="msgDiv"></div>
</body>
</html>

Output :


e. Tentukan Opsi Animasi

Anda dapat menentukan berbagai opsi sebagai objek JSON. Pilihannya mencakup durasi, pelonggaran, antrian, langkah, kemajuan, selesai, mulai, selesai, dan selalu. Kunjungi api.jquery.com untuk informasi lebih lanjut.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    }, 
                    {    // options parameter 
                        duration: 4000,
                        complete: function () {
                            $(this).animate({
                                height: '100px',
                                width: '100px'
                            }, 4000,
                            function () {
                                $('#msgDiv').text('Animation completed..');
                            });
                        },
                        start: function () {
                            $('#msgDiv').append('Starting animation..');
                        }
                    });

        });
    </script>
</head>
<body>
    <h1>jQuery animate() Method Demo</h1>

    <div id="msgDiv"></div>

    <div id="myDiv" class="redDiv">
</div>
</body>
</html>

Output :

2. jQuery queue() Method

Metode jQuery queue() menampilkan atau memanipulasi antrian fungsi efek khusus yang akan dieksekusi pada elemen tertentu.

Sintaks :

$('selector expression').queue();

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: blue;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').toggle(500);
            $('#myDiv').fadeOut(500);
            $('#myDiv').fadeIn(500);
            $('#myDiv').slideDown(500);
            $('#msgDiv').append('# of animation functions in a queue: ' + $('#myDiv').queue().length);

        });
    </script>
</head>
<body>
    <h1>jQuery queue() Method Demo</h1>

    <div id="msgDiv"></div>

    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :

3. jQuery fadeIn() Method

Metode jQuery fadeIn() menampilkan elemen tertentu dengan memudarkannya menjadi buram.

Sintaks :

$('selector expression').fadeIn(speed, easing, callback);

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: orange;
            height: 100px;
            width: 100px;
            display:none;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').fadeIn(5000, function () {
                    $('#msgDiv').append('fadeIn() completed.')
                });

        });
    </script>
</head>
<body>
    <h1>jQuery fadeIn() Method Demo</h1>

    <div id="myDiv" class="redDiv">
    </div>

    <div id="msgDiv"></div>
</body>
</html>

Output :

4. jQuery fadeOut() Method

Metode jQuery fadeOut() menyembunyikan elemen tertentu dengan memudarkannya menjadi transparan.

Sintaks :

$('selector expression').fadeOut(speed, easing, callback);

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: green;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').fadeOut(5000, function () {
                    $('#msgDiv').append('fadeOut() completed.')
                });

        });
    </script>
</head>
<body>
    <h1>jQuery fadeOut() Method Demo</h1>

    <div id="msgDiv"></div>

    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :

5. jQuery hide() dan show() Method

Metode jQuery hide() menyembunyikan dan metode show() menampilkan elemen yang ditentukan. Anda dapat menentukan fungsi kecepatan, pelonggaran, dan panggilan balik yang akan dijalankan ketika sembunyikan/tampilkan selesai.

Sintaks :

$('selector expression').hide(speed, easing, callback);
$('selector expression').show(speed, easing, callback);

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <style>
        .redDiv {
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .yellowDiv {
            background-color: green;
            height: 100px;
            width: 100px;
            display:none;
        }
    </style>
    <script>
        $(document).ready(function () {


            
        $('#div1').hide(500, function () {
                    $('#msgDiv').append('Red div is hidden.\n')
                });

        $('#div2').show(500, function () {
                            $('#msgDiv').append('Green div is visible.')
                        });

        });
    </script>
</head>
<body>
    <h1>jQuery hide() & show() Method Demo</h1>
    <div id="msgDiv">
    </div>
    <div id="div1" class="redDiv">
    </div>

    <div id="div2" class="yellowDiv">


    </div>
</body>
</html>

Output :

6. jQuery toggle() Method

Metode jQuery toggle() menyembunyikan atau menampilkan elemen tertentu.

​Sintaks :

$('selector expression').toggle(speed, easing, callback)

Contoh :

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">


    </script>
    <style>
        .redDiv {
            background-color: blue;
            height: 100px;
            width: 100px;
        }
    </style>
    <script>
        $(document).ready(function () {
            
            $('#myDiv').toggle(500, function () {
                $('#msgDiv').append('fadeOut completed.')
            });

        });
    </script>
</head>
<body>
    <h1>jQuery toggle() Method Demo</h1>
    <div id="msgDiv">
    </div>
    <div id="myDiv" class="redDiv">
    </div>
</body>
</html>

Output :


VIDEO

Untuk melihat Tutorial lainnya dan lebih jelasnya tentang Library jQuery, silakan lihat Video-video YouTube di bawah ini.


Itulah Modul Tutorial Lengkap jQuery. Mohon maaf apabila ada kesalahan sedikitpun pada Tutorial ini.

Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.

Tags

Post a Comment

Previous Post Next Post