prihlasenyprihlasit | registrovat

Ako jQuery pracuje

Základný úvod do jQuery a pojmy, ktoré musíte poznať na jeho používanie.

Originál: http://docs.jquery.com/Tutorials:How_jQuery_Works
Autor: John Resig.

Podobné kurzy: jQuery jadro, selektory, CSS, prechody, manipulácia, udalosti, efekty

Obsah

jQuery: Základy

Toto je základy tutoriál, ktorý vám pomôže začať s používaním jQuery. Ak ešte nemáte spravenú testovaciu stránku, začnite vytvorením novej HTML stránky podľa nasledujúcej predlohy:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
      
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
</html>

Upravte src atribút v script tagu aby smeroval na vašu kópiu jquery.js. Napríklad, ak je jquery.js v tom istom adresári ako váš HTML súbor, môžete použiť:

<script type="text/javascript" src="jquery.js"></script>

Poznámka: Ak je celá stránka vložená cez PHP include() alebo require() funkciu, ubezpečte sa, že kód skriptu je vo vnútri tagu <body> a nie vo vnútri tagu <head>, pretože volania jQuery skriptu z vnútra tagu <head> z nejakého dôvodu nefungujú.

Možete si stiahnuť svoju vlastnú kópiu jQuery zo stránky Stiahnutie jQuery.

Spúšťanie kódu pomocou Document Ready

Predovšetkým väčšina JavaScript programátorov končí tým, že pridajú nejaký kód do svojho programu, podobne ako tento:

window.onload = function(){ alert("vitajte"); }

*Vo vnútri sa nachádza kód, ktorý chcete aby sa spustil, keď je stránka načítaná. Problémom však je, že JavaScript kód nieje spustený dokiaľ niesu stiahnuté všetky obrázky (vrátane banerovej reklamy). Dôvod prečo použitie window.onload je na prvom mieste je ten, že HTML 'dokument' nieje načítaný, dokiaľ sa nepokúsi spustiť váš kód.

Na predchádzanie problémov, má jQuery jednoduchú správu na kontrolu dokumentu a čakanie dokiaľ je pripravený na manipuláciu, tiež známe ako ready udalosť:

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

Vo vnútri ready udalosti, je pridaný správca kliknutí na odkazy:

$(document).ready(function(){
   $("a").click(function(event){
      alert("Dakujeme za navstevu!");
   });
});

Uložte si váš HTML súbor a obnovte testovaciu stránku vo vašom prehliadači. Kliknutím na odkaz na stránke by mal prehliadač zobraziť vyskakovacie okno, pred opustením ísť na hlavnú stránku jQuery.

Pre kliknutie a väčšinu ďalších akcií môžete zabrániť predvolenému správaniu - tu, v nasledujúcom odkaze na jquery.shaddow.sk - zavolanim event.preventDefault() v správcovi udalostí:

$(document).ready(function(){
   $("a").click(function(event){
      alert("Ako vidite, tento odkaz vas uz viac nevezme na jquery.com");
      event.preventDefault();
   });
});

Kompletný príklad

Tu je príklad toho, ako môže vyzerať HTML súbor, ak by ste použili skript vo vašom súbore. Upozorňujeme, že odkaz na Google je načítane jadra jQuery súboru. Tiež, že zvolený súbor načítaný v &lt;head&gt;, je vo všeobecnosti lepšie umiestniť do samostatného súboru a odkázať na súbor pomocou script elementu do jeho src atribútu.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(document).ready(function(){
            $("a").click(function(event){
               alert("Ako vidite, tento odkaz vas uz viac nevezme na jquery.com");
               event.preventDefault();
            });
         });
      </script>
   </head>
   <body>
      <a href="http://jquery.com/">jQuery</a>
   </body>
</html>

Pridávanie a odstraňovanie CSS triedy

Dôležité: Zostávajúce jQuery príklady budú musieť byť umiestnené vo vnútri ready udalosti aby boli vykonané, keď je dokument pripravený na prácu. Pozri spúšťanie kódu pomocou Document Ready vyššie uvedené pre viac detajlov.

