Belajar Menggunakan Jquery Library dari Dasar

Last Updated on February 17, 2023 by

jQuery adalah Library JavaScript yang membantu developer untuk menambah fungsionalitas tambahan pada website yang dibangun. jQuery Library sangatlah populer di kalangan developer website karena dapat digunakan untuk melintasi dan memanipulasi pohon DOM HTML. Selain itu, ini menyederhanakan penanganan acara, animasi CSS, dan Ajax.

jQuery adalah perpustakaan yang sangat kuat yang menyediakan semua alat yang diperlukan untuk membuat interaksi dan animasi yang indah di halaman web, sambil memberdayakan pengembang untuk melakukannya dengan cara yang dapat diakses dan terdegradasi. Berikut ini adalah 10 trik coding dalam jQuery tutorial yang menarik untuk dicoba.

Tips Menggunakan Jquery Library untuk Pemula

Jika ada satu hal buruk tentang jQuery, hal itu pun adalah entry-level yang ia miliki sangat rendah, sehingga cenderung menarik mereka yang tidak memiliki pengetahuan JavaScript. Sekarang, di satu sisi, hal ini bisa menjadi hal yang sangat fantastis.

jQuery adalah library JavaScript yang ringan, “write less do more“. JQuery ditulis dalam Bahasa pemrograman JavaScript. Library ini banyak digunakan untuk menyederhanakan kode front-end yang memanipulasi HTML. JQuery memudahkan Anda sebagai pengembang untuk berinteraksi dan memodifikasi HTML Anda dan data yang dikandungnya.

jQuery juga dapat menyederhanakan banyak hal rumit dari JavaScript, seperti panggilan AJAX dan manipulasi DOM. Anda bisa download jQuery di https://jquery.com/. Anda juga bisa melihat dokumentasi jQuery API di : https://api.jquery.com/.

Meskipun mengkoding dengan jQuery tidaklah terlalu sulit, namun terkadang Anda akan kebingungan untuk melakukan suatu hal. Namun, Anda tidak perlu khawatir karena kami akan memberikan jQuery tutorial dan trik untuk melakukan koding jQuery dengan mudah.

1. Mengakses elemen iFrame

Karena tingkat kesulitannya, sebagian besar developer web mencoba menghindari penggunaan iFrame. Tapi terkadang, dalam masalah tertentu, penggunaan iFrame pun diharuskan.

Dalam melakukan hal tersebut perlu diketahui cara paling mudah untuk mengakses berbagai elemen yang ada di dalamnya. Salah satu cara menuju elemen ini adalah dengan memakai content(). Hal ini mampu memuat DOM iFrame menjadi dalam satu baris, seperti yang ditunjukan di bawah ini:

$(function(){
 var iFrameDOM = $("iframe#someID").contents();
 // Anda dapat menggunakan <strong>find()</strong> untuk mengakses elemen apa pun di iFrame: 
 iFrameDOM.find(".message").slideUp();
 // Gunakan slideUp pada semua elemen 'messages' kelas di iFrame
});

2. Periksa Object jQuery

Trik yang satu ini mungkin sangat mendasar di jQuery Library, Anda mungkin sudah banyak melihat jQuery tutorial yang membahas ini. Akan tetapi, tidak banyak yang tahu bagaimana melakukannya dengan cara yang efisien.

Misalnya, cari tahu terkait keberadaan elemen kelas ‘aktif’ di DOM. Anda dapat memastikan property object long dengan kode berikut ini:

