Jūs esate sename manualai.lt puslapyje.
Naujasis puslapis yra v2.manualai.lt

forumas.manualai.lt

kodai.manualai.lt

dizainas.manualai.lt

idomu.manualai.lt

top

Sekite mus Facebook'e

Sekite mus Facebook'e

Vartotojo meniu

Forumo naujausi


jQuery PDF Spausdinti
Autorius: Primatas   

jQuery

jQuery - JavaScript biblioteka, kuri labai stipriai palengvina mūsų - internetinių puslapių kūrėjų gyvenimą.

  • jQuery yra labai lengva naudoti
  • jQuery veikia visose populiariose naršyklėse
  • jQuery - rašyk mažiau, padaryk daugiau
Prieš naudojant turite parsisiųsti jQuery biblioteką ir ją įterpti į savo puslapį:
  <html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
// Jūsų kodas eina čia
<a href="http://www.manualai.lt/">manualai</a>
</script>
</head>
<body>
<p>Paragrafas</p>
</body>
</html>

Kai naudojate jQuery, siūlau visada nueiti į jų oficialų puslapį jquery.com ir parsisiųsti naujausią stabilią versiją.

Kodo paleidimas puslapiui užsikrovus

Pirmiausia, visada reikia užtikrinti, kad JavaScript kodas bus vykdomas tik tada, kai puslapis yra pilnai užkrautas. Dauguma JavaScript programuotojų tai padarytų su tokia eilute:

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

Problema yra tame, kad panaudojus tokią funkciją, JavaScriptas lauks, kol pilnai užkraus ne tik patį puslapį, bet ir visus paveikslėlius, banerius, reklamas ir panašius dalykus. jQuery turi paprastą funkciją, kuri geriau patikrina, ar puslapis jau yra užkrautas. Tai padaroma su selektoriumi $(document) ir funkcija .ready();

 $(document).ready(function(){
// Jūsų kodas eina čia
});

Skaityti daugiau apie eventą ready jQuery oficialiame puslapyje.

