Berikut ini ialah beberapa tip penggunaan jQuery tingkat lanjut untuk Anda yang menginginkan performa web yang lebih baik, entah itu dari segi lama/cepatnya waktu sanksi skrip ataupun dari segi panjang/pendeknya penulisan kode. Semoga bermanfaat!
Kode Pintasan untuk ‘DOM Ready’
// Sebelum $(document).ready(function() { … }); // Sesudah $(function() { … });Metode Berantai
Jika memang masih dapat dikaitkan, maka Anda bekerjsama tidak perlu menuliskan selektor jQuery berulang-ulang dan lalu menerapkan metode pada selektor tersebut:
// Sebelum $('button').click(function() { $(this).toggleClass('active'); $(this).html('Clicked!'); $(this).css('opacity', .5); }); $('button').css('color', 'red'); // Sesudah $('button').click(function() { $(this).toggleClass('active').html('Clicked!').css('opacity', .5); }).css('color', 'red');Menyeleksi Elemen <body> dan <html>
Selektor ini akan menawarkan performa yang lebih baik:
// Sebelum var $root = $('html'), $base = $('body'); // Sesudah var $root = $(document.documentElement), $base = $(document.body);Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah
Dalam kondisi tertentu, metode ini terbukti jauh lebih efisien jikalau dibandingkan dengan metode .attr():
// Sebelum $('div').each(function(i) { $(this).attr({ 'class': 'foo', 'id': 'bar-' + i }); }); // Sesudah $('div').each(function(i) { this.className = 'foo'; this.id = 'bar-' + i; });// Sebelum $('a').click(function() { alert($(this).attr('href')); }); // Sesudah $('a').click(function() { alert(this.href); });Menerapkan Metode JavaScript Mentah kepada Selektor jQuery
Anda dapat memakai jQuery .get() untuk mengembalikan status selektor jQuery menjadi selektor JavaScript, atau gunakan indeks array yang ada untuk menyeleksi elemen pada urutan tertentu:
// Tidak valid $('div').innerHTML = 'test'; // Valid $('div').get(0).innerHTML = 'test'; $('div')[0].innerHTML = 'test';// Tidak valid $('#my-button').onclick = function() { alert('test!'); }; // Valid $('#my-button').get(0).onclick = function() { alert('test!'); }; $('#my-button')[0].onclick = function() { alert('test!'); };Fungsi Anonim untuk Menggantikan .each()
// Sebelum $('div').each(function(i) { $(this).html('Element: ' + i); }); // Sesudah $('div').html(function(i) { return 'Element: ' + i; });Mengeset Event dan Mengeksekusinya Secara Bersamaan
// Sebelum function windowSizeCheck() { $('#result').html('Width: ' + $(window).width() + '<br>Height: ' + $(window).height()); } windowSizeCheck(); $(window).resize(windowSizeCheck); // Sesudah $(window).resize(function() { $('#result').html('Width: ' + $(this).width() + '<br>Height: ' + $(this).height()); }).trigger("resize");Jalan Pintas untuk Efek Toggle
Setiap metode dalam jQuery pada umumnya ialah berupa objek, sehingga Anda dapat menganggap $(document).ready() dan $(document)['ready']() sebagai dua hal yang sama:
// Tidak efisien $('a').mouseenter(function() { $(this).addClass('hover'); }); $('a').mouseleave(function() { $(this).removeClass('hover'); }); // Lebih efisien $('a').mouseenter(function() { $(this).addClass('hover'); }).mouseleave(function() { $(this).removeClass('hover'); }); // Lebih efisien lagi $('a').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); // Paling efisien $('a').on("mouseenter mouseleave", function(e) { $(this)[e.type == "mouseenter" ? 'addClass' : 'removeClass']('hover'); });Efek Tabulasi
Gunakan .siblings() untuk menyeleksi semua elemen yang sejenis dengan X di dalam induk yang sama tanpa menyeleksi elemen X itu sendiri:
/** * <div class="my-tab-buttons"> * <a href="#tab-1">Tab 1</a> * <a href="#tab-2">Tab 2</a> * <a href="#tab-3">Tab 3</a> * <a href="#tab-4">Tab 4</a> * </div> */ // Sebelum $('.my-tab-buttons a').click(function() { $(this).parent().find('a').removeClass('active'); $(this).addClass('active'); return false; }); $('.my-tab-buttons a:first').addClass('active'); // Sesudah $('.my-tab-buttons a').click(function() { $(this).addClass('active').siblings().removeClass('active'); return false; }).first().trigger("click");Efek Animasi Beruntun
Sebelumnya Saya sudah pernah menjelaskan perihal ini…
// Sebelum $('div') .animate({'font-size':10}, 400) .animate({'font-size':50}, 400) .animate({'font-size':100}, 400) .animate({'margin-top':200}, 400); // Sesudah var anim = [ {'font-size':10}, {'font-size':50}, {'font-size':100}, {'margin-top':200} ]; $.each(anim, function(i) { $('div').animate(anim[i], 400); });// Sebelum $('div') .animate({'font-size':10}, 400) .animate({'font-size':50}, 1000) .animate({'font-size':100}, 200) .animate({'margin-top':200}, 300); // Sesudah var anim = [ [{'font-size':10}, 400], [{'font-size':50}, 1000], [{'font-size':100}, 200], [{'margin-top':200}, 300] ]; $.each(anim, function(i) { $('div').animate(anim[i][0], anim[i][1]); });Efek Berdenyut
function pulsate() { var $div = $('div'); $div.animate({ fontSize: $div.css('font-size') == '50px' ? '100px' : '50px' }, 800, pulsate); } pulsate();