$(function(){
 if( $(".active").length ){
 // Sekarang kode di sini hanya akan dieksekusi jika setidaknya ada satu elemen aktif }
});

3. Loop Backwards

Untuk mengulang elemen di JQuery, biasanya kita menggunakan each(). Namun, kita juga bisa melakukan loop mundur atau mundur. Hal ini pun tidak banyak diketahui. Berikut ini adalah triknya:

$(function(){
 var reversedSet = $("li").get().reverse();
 //Gunakan get() untuk mengembalikan sebuah array dari elemen, dan kemudian mengembalikannya 
 
 $(reversedSet).each(function(){
 //Sekarang kita dapat memasukan perangkat yang sudah dikembalikan
 });
});

4. Buka tautan eksternal di “New Window”

Jika Anda ingin mengaktifkan semua tautan eksternal untuk dibuka di jendela baru, Anda dapat menambahkan kode berikut:

$(function(){
 $('a[rel$='external']').click(function(){
 this.target = "_blank";
 });
});

Kemudian, tambahkan atribut rail seperti di bawah ini:

<a href="about.html" rel="external">about</a>

5. Masukkan fungsi htmlentities() di jQuery

Anda tidak perlu menggunakannya, apabila Anda membutuhkan fungsi PHP seperti htmlentities() ke dalam kode  program Anda yang berasal dari jQuery Library. Hal yang perlu Anda lakukan adalah membuat kode yang bisa memberikan hasil layaknya ketika menggunakan fungsi htmlentities(). Ini triknya:

$(function(){
 var text = $("#someElement").text();
 var text2 = "Some <code> & such to encode";
//Anda dapat menentukan string atau teks dari sebuah elemen
 
 var html = $(text).html();
 var html2 = $('<div/>').text(text2).html();
 // Selesai - html dan html2 sekarang menyimpan nilai yang disandikan!});

6. jQuery Library memungkinkan pengguna untuk mengatur ukuran font tampilan
Anda dapat mengatur font website agar mudah diatur oleh pengunjung dengan trik sebagai berikut:

$(function(){
 // Atur Ulang Ukuran Font
 var originalFontSize = $('html').css('font-size');
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 // Tingkatkan Ukuran Font
 $(".increaseFont").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*1.2;
 $('html').css('font-size', newFontSize);
 return false;
 });
 // Mengurangi Ukuran Font
 $(".decreaseFont").click(function(){
 var currentFontSize = $('html').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
 var newFontSize = currentFontSizeNum*0.8;
 $('html').css('font-size', newFontSize);
 return false;
 });
});

7. Kelola kotak Pencarian

Menambahkan pertanyaan seperti “Apa yang Anda cari?” di kotak Pencarian Anda akan lebih interaktif dan menarik bagi pengunjung pencarian Anda. JQuery dapat mengelolanya dengan mudah. Anda juga dapat menghapusnya jika kotak sedang diketik. Gunakan kode ini:

$(function(){
 // tetapkan default value:
 $("#searchbox")
 .val('search?');
 .focus(function(){this.val('')})
 .blur(function(){
 (this.val() === '')? this.val('search?') : null;
 });
});

8. Memunculkan kembali tautan ‘Back-to-Top’

Anda hanya perlu memasukkan kembali link yang ingin Aqnda masukan, lalu tambahkan kode seperti di bawah ini untuk dapat memunculkan kembali link ‘Back-to-Top’ yang telah dihapus.

$(function(){
/* atur variabel secara lokal untuk meningkatkan kinerja */
 var scroll_timer, 
 displayed = false,
 $message = $('#message a'),
 $window = $(window),
 top = $(document.body).children(0).position().top;
 
 /* bereaksi terhadap gulir acara di jendela */
 $window.scroll(function () {
 window.clearTimeout(scroll_timer);
 scroll_timer = window.setTimeout(function () { // gunakan timer untuk meningkatkan performance
 if($window.scrollTop() <= top) // hide if it's on the top screen
 {
 displayed = false;
 $message.fadeOut(500);
 }
 else if(displayed == false) // show if it's scrolling
 {
 displayed = true;
 $message.stop(true, true).show().click(function () { $message.fadeOut(500); });
 }
 }, 100);
 });
});

9. Samakan lebar kolom yang berbeda

Kabar baiknya, Anda tidak lagi perlu mengatur kolom-kolom tersebut satu demi satu. Di jQuery Library, ada trik untuk melakukan hal tersebut yaitu dengan otomatis menyamakan lebar kolom menjadi terluas. Kuncinya ada di equalHeight().

$(function(){
 jQuery.fn.equalHeight = function () {
 var tallest = 0;
 this.each(function() {
 tallest = ($(this).height() > tallest)? $(this).height() : tallest;
 });
 return this.height(tallest); 
 }
 
 //Add equalHeight here
 $(".content-column").equalHeight();
});

10. Temukan kalimat dan manipulasi mereka

Jika Anda ingin mencari kalimat atau kata kemudian ingin menggantinya, atau ingin memanipulasi string yang ada, gunakan kode ini:

$(function(){
 // Pertama, tentukan string mana yang ingin Anda manipulasi, penggantinya, dan konteksnya:
 var phrase = "old string";
 var replacement = "new string";
 var context = $(body);
 
 //
 context.html(
 context.html().replace(new RegExp(phrase, 'gi'), replacement);
 );
 
});

11. Sembunyikan elemen HTML

Untuk menyederhanakan tampilan, Anda dapat menyembunyikan dan memunculkan elemen HTML yang tidak dibutuhkan lagi dengan command hide() dan show(). Contoh cara membuat jQuery untuk memunculkan dan menyembunyikan konten dengan mengklik suatu tombol adalah seperti berikut:

$(“#hide”).click(function(){

 $(“p”).hide();

});




#(“#show”).click(function(){

 $(“p”).show();

});

12. Buat efek fade in dan fade out