Ďalšou bežnou úlohou je pridanie (alebo odstránenie) CSS (Cascading Style Sheet) triedy.

Najskôr pridáme nejaké informácie stylu do &lt;head&gt; vášho dokumentu, asi takto:

<style type="text/css">
   a.test { font-weight: bold; }
</style>

Potom pridáme addClass volanie do vášho skriptu:

$("a").addClass("test");

Všetky vaše elementy budú teraz tučné.

Pre odstránenie triedy použite removeClass

$("a").removeClass("test");
  • (CSS umožňuje pridať viac tried danému elementu.)

Špeciálne efekty

V jQuery je pár vstavaných efektov, ktoré sú poskytnuté, aby mohli vaše stránky skutočne vyniknúť. K tejto skúške potrebujeme zmeniť click, ktorý ste už skôr pridali takto:

$("a").click(function(event){
   event.preventDefault();
   $(this).hide("slow");
});

Teraz, keď kliknete na hocijaký odkaz, mal by sám pomaly zmiznúť.

Volania a funkcie

Volanie je funkcia, ktorá je odovzdaná ako argument do inej funkcie a je realizovaná po tom, čo je materská funkcia ukončená. Špeciálny prípad ohľadom volania je v tom, že funkcia, ktorá sa objaví po "materskej", sa môže vykonať pred vykonaním volania.

Ďalšia dôležitá vec je vedieť ako správne vytvoriť volania. To je miesto kde som často zabúdal na správnu syntax.

Volania bez argumentu

Pre volanie bez argumentu postupujte asi takto:

$.get('mojahtmlstranka.html', myCallBack);

Všimnite si, že druhý parameter je len názov funkcie (ale nie ako reťazec a bez zátvoriek). Funkcie v JavaScripte sú '', a tak je možne ich ponechať ako referencie premenných a vyhodnotiť ich neskôr. jQuery

Volania s argumentom

"Čo robiť ak máte argumenty, ktoré chcete spracovať?", skúste si odpovedať sami.

Nesprávne

Nesprávny smer (nebude fungovať!)

$.get('mojahtmlstranka.html', myCallBack(hod1, hod2));

Toto nebude fungovat pretoze su to volania

myCallBack(hod1, hod2)

a potom vrátia hodnotu ako druhý parameter do $.get().

Správne

Problém s vyššie uvedeným príkladom je to, že myCallBack(hod1, hod2) je vyhodnotený pred skončením funkcie. JavaSript a rozšírenie jQuery očakáva ukazovateť funkcie v prípadoch aké sú tieto. Tj setTimeout funkcia.

Nižšie použitá, anonymná funkcia je vytvorená (len blok výpisov) a registrovaná ako volanie funkcie. Poznámka k použitiu 'function(){'. Anonymná funkcia robí dôkladne jednu vec: volania myCallBack, s hodnotami hod1 a hod2 vo vonkajšej pôsobnosti.

$.get('mojahtmlstranka.html', function(){
   myCallBack(hod1, hod2);
});

hod1 a hod2 sú vyhodnotené ako volania zatiať čo '$.get' prebieha získanú stranku.

Dalsie citanie

jQuery užívatelia vytvorili mnoho uzitočných tutoriálov, ktoré môzu pomôcť vám a novým užívateľom pomocou procesu učenia ako najlepšie narábať s touto knižnicou. Opäť platí, že ak sme nesprávne opísali vlastnosti v jQuery kniznici ... jednoducho nám dajte vedieť.

Tu by ste sa pravdepodobne mali začať poobhliadat po zostávajucej časti dokumentácie - ktorá je veľmi komplexná a zahŕňa všetky aspekty jQuery. Ak máte akekoľvek otázky, neváhajte sa spýtať v diskusii.

celkom 0

Komentáre

Zatiaľ žiadne komentáre

© 2009 Shaddow admin hosting od VIPHosting