jQuery, tai ką turi žinoti visi

Dauguma dirba su jQuery ir be jo neįsivaizduoja Back-End dalies, tiesa? Kitiems jQuery gali skambėti kaip mistika. Šiame straipsnyje bus aptariami pagrindiniai jQuery metodai, karkaso panaudojimas ir optimizacija kurie padės naujokams perprasti šiek tiek jQuery karkasą.

Nors dauguma naudoja jQuery kiekvieną, bet tikriausiai atrasite atrasite šiame straipsnyje išvardintų patarimų kurių tikrai nežinojote.

$(document).ready()

Šį metodą, ar kaip čia jį pavadinus, naudojasi visi kas naudoja ir jQuery ir tikrai nereikia aiškinti ką tai būtent atlieka. Nors pradedantiesiems reikėtų žinoti, tai, jog viskas kas yra šiame metode, vykdoma tik tuomet kai yra pilnai užkraunamas puslapis. Štai mažas pavyzdys kaip tai atrodo:

$(document).ready(function() {
     alert("Puslapis užkrautas");
});

Kodas atrodo paprastas, bet tą patį kodą galime parašyti ir kitu variantu:

$(function() {
   alert("Puslapis užkrautas");
})

Minimali DOM manipuliacija

Keistas tas žodis manipuliacija, sunku parašyti ir jį suprasti. Trumpai tariant, reikia kuo mažiau naudoti DOM selectorius, ir nevykdyti jų be proto. Žinoma selectoriai mūsų išsigelbėjimas ir paprastas jų panaudojimas, bet per didelis jų panaudojimas gali priversti jūsų aplikaciją veikti labai lėtai.

Pirmiausia geriausias variantas yra naudoti #ID, vietoj .class selectorių, nes tai užtrunka kol jQuery „perbėga“ per visą puslapį ir suranda jūsų norimą .class.

Antras dalykas, kaip minėjau, be proto naudojamas jQuery selectorių kiekis. Štai paprastas pavyzdys dažniausiai daroma klaida:

for (i = 0; i < 1000; i++) {  
    var objektas = $('.klase');  
    objektas.append('Numeris ' + i);  
}

Dabar įsivaizduokite, 1000 kartų jQuery turės „perbėgti“ per visą jūsų puslapį, susirasti reikiamą CSS klasę, atlikti kažkokius veiksmus ir vėl iš naujo. Nelogiška?

Geriau prieš ciklą naudoti jau nustatytą objektą, ir tik tuomet atlikti veiksmus su juo:

var objektas = $('.myList');  
for (i = 0; i < 1000; i++) {  
    objektas.append('Numeris ' + i);  
}

Žinoma ir tai nėra pats geriausias variantas. Kam naudoti append metodą kiekvieną kartą? Paprasčiau būtų visą surinktą informaciją iškart patalpinti į objektą:

var objektas = $('.myList');  
var sarasas = '';  
for (i = 0; i < 1000; i++) {  
    sarasas += '<li>Numeris ' + i + '</li>';  
}  
objektas.html(sarasas);

jQuery seelctoriaus nurodymai

Nors straipsnis labiau tinkantis naujokams, bet kiek iš jūsų dirbančių jau su jQuery naudojate selectoriaus papildomus nurodymus? Turbūt maža dalis, netgi populiarieji jQuery įskiepiai ne visi tai naudoja.

Štai paprastas pavyzdys kaip dauguma „paima“ objektą iš DOM:

var objektas = $(".class");

O dabar įsivaizduokim DOM virš 1000 elementų. Rezultatas yra apie 1-3 sekundes apimantis elemento suradimas, jo gavimas ar apdorojimas. Tai tikrai nemažai, o kas naudoja senesnius kompiuterius, skaičius turbūt gali kilti dar labiau.

jQuery selectorius kaip minėjau pereina per visą puslapį kol suranda ką jam reikia.

Kitas variantas yra nurodyti jQuery būtent kur ieškoti norimo elemento. Tarkim mes turime tokį HTML:

<div class="testas">
     <ul class="testas_ul">
          <li id="test_ul_id">Testas</li>
     </ul>
</div>

Taigi norėdami paimti būtent

elemntą, galime apsirašyti taip:

var objektas = $("#testas_ul_id",$("#testas_ul"));

var objektas = $("#testas_ul_id",$("#testas_ul"));

jQuery grandinės

Vienas iš geriausių jQuery savybių, kad viską galime sujungti į vieną visumą ir taip sutaupyti laiko ir kodo. Būna, kad kartais kodas būna parašytas tokiu principu:

$("#id").addClass("parodyti"); // setTimeout ar setInterval $("#id").removeClass("parodyti"); $("#id").addClass("uzdaryti");

$("#id").addClass("parodyti"); // setTimeout ar setInterval $("#id").removeClass("parodyti"); $("#id").addClass("uzdaryti");

Nors atrodo nieko blogo nėra, bet visą šį kodą galime surašyti į vieną eilutę ir taip sutaupyti laiko ir kodo:

$("#id").addClass("parodyti").delay(500).removeClass("parodyti").addClass("uzdaryti"); // Žinoma jei norima parodyti arba uždaryti elementą užtenka ir: $("#id").show().delay(500).hide();

$("#id").addClass("parodyti").delay(500).removeClass("parodyti").addClass("uzdaryti"); // Žinoma jei norima parodyti arba uždaryti elementą užtenka ir: $("#id").show().delay(500).hide();

Mindaugas

IT specialistas, PHP programuotojas. Sritys: PHP, MySQL, JavaScript, Ajax, jQuery, Arduino, (x)HTML, CSS, XML

More Posts - Website

Nėra susijusių įrašų.

Žymos: jquery