Útržky

Ak pridávame mnoho elementov je dobré si najskôr pripraviť hotové HTML a pridať ho ako celok ako pridávať každý element zvlášť.

O tom, že selektor ktorý používame viac krát je dobre cachovať sme si písali už v Uchovávajte elementy. Poďme ale hlbšie:

var $myList = $('#myList');
var li = '';

for(var i=0; i<10; i++) {
  li += "
This is list item " + i + "
";
}

$myList.append(li);

Takmer všetky jQuery metódy vracajú jQuery objekt a podporujú reťazenie. To znamená, že po spracovaní metódy môžte pokračovať spracovaním ďalších. To prináša menší a ľahšie pisateľný kód.

// bez retazenia
$('#notification').fadeIn('slow');
$('#notification').addClass('.activeNotification');
$('#notification').css('marginLeft', '50px');

// s retazenim
$('#notification')
  .fadeIn('slow')
  .addClass('.activeNotification')
  .css('marginLeft', '50px')

Porovnávací test http://jsperf.com/jquery-chaining

Ak používate nejaký selektor na viacerých miestach, rozhodne ho uchovajte v premennej.

var parents = $('.parents'), // zapamatanie
    children = $('.parents').find('.child'), // zle
    kids = parents.find('.child'); // spravne

Porovnávací test http://jsperf.com/ns-jq-cached

Necachované selektory dosahujú až 62% spomalenie oproti ich cachovanému ekvivalentu.

$('a').bind('a', function() {
  console.log('klikli ste na: ' + $(this).attr('id'));
});

môže byť o 80-95% pomalší ako:

$('a').bind('a', function() {
  console.log('klikli ste na: ' + this.id);
});

$(this).attr('id') vs this.id http://jsperf.com/el-attr-id-vs-el-id/2

Pri vyvolávaní AJAX požiadaviek, potrebujete často vyvolať nejaký ukazovateľ, že prebieha nejaká akcia.To môžte docieliť pomocou nejakého loadingu alebo modálnym oknom a podobne. Volanie tohto ukazovateľa pri každej $get a $post požiadavke by bolo veľmi pracné.

Najlepším riešením je nastavenie predvolených hodnôt použitím jednej jQuery metódy

// ajaxSetup - nastavenie predvolených hodnôt
$.ajaxSetup({
  url : '/ajax/',
  dataType : 'json'
});

$.ajaxStart(function(){
  showIndicator();
  disableButtons();
});

$.ajaxComplete(function(){
  hideIndicator();
  enableButtons();
});

/*
  // Dalsie metody, ktore mozte pouzit:
  $.ajaxStop();
  $.ajaxError();
  $.ajaxSuccess();
  $.ajaxSend();
*/

Reťazenie metód je silným nástrojom jQuery a ním sa dá dosiahnuť reťazenie efektov animácie. Ak chceme zdržať vykonanie ďalšej animácie môžeme medzi ne vložiť delay metódu.

Takže namiesto tohto:

$('#elem').animate({width:200},function(){
  setTimeout(function(){
		$('#elem').animate({marginTop:100});
  },2000);
});

To môžeme spraviť takto:

$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

Ak využívate nejaký kód niekoľko krát, zvážte či ho nepremeniť na plugin. To umožní jeho znovupoužitie a sprehľadní kód. Tak isto sa potom tento kód dá využiť v inom projekte.

Premena je pritom veľmi jednoduchá:

(function($){
  $.fn.nazovPluginu = function(){
    // kod
    return this;
  };
})(jQuery);

jQuery umožňuje pridávať vlastné pseudo-selektory. To sa dá jednoducho docieliť pridaním funkcie do $.expr[':'] objektu.

(function($){
  var random = 0;

  $.expr[':'].random = function(a, i, m, r) {
    if (i == 0) {
      random = Math.floor(Math.random() * r.length);
    }
    return i == random;
  };
})(jQuery);

A ako to použiť:

$('li:random').addClass('glow');

Niekedy možno budete potrebovať vytvoriť prázdny jQuery objekt a neskôr ho vyplniť pomocou .add metódy.

var container = $([]);
container.add(another_element);

$('a').each(function(index, value){
   console.log($('a').attr('href'));
});

var json = [
    { "red": "#f00" },
    { "green": "#0f0" },
    { "blue": "#00f" }
];
 
$.each(json, function() {
  $.each(this, function(name, value) {
    console.log(name + '=' + value);
  });
});

vypíše red=#f00 green=#0f0 blue=#00f

var pole = ['nula','jedna','dva','tri'];
jQuery.each(pole , function(index, value){
     console.log(index + ':' + value);
});

vypíše 0:nula 1:jedna 2:dva 3:tri

Vypne všetky jQuery efekty

$(document).ready(function() {
  jQuery.fx.off = true;
});

Potrebujete prepísať div niečím iným?

$(document).ready(function() {
  $('#id').replaceWith('Tu bol kedysi div #id');
});

