Beberapa Tip untuk Para Pengguna JQuery Tingkat Lanjut

Tabel Konten
  1. Kode Pintasan untuk ‘DOM Ready’ 
  2. Metode Berantai 
  3. Menyeleksi Elemen <body> dan <html> 
  4. Mengambil/Mengeset Atribut Elemen dengan JavaScript Mentah 
  5. Menerapkan Metode JavaScript Mentah kepada Selektor jQuery 
  6. Fungsi Anonim untuk Menggantikan .each() 
  7. Mengeset Event dan Mengeksekusinya Secara Bersamaan 
  8. Jalan Pintas untuk Efek Toggle 
  9. Efek Tabulasi 
  10. Efek Animasi Beruntun 
  11. Efek Berdenyut 
Idea

Berikut ini adalah beberapa tip penggunaan jQuery tingkat lanjut untuk Anda yang menginginkan performa web yang lebih baik, entah itu dari segi lama/cepatnya waktu eksekusi 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 bisa dikaitkan, maka Anda sebenarnya tidak perlu menuliskan selektor jQuery berulang-ulang dan kemudian 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 memberikan 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 jika 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 bisa menggunakan 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 adalah berupa objek, sehingga Anda bisa 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 tentang 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();

24 Komentar

  • Damar Zaky

    super sekali

  • IRIL SAGITA

    Mantab, dalam beberapa hari terakhir ini aku sudah punya pemikiran untuk mengubah jquery untuk mempersingkat loading blog aku, ternyata malah di bahas disini, jadi dengan pembahasan diatas semakin mermpermudah aku dalam mengubah jquery pada blog aku, makasih kak Taufik ?

  • Beben Koben

    Master mosting lagih \o/
    Keep sepirit ah :D

    • Taufik Nurrohman

      Terimakasih, kebetulan pas kemarin hari sedang ada waktu buat merancang posting lagi.

  • Unknown

    luar biasa

  • Bakteri

    Wah nambah pengetahuan lagi.
    Cuma sebagian aja yang aku ketahui, lainnya baru tahu disini
    :-bd

  • antoncabon

    mantaappp.... yaa ga pertamax :Q

  • Unknown

    Amazing mas .. saya suka ini ..

  • Zaruf

    Buset, Lengkap Amat :-bd

  • Unknown

    Walah kalau pengen ngerti kudu belajar ekstra keras ini...

  • Unknown

    pokona biank tipsnya kang .. :-bd

  • Ibrahim

    Terus terang masih bingung, tapi penasaran. Tapi saya akan kerja keras untuk memahaminya secara maksimal :D

  • Anonim

    mantap kang

  • Abdelghafour

    Hi Taufik,
    Thanks for this great tutorial.
    I have a question about Blogger JSON which is :
    I have two blogs in one Gmail account but one the blog don't show author profile url
    http://im65.gulfup.com/QThIz0.png
    while the other do
    http://im80.gulfup.com/6bqFBa.png

    I can't figure out why this happen that's why I come to you to help.

    Thanks in advance :).

    • Taufik Nurrohman

      Check your blog permission and/or whether you are reditecting the Blogger profile URL to Google+.

      • Abdelghafour

        The blog is public and I use Blogger profile but it doesn't work, in your opinion what is the problem ?

  • Unknown

    mf mas , supaya ini work gimana ya

    function showLabels(json) {
    var label = json.feed.category;
    document.write(' <div id="item" class="Section">');
    document.write('<ul>');
    document.write('<li><a class="current" href="#Blog1">All</a></li>');
    for (var i = 0; i < label.length; i++) {
    document.write('<li><a href="#Blog1" ken-shett=".' + label[i].term + '">' + label[i].term + '</a></li>');
    }
    document.write('<span class="show_ico icon-remove"/>');
    document.write('</ul>');
    document.write('</div>');
    }
    document.write('<scr' + 'ipt src="' + HomePageUrl + '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
    • Taufik Nurrohman

      Work yang bagaimana? Supaya kodenya bisa meledak atau bisa jalan sendiri atau bisa terbang dan nari-nari atau bagaimana?

  • Rouf Sadega

    Mas Taufik saya mau nanya . gimana cara mengatasi Masalah "Related Post" Tidak Muncul Di Blog ? Mohon Bantuan nya

  • Admin

    entah mau bilang apa, hanya ini :-bd yang dapat saya berikan hehe.. cukup kreaktif mas. kaga kepikir entah kriting gak jarinya untuk posting sepanjang gini :)

  • Admin

    Mantab mas....

Komentar telah ditutup.