jQuery-návod.cz - vše okolo jQuery - jQuery UI, pluginy a další

V této části webu naleznete často kladené otázky. Je dobré se sem podívat, než se na něco zeptáte v diskuzi nebo na fóru. Tato stránka se bude aktualizovat podle dotazů na fóru a podle vyhledávání. Část je převzata oficiálního webu.

Podle vlastnosti ID můžeme vybírat takto:

$('#mujDivId')

Podle třídy můžete vybírat takto:

$('.mojeCssTrida')

Jestli element existuje můžeme zjistit takto:

if ( $('#myDiv').length) {
     alert("Prvek exsituje");
} else {
     alert("Prvek neexistuje");
}

Jestli je element viditelný zjistíme tímto kódem:

var jeViditelny = $('#mujDiv').is(':visible');
var jeSchovany = $('#mujDiv').is(':hidden');

Povolení nebo zakázání prvku ve formuláři provedeme takto:

// Zakázání #x
$("#x").attr('disabled', 'disabled');

// Povolení #x
$("#x").removeAttr('disabled');

Zaškrnout checkbox lze tímto kódem:

// Zaškrtnutí #x
$('#x').attr('checked', true);

// Odškrtnutí #x
$('#x').attr('checked', false);

Hodnotu, která je aktuálně vybraná v selectu, zjisím tímto kódem:

// Získání aktuální hodnoty v selectu
$("#mujSelect").val();

// Získání aktuální textový popisek v selectu
$("#mujSelect option:selected").text();

Tvorba tohoto webu a článků mě stála spoustu času a úsilí. Pokud se vám tento web líbí, můžete ho podpořit. Provedení nechám na vás, pro mě ale bude pravděpodobně nejlepší finanční odměna. Přispět ale můžete i odkázáním na tento web nebo jinou drobností, případně mi můžete nabídnou práci. Jestli jste se rozhodli tento projekt podpořit, kontaktujte mě.

HTML obsah prvku můžeme získat tímto kódem:

$("#mujDiv").text();

Textový obsah prvku bez HTML značek získáme takto:

$("#mujDiv").text();

Hodnotu inputu nebo textarea získáme tímto kódem:

$("#mujInput").val()

var mujDiv = $('#mujDivId');

Pak s tím můžeme pracovat takto:

mujDiv.hide(500);

Jestli má prvek určitou třídu zjistíme tímto kódem:

if ($("mujDiv").hasClass("hledana_trida") ) {
     alert("#mujDiv má třídu hledana_trida");
} else {
     alert("Nemá tuto třídu");
}

Text prvku můžeme změnit takto:

$("#mujDiv").text("Nový text");

HTML obsah můžeme změnit podobně jako text:

$("#mujDiv").html("<b>Nový HTML obsah</b>");

Hodnotu inputu nebo prvku textarea můžeme změnit takto:

$("#mujInput").val("Nová hodnota");

Prvek můžeme přidat takto:

$("#mujDiv").after("<div>Nový div</div>");
// za #mujDiv přidá "<div>Nový div</div>"

Prvek se maže takto:

$("#mujDiv").remove();
// smaže #mujDiv

JavaScript je programovací jazyk, který je používán v moderních prohlížečích. JQuery je kus kódu napsaný v JavaScriptu a ulehčuje s ním práci.

Ne, v jQuery nic jako podmínky nejsou. Pro používání podmínek potřebujete základní znalosti JavaScriptu.

Na zjištení rozměrů jQuery nabízí několik funkcí:

// HTML část 
<div id="odstavec"><div> 

// jQuery část
var vyska = $("#odstavec").height(); 
// uložení výšky elementu do proměnné    

var sirka = $("#odstavec").width(); 
// uloženi šířky elementu do proměnné 

Více informací o zjišťování a nastavení rozměrů najdete zde.

Na zjištení pozice prvku nabízí jQuery funkci position.

var pozice = $('#div1').position();
// vytvoří objekt "pozice"

var vzdalenost_zleva =  pozice.left;
// do proměnné uloží pozici 
// prvku od levého okraje stránky

var vzdalenost_shora =  pozice.top;
// do proměnné uloží pozici 
// prvku od horního okraje stránky

// HTML část
<table>
   <tr>
          <td>text</td>
          <td>text</td>
          <td>text</td>
   </tr>
   <tr>
          <td>text</td>
          <td>text</td>
          <td>text</td>
   </tr>
   <tr>
          <td>text</td>
          <td>text</td>
          <td>text</td>
   </tr>
   <tr>
          <td>text</td>
          <td>text</td>
          <td>text</td>
   </tr>
</table>

// CSS část
.sudy {
     background-color: blue;
}
.lichy {
     background-color: red;
}

// jQuery část
$("table").find("tr").not(":even").addClass("sudy"); // sudý
$("table").find("tr").not(":odd").addClass("lichy"); // lichý

Pokud vám nefunguje napsaný kód, postupujte podle tohoto seznamu:

• Nezapoměli jste načíst samotnou jQuery knihovnu? V hlavičce by mělo být něco jako je toto:

  <script  type="text/javascript" charset="UTF-8" src="/js/jquery-1.4.3.min.js"></script>

• Je váš napsaný kód pod linkem na jQuery knihovnu?

  <script  type="text/javascript" charset="UTF-8" src="/js/jquery-1.4.3.min.js"></script>
  <script>
  // tady je váš kód
  </script>

• Čekáte na načtení DOM?

  <script  type="text/javascript" charset="UTF-8" src="/js/jquery-1.4.3.min.js"></script>
  <script>
  $(document).ready(function(){
       // tady je váš kód
  });
  
  // nebo
  $(function(){ 
       // tady je váš kód
  });
  </script>

• Zkoušeli jste použít chybovou konzoli? Ve většině prohlížečů se spustí klávesovou zkratkou CTRL + ALT + J. Umožňuje seldovat běh vašeho scriptu, nastavovat breakpointy a také zobrazovat různé chyby.
• Pokud si ani po použití chybové konzole nevíte rady, zeptejte se v diskuzi. Stručně a jasně popište váš problém, přiložte kompletní kód, ideálně i odkaz na webovou stránku a pokud chybová konzole hlásí nějakou chybu, určitě hlášení zkopírujte.