Pemunculan suatu elemen dapat diperhalus dengan menerapkan efek fade in dan fade out saat memunculkan dan menghilangkan elemen tersebut. Efek fade in memunculkan konten dari keadaan “pudar” hingga terlihat secara jelas, sedangkan efek fade out menghilangkan konten dari yang kelihatan jelas menjadi lebih “pudar” sampai hilang sepenuhnya. Contoh kode untuk membuat efek fade in dan fade out pada jQuery adalah sebagai berikut:

$(document).ready(function(){

$(“button”).click(function(){

 $(“#div1”).fadeIn();

  $(“#div2”).fadeIn(“slow”);

  $(“#div3”).fadeIn(3000);

  $(“#div4”).fadeOut(“fast”);

});

});

Sesuaikan div1, div2, div3 dan div4 sesuai dengan id elemen yang efeknya ingin diterapkan pada web Anda. Kecepatan efek dapat disesuaikan di dalam kurung pada fadeIn(). Nilai yang dapat ditetapkan, seperti “fast” yang artinya animasi akan dijalankan selama 200 milidetik, “slow” yang artinya animasi akan dijalankan selama 600 milidetik, atau angka bebas yang artinya animasi akan dijalankan sesuai angka yang ditetapkan dalam satuan waktu milidetik. Jika nilai kecepatan tidak ditetapkan, maka akan digunakan kecepatan default yaitu 400 milidetik.

13. Buat efek sliding

Selain sembunyikan dengan fadeIn() dan fadeOut(), konten juga dapat disembunyikan dengan animasi sliding. Efek slide memiliki dua jenis yaitu slideUp() untuk menutup konten dari bawah ke atas dan slideDown() untuk memunculkan konten dari atas ke bawah. Berikut adalah contoh penerapannya:

$(document).ready(function(){

$(#close).click(function(){

  $(“#panel”).slideUp(“slow”);

  });

$(“#flip”).click(function(){

  $(“#panel”).slideDown(“slow”);

  });

});

Seperti trik fade in dan fade out, pastikan Anda menyesuaikan nama elemen pada kode di atas yang ditandai dengan tanda (#) dengan id elemen di website Anda. Anda juga dapat menyesuaikan nilai slideUp dan slideDown dengan durasi efek yang diinginkan.

14. Tambahkan elemen secara interaktif

jQuery sebagai salah satu implementasi JavaScript memungkinkan Anda untuk menciptakan aplikasi yang lebih interaktif. Salah satu contoh sederhananya yaitu memodifikasi elemen secara real time sesuai aksi yang dilakukan pengguna. 

Contohnya, saat pengguna mengirim suatu data, nilai dari data tersebut akan langsung muncul di dalam tabel. Alur yang diiakukan untuk melakukan aksi ini yaitu dengan mengambil nilai yang dimasukkan tersebut menggunakan fungsi val(), lalu menambahkan nilai tersebut dengan fungsi append(). Contoh kode untuk melakukannya adalah sebagai berikut:

$(“#tambah”).click(function(){

 var inputvalue = $(“#sesuaikan dengan id tabel pada HTML”).val();

 var newvalue = “<tr><td>”+inputvalue+”</td></tr>;

 $(“#tambah”).append(newvalue);

})

15. Cek keadaan suatu elemen

Pengecekan keadaan dilakukan untuk mengetahui, misalnya, apakah elemen sedang muncul atau disembunyikan, apakah form atau tombol sedang diaktifkan atau tidak, atau apakah suatu checkbox atau radio button sedang diisi atau tidak. Hasil dari pengecekan keadaan ini biasanya berupa nilai true atau false untuk penentuan skenario selanjutnya, misalnya suatu checkbox harus diklik agar dapat mengirim data. Untuk pengecekan seperti ini dapat digunakan fungsi is().

Contoh penggunaannya adalah sebagai berikut:

$(function () {

 console.log($(‘id elemen yang dicek’).is(‘:hidden’));

});

Kode di atas digunakan untuk mengecek apakah elemen sedang disembunyikan. Jika ingin mengecek apakah elemen sedang dimunculkan, ganti “hidden” dengan “visible”. 

Selector lain yang dapat digunakan, misalnya “checked” untuk pengecekan radio button atau checkbox apakah sudah dicek atau belum, atau “disabled”/”enabled” untuk pengecekan aktifnya form

Itulah trik ngoding dengan jQuery Library yang mudah dilakukan dan mempercepat maupun mengefisiensi pekerjaan Anda dengan jQuery. Terus berlatih dan bereksperimen agar Anda semakin jago dalam pemrograman jQuery.

Jika Anda ingin tahu lebih banyak informasi tentang bahasa pemrograman, kunjungi selalu situs Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.