Viduje šios funkcijos galite rašyti kokį tik norite kodą. Tarkime pridėkime HTML elementams <a> paspaudimo eventą .click();. Su tokiu kodu paspaudus betkurią nuorodą esančią puslapyje, iššoks alert langas su žinute "Ačiū už apsilankymą!":

 $(document).ready(function(){
$("a").click(function(event){
alert("Ačiū už apsilankymą!
");
});

});
Taip paprastai su jQuery galite pridėti kokį tik norite eventą (įvykį) betkokiam elementui. Apie selektorius daugiau skaitykite čia: jQuery selectors.

CSS klasių pridėjimas, nuėmimas

Pastaba: visą kodą reikia dėti viduje $(document).ready(); funkcijos, kitaip kils klaidų. Apie šią funkciją galite paskaityti aukščiau.

Kita svarbi jQuery užduotis yra CSS klasių pridėjimas, nuėmimas, keitimas ir t.t.

Pirmiausia aprašome paprastą CSS klasę:

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

Poto sukurtą klasę pridedame su funkcija addClass:

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

Dabar visi jūsų <a> elementai bus paryškinti.

Tam kad nuimtumėte klasę nuo kokio nors elemento, naudojame removeClass funkciją:

 $("a").removeClass("testas");

Pastaba: CSS leidžia pridėti kelias klases vienam elementui. Klasių pavadinimus reikia atskirti tarpais:

<a href="http://www.manualai.lt/" class="nuoroda linkas manualai_nuoroda">manualai.lt</a>

Specialūs efektai

jQuery palaiko keletą patogių efektų, kurie puslapį padaro moderniu ir gražiu. Prie pirminio kodo galite pabandyti pridėti:

 $("a").click(function(event){
$(this).hide("slow");
});
Dabar, jei paspausite kokią nors nuorodą, ji tiesiog išnyks. Apie kitus efektus skaitykite čia: jQuery effects

jQuery magija

jQuery naudoja patogią funkcijų konstrukciją, kuri padaro kodą paprastesniu ir trumpesniu. Kiekvienas jQuery metodas grąžina savo užklausos objektą, todėl ant jo galima pridėti dar vieną funkciją ir dar vieną ir taip be galo. Pvz.:

 $("a").addClass("testas").show().html("labas");

Kiekvienas individualus metodas (addClass, show ir html) grąžina jQuery objektus, tai leidžia tęsti metodų pridėjimą prie esamo elementų komplekto.

Galite daryti netgi dar daugiau. Galite filtruoti elementus ir tik atfiltruotiems pridėti norimą kodą, o tuo tarpu kitus palikti nepakeistus. Pvz.:

 $("a")
.filter(".paspausk_mane")
.click(function(){
alert("Jūs paliekate puslapį.");
})
.end()
.filter(".paslepk_mane")
.click(function(){
$(this).hide();
return false;
})
.end();

Toks JavaScript kodas turėtų veikti su tokiu HTML:

<a href="/http://www.manualai.lt/" class="paspausk_mane">Bus parodyta žinutė</a>

<a href="/http://www.manualai.lt/" class="paslepk_mane">Paslėps nuorodą</a>

<a href="/http://www.manualai.lt/">Nepakitus, paprasta nuoroda</a>

Metodai kurie keičia jQuery pažymėtą sritį ir kurie gali būti nutraukti su end(), yra:

  • add(),
  • children(),
  • eq(),
  • filter(),
  • find(),
  • next(),
  • not(),
  • parent(),
  • parents(),
  • siblings()
  • slice().

Daugiau apie jQuery metodus galite paskaityti jų oficialiame puslapyje: Traversing.

Atgaliniai šaukimai ir funkcijos

Atgaliniai šaukimai yra "callback". Tai yra funkcijos, kurios pateikiamos kaip argumentai kitoms funkcijoms ir yra vykdomos tik tada, kai jų pirminė funkcija yra įvykdoma.

Callback funkcijos be argumentų

Callback funkcijai be argumentų pavyzdys būtų toks:

 $.get('htmlPuslapis.html', CallbackFunkcija);

Callback su argumentais

Ką daryti, kai norime callback funkcijai pasiųsti kažkokius parametrus?

NETEISINGAS būdas :

 $.get('htmlPuslapis.html', CallbackFunkcija(param1, param2));

Tai neveiks, nes jūs iškviečiate param1 ir param2 kartu su $.get() funkcija.

Teisingas būdas:

Bėda su viršuje parodytu atveju yra tame, kad CallbackFunkcija funkcija bus įvykdyta prieš ją deramai iškviečiant, tam kad to išvengti reikia naudoti tokį kodą:

$.get('htmlPuslapis.html', function(){
CallbackFunkcija(param1, param2);
}
);

param1 ir param2 yra suprantami kaip CallbackFunkcija funkcijos parametrai. Jie pamatomi tik tada, kai funkcija $.get baigia vykdyti savo darbą.

Pabaigai

Pats nuolatos naudoju jQuery ir galiu pasakyti, kad tai nuostabus būdas programuoti su JavaScript.

Kas susidomėjot, patarčiau pažiūrėti Google talks prezentaciją apie jQuery: youtube klipas

Vėliau pažiūrėti dokumentaciją jQuery oficialiame tinklapyje: jquery.com, parsisiųsti, dokumentacija

Būtinai pasižiūrėkit jQuery UI (User interface): jqueryui.com, demo, parsisiųsti, puslapio temų keitimas su jQuery UI

Komentarai
Paieška
Tik registruoti vartotojai gali rašyti komentarus!

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

bottom
top

Reklamos

joomla, css, html, web dizaino, photoshop, pascal forumai
  • Topai.eu - Svetainių katalogas
  • Top.Biciuliai.Net
  • Top.Ob.Lt
  • Hey.lt - Nemokamas lankytojų skaitliukas

Naujausi

Skaitomiausi


bottom

Dizainą sukūrė: Neshas ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- Privertė veikti: Primatas
parašyti administracijai
Manualai.lt 2008-2009

t http://manualai.lt/index.php?option=com_content&view;=section&layout;=blog&id;=7&Itemid;=195