JQuery merupakan pustaka JavaScript terpopuler di kalangan front-end developers. Di samping karena penggunaannya yang mudah, jQuery paling ahlinya dalam pembuatan halaman web yang dinamis dan aplikasi berbasis web yang user-friendly.
Bila Anda salah satu pengguna langganan jQuery, berikut kami rangkum 10 trik penggunaannya yang masih jarang diketahui para developers. Trik-trik ini akan membantu Anda menulis kode jQuery dengan lebih profesional dan efisien, baik untuk Anda yang masih pemula maupun sudah ahli.
Table of Contents
Trik-Trik JQuery Untuk Penulisan Kode yang Lebih Profesional dan Efisien
1. Looping secara mundur atau terbalik
Biasanya kita menggunakan each() untuk melakukan looping elemen di JQuery. Namun, belum banyak yang tahu kalau kita juga bisa melakukan looping secara mundur atau terbalik (backwards). Ini triknya:
$(function(){
var reversedSet = $("li").get().reverse();
//Gunakan get() untuk mengembalikan elemen array, lalu reverse
$(reversedSet).each(function(){
//Sekarang kita bisa memasukkan set yang sudah di-reverse
});
});
2. Memeriksa objek jQuery
Trik yang satu ini mungkin sudah sangat dasar di jQuery, tapi belum banyak yang tahu bagaimana melakukannya dengan cara yang efisien. Misalnya mencari tahu apakah ada elemen dengan class ‘active’ di DOM. Anda bisa memeriksa panjang properti objek dengan cara berikut:
$(function(){
if( $(".active").length ){
//Sekarang kode di sini hanya akan dieksekusi jika setidaknya ada satu elemen aktif
}
});
Trik ini akan berhasil karena 0 mengevaluasi false dan hanya true jika ada setidaknya satu elemen di objek jQuery. Anda juga bisa menggunakan size() untuk melakukan hal yang sama.
Baca Juga: Penetration Testing, Proteksi Bagi Keamanan Web Anda
3. Mengakses elemen iFrame
Karena tingkat kesulitannya, kebanyakan web developers berusaha untuk menghindari penggunaan iFrame. Namun ada kalanya di masalah tertentu, iFrame harus digunakan. Untuk itu, Anda perlu tahu cara mengakses elemen di dalamnya dengan mudah, salah satunya dengan contents() yang mampu memuat DOM iFrame dalam satu baris seperti:
$(function(){
var iFrameDOM = $("iframe#someID").contents();
//Anda bisa menggunakan <strong>find()</strong> untuk mengakses elemen apapun di iFrame:
iFrameDOM.find(".message").slideUp();
//Gunakan slideUp pada semua elemen class 'message' di iFrame
});
4. Menyamakan luas kolom yang berbeda
Anda tidak perlu lagi repot mengatur tinggi kolom satu per satu. Di jQuery, hal seperti ini ada triknya, yaitu dengan menyamakan luas kolom secara otomatis ke yang paling luas. Kuncinya ada di penggunaan equalHeight().
$(function(){
jQuery.fn.equalHeight = function () {
var tallest = 0;
this.each(function() {
tallest = ($(this).height() > tallest)? $(this).height() : tallest;
});
return this.height(tallest);
}
//Tambahkan equalHeight di sini
$(".content-column").equalHeight();
});
5. Menemukan kalimat dan memanipulasinya
Jika Anda ingin menemukan kalimat atau kata lalu ingin menggantinya (replace), atau ingin memanipulasi string yang ada, gunakan kode ini:
$(function(){
//Pertama, tetapkan string mana yang ingin dimanipulasi, penggantinya, dan konteksnya:
var phrase = "string lama";
var replacement = "string baru";
var context = $(body);
//
context.html(
context.html().replace(new RegExp(phrase, 'gi'), replacement);
);
});
Baca Juga: Bangun Desktop App Dengan 5 Framework Javascript Ini
6. Mengatur tampilan kotak Search
Menambahkan tulisan seperti “Cari sesuatu?” dalam kotak Search Anda akan lebih menarik bagi pengunjung. JQuery bisa mengaturnya dengan mudah. Anda juga bisa menghilangkannya jika kotak sedang diketik. Gunakan kode ini:
$(function(){
//set default value:
$("#searchbox")
.val('search?');
.focus(function(){this.val('')})
.blur(function(){
(this.val() === '')? this.val('search?') : null;
});
});
7. Memunculkan kembali link ‘Back-to-Top’
Untuk bisa memunculkan kembali link ‘Back-to-Top’ yang pernah dihilangkan, Anda hanya perlu menambahkan linknya kembali seperti biasa, lalu tambahkan kode seperti di bawah:
$(function(){
/* set variabel di lokal untuk tingkatkan performa */
var scroll_timer,
displayed = false,
$message = $('#message a'),
$window = $(window),
top = $(document.body).children(0).position().top;
/* bisa scroll di layar */
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () { // gunakan timer untuk tingkatkan performa
if($window.scrollTop() <= top) // sembunyikan jika ada di layar atas
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false) // tampilkan jika sedang scroll
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
8. Memasukkan fungsi htmlentities() di jQuery
Jika Anda membutuhkan fungsi PHP seperti htmlentities() ke dalam kode Anda yang berasal dari pustaka jQuery, Anda tidak harus menggunakannya. Anda cukup membuat kode Anda memberikan hasil yang sama seperti penggunaan fungsi htmlentities(). Ini triknya:
$(function(){
var text = $("#someElement").text();
var text2 = "Some <code> & such to encode";
//Anda dapat menentukan string atau mendapatkan teks dari suatu elemen
var html = $(text).html();
var html2 = $('<div/>').text(text2).html();
//Done - html dan html2 sekarang menahan value yang dikode!
});
Baca Juga: 5 Tools JavaScript untuk Percepat Loading Website
9. Memungkinkan user mengatur ukuran tampilan font
Anda bisa membuat website mudah untuk diatur ukuran fontnya oleh pengunjung dengan trik sebagai berikut:
$(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".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;
});
// Decrease Font Size
$(".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;
});
});
10. Membuka link eksternal di Window baru
Jika Anda ingin mengaktifkan semua link eksternal untuk bisa dibuka di window baru, Anda bisa menambahkan kode berikut:
$(function(){
$('a[rel$='external']').click(function(){
this.target = "_blank";
});
});
Jangan lupa tambahkan attribute relnya seperti di bawah ini:
<a href="about.html" rel="external">about</a>
Demikianlah 10 trik JQuery yang akan sangat berguna demi kecepatan dan efisiensi coding Anda. Agar Anda menjadi lebih ahli, teruslah berlatih dan bereksperimen. Semakin Anda terbiasa dengan trik-trik tersebut, projek Anda pun akan lebih cepat diselesaikan.
Jika Anda memiliki keahlian dalam teknik programming, Logique Digital Indonesia sedang membuka lowongan web developer untuk Anda. Di Logique, potensi Anda akan kami bantu gali bersama agar Anda juga bisa ikut berkembang bersama perusahaan internasional seperti kami.
Tidak hanya di Jakarta, kami juga membuka lowongan web developer bagi Anda yang berdomisili di Yogyakarta. Jika Anda memiliki kebutuhan khusus dan tidak bisa bekerja di kantor, kami juga menerima karyawan untuk bekerja dengan sistem remote atau jarak jauh.
Segera registrasikan diri dan kirim CV Anda di halaman rekrutmen Sugoi Saiyo kami. Untuk informasi lebih lanjut mengenai lowongan pekerjaan lainnya di Logique, silakan kunjungi halaman karir Logique Digital Indonesia.