$(document).ready(function() {
  // Reset the font size(back to default)
  var originalFontSize = $('html').css('font-size');
    $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });
  // Increase the font size(bigger font0
  $(".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 the font size(smaller 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;
  });
});

$(document).ready(function() {
   function equalHeight(group) {
      tallest = 0;
       group.each(function() {
          thisHeight = $(this).height();
          if(thisHeight > tallest) {
             tallest = thisHeight;
          }
       });
      group.height(tallest);
   }
   // how to use
   $(document).ready(function() {
      equalHeight($(".left"));
      equalHeight($(".right"));
   });
});

Pri používaní tabuliek, je dobrý nápad, pre lepšiu čitateľnosť, dať rozdielny štýl, nepárnym a párnym riadkom. Použitím jQuery, to možno dosiahnuť ľahko, bez akýchkoľvek dodatočných html značiek.

$("tr:odd").addClass("odd");

Ak by ste chceli spočítať, koľko div elementov sú deťmi #foo, nasledujúce riadky vám to prezradia. Jednoduché a účinné!

$("#foo >  div").length

Rovnako ako miešanie HTML kódu s CSS je zlý návyk, tak isto by ste nemali používať JavaScript v HTML dokumente. Nasledujuci priklad ilustruje onclick udalost:

jQuery

Rovnaký výsledok môžme dosiahnuť ne-vnoreným JavaScript

$(document).ready(function() {
  $('#homepage').click(function() {
    alert('Hlavná stránka jQuery');
  });
});

Na prvý pohľad sa to môže zdať zložité, obzvlášť pre začiatočníkov. No je to naozaj ľahšie ako sa zdá, a vaše HTML bude čisté.

Chceli ste už niekedy uložiť krátke informácie o prvku? Môžete to urobiť jednoducho s metódou data(). Ak chcete nastaviť hodnotu, môžete to spraviť pomocou dvoch parametrov (kľúč a hodnota) alebo len jeden (objekt).

$('#wrap').data('mojKluc', 'mojaHodnota');
$('#container').data({ mojInyKluc : 'mojaInaHodnota', rok : 2010 });

Ak chcete získať vaše dáta späť, stačí zavolať metódu s kľúčovými hodnotami, ktoré chcete.

$('#container').data('mojInyKluc'); // vrati 'mojaInaHodnota'
$('#container').data('rok'); // vrati 2010

Ak chcete získať všetky údaje, ktoré korešpondujú s prvkami, zavolajte data bez parametrov, získate objekt s všetkými kľúčmi a hodnotami, ktoré ste vložili tomuto prvku. Ak chcete odstrániť pár kľúč/hodnota potom, čo ste to pridali do elementu, stačí zavolať removedData(), použitím správneho kľúča.

$('#container').removeData('mojInyKluc'); 

Ako viete, že bol obrázok správne načítaný? V niektorých konkrétnych prípadoch, ako CAPTCHA, nastávajú problémy ak sa obrázok nenačíta správne. Pomocou jednoduchého kódu, budete môcť zistiť, či sa váš obrázok zobrazil na obrazovke používateľa.

$('#mojObrazok').attr('src', 'obrazok.jpg').load(function() {
    alert('Obrazok načítaný');
});

target="blank" atribút môže byť užitočný, ak chcete otvoriť odkaz v novom paneli alebo okne. Ale target="blank" atribút nie je validný XHTML 1.0 Strict. Pomocou jQuery, môžete bez problémov dosiahnuť rovnaký efekt a s validitou.

$("a[@rel~='external']").click( function() {
    window.open( $(this).attr('href') );
    return false;
});

jQuery('a.novaKarta').live('click', function()
{
	noveOkno = window.open($(this).href);
	jQuery(this).target = "_blank";
	return false;
});

jQuery('a.popup').live('click', function()
{
   noveOkno = window.open($(this).attr('href'),'','height=200,width=150');
   if (window.focus) { noveOkno .focus(); }
   return false;
});

if ($('#someDiv').length) { /* element existuje */ }

$(document).mousemove(function(e)
{
   $().mousemove(function(e)
   {
      $(’#pozicia’).html(”X: ” + e.pageX + ” | Y” + e.pageY);
   });
});

if ($.browser.safari) { /* safari */ }
if ($.browser.msie) { /* internet explorer */ }
if ($.browser.mozilla) { /* mozilla */ }
if ($.browser.opera) { /* opera */ }
if ($.browser.webkit) { /* webkit */ }

jQuery kód:

$("a.csszmena").click(function() {
    $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
    return false;
});

HTML kód:

Téma 1
Téma 2
Téma 3

$("ul li").click(function(){
  //ziskame url z odkazu a presmerujeme
  window.location=$(this).find("a").attr("href"); return false;
});

použitie je jednoduché:

    
odkaz 1
    
odkaz 2
    
odkaz 3

Kliknutie na li spôsobí presmerovanie na url, ktorá je zadaná v odkaze. Tento spôsob je možné rôzne modifikovať.

namiesto klasického

$(document).ready(function() {
	//document ready
});

je možné používať taktiež

$(function(){
	//document ready
});

$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});