prihlasenyprihlasit | registrovat

Útržky

Pridávanie elementov

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);

    Reťazenie

    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

    Uchovávajte elementy

    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.

    Nepoužívajte jQuery keď to nieje nutné

    $('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

    Nastavte globálne AJAX predvolené hodnoty

    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();
    */
    

    Využitie delay pre animácie

    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});
    

    Premena kódu na plugin

    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);
    

    Vyber náhodný element

    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');
    

    Vytvorenie prázdneho jQuery objektu

    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);
    

    Vypísanie všetkých odkazov na stránke

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

    Prechádzanie json objektom za pomoci jQuery.each

    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

    Prechádzanie poľom za pomoci jQuery.each

    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

    Vypnutie jQuery animácií

    Vypne všetky jQuery efekty

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

    Prepísanie elementu

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

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

    Zmena veľkosti písma

    $(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;
      });
    });
    

    Stĺpce s rovnakou výškou

    $(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"));
       });
    });
    

    Zebra efekt na tabuľky

    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");
    

    Počet detí elementu

    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
    

    Niemiešajte JavaScript s HTML

    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é.

    data() / removeData()

    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'); 
    

    Uistite sa, že bol obrázok načítaný správne

    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ý');
    });
    

    Načítajte jQuery z Google

    Google má najnovšiu verziu jQuery, ktorá je k dispozícií pre vývojárov. Namiesto toho aby ste mali vlastnú kópiu jQuery, mali by ste rozhodne využiť "veľkorysosť" Google a priamo načítavať ich kópiu:

    XHTML 1.0 Strict validný target=blank atribút

    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;
    });
    

    Ako prinútiť odkaz aby sa otvoril na novej karte

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

    Ako prinútiť odkaz aby sa otvoril v popup okne

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

    Ako zistiť či element existuje

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

    Ako zistiť pozíciu myši

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

    Ako identifikovať jednotlivé prehliadače

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

    rýchla zmena CSS štýlov

    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
    

    klikateľné zoznamy (li ako odkaz)

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

    použitie je jednoduché:

    
    

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

    alternatíva k document ready

    namiesto klasického

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

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

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

    blokovanie pravého (kontextového) tlačidla myši

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

    © 2009 Shaddow admin hosting od VIPHosting