Straipsnio aktualumas
Šiame pranešime norėčiau pasidalinti stebėjimais apie JQuery biblioteką. Šiame pranešime rasite trumpą aprašymą ir vertinimą šios patogios bibliotekos. Taip pat bus pateikti elementarūs darbo su JQuery pavyzdžiai, kaip ši biblioteka naudojama, kokių parametrų jei reikia. Pačiam nemažai tenka programuoti su JQuery biblioteka ir galiu pasakyti, kad ši biblioteka labai palengvina darbą, kuriant vartotojo sąsajas internetiniam puslapiam.
Kodėl verta naudotis JQuery biblioteka?
JQuery palyginus nedidelė biblioteka, kuri paremta keliais paprastais ir protingais principais. Dirbant su „grynomis“(ang. RAW) Javascript ar DOM programavimo kalbomis, kyla nemažai sunkumų ir iššūkių valdant interneto naršyklių specifinius veiksmus. JQuery biblioteka suteikia nemažai priemonių darbui su interneto naršyklių aplinkomis. Ši biblioteka yra tarsi aukso vidurys tarp dydžio, suteikiamo priemonių rinkinio ir lengvo šių priemonių panaudojimo. JQuery padės pasiekti ženklius produktyvumo pakitimus, bei bus lengvai išmokstama. Ši priemonė turi nemažą potencialą stipriai pakeisti kliento pusės kūrimo darbus su sudėtingomis vartotojo sąsajomis ir „front end“ logika Javascript bibliotekoje[2].
JQuery biblioteka gali būti aktyvuota bet kokiame internetiniame puslapyje pridėjus HTML SCRIPT elementą su nurodytu “src” parametru, kuriame kelias iki bibliotekos serveryje. Pvz.:
<script type="text/javascript" src="jquery.js"></script>
Šis įrankis turi nedidelę biblioteką su „Document Object Model“(DOM), lengvu priėjimu prie AJAX, be didelio išsiplėtimo ir animacijos pagrindus. Standartinė JQuery biblioteka užima tik 15Kb, bet joje yra mechanizmas kuris leidžia šią biblioteką lengvai praplėsti naujomis funkcijomis , dažniausiai jos vadinamos „plugin‘s“. Standartinė biblioteka palaiko CSS 1-3 , X-Path pagrindus, dirba su Firefox 1+, Internet Explorer 5,5+, Safari 1,3+ ir Opera 8.5+. Viskas JQuery priemonėse yra HTML ir DOM. Tad prieš pradedant darbą su šia biblioteka, dokumentas turėtų būti pilnai užkrautas, tik tada bus galima naudotis priemonėmis. Tai gali būti padaryta pasitelkiant įvykius. „Ready“ yra pirmasis įvykis, kuris aktyvuojamas, kai dokumentas yra pilnai užkrautas.
$(document).ready(function() {
// kodas
});
Biblioteka elegantiškai suranda ir leidžia pradėti dirbti su HTML elementais, pasinaudojus labai gera „parinkimo“ („application programming interface“ -> API), kuri leidžia surasti HTML elementus ir su jais atlikti veiksmus. Viskas gali būti apjungta labai paprastai, tarsi kokia grandininė reakcija, iš vienos komandos yra iškviečiama kita komanda ir t.t. Pavyzdžiui, šiame pavyzdyje vienos eilutės kodas randa visus <div> elementus puslapyje, kurie turi CSS klasę „slide“ ir tada pasitelkus animacijos funkcijas, jie pamažu yra panaikinami[2].
$(“div.slide”).slideup(‘slow’).addClass(“removed”);
Ką galima gauti iš JQuery?
DOM elementų parinkimas Galima surasti/pasirinkti DOM elementus pasinaudojus JQuery „selector“ API, kuri leidžia atlikti viskas greičiau ir našiau. Ši biblioteka naudoja CSS 3.0 su tam tikrais išplėtimais pasirenkant vieną ar daugelį elementų iš HTML dokumento. Su CSS pagalba galima parinkti elementą pasinaudojus elemento ID, CSS klase, atributų filtru, santykiais su kitais elementais arba pasitelkus sąlygų filtrą. Paprastoje Javascript kalboje labai sunku parinkti 2 stulpelį LI elementuose HTML dokumente. Su JQuery tai pasiekiama parašius paprastą eilutę:
$("#liEntries li:nth-child(2)");
Visi „selectors“ gali būti sudėti į JQuery objektą vadinama „wrapped set“. Viskas bus saugojama masyvo principu paremtoje struktūroje. „Wrapped set“ operacijos Tikrasis pranašumas „wrapped set“ pasireiškia, kai operacijos turi būti atliktos visiems parinktiems DOM elementams. JQuery.fn turi daugiau nei 100 funkcijų, kurios leidžia dirbti su parinktais DOM elementais. Jeigu mes norime pakeisti tarkim nelyginių eilučių stilių ar specifinių eilučių, tai labai lengva padaryti dinamiškai. Klasių pavadinimai taip pat dinamiškai gali būti priskirti. Keli metodai leidžia naudotis „get“ ir „set“ operacijomis skirtomis .CSS(). Elementų atributai taip pat gali būti iškviesti, pakeisti pasinaudojus .ATTR(), .VAL(), .TEXT(). Elementus galima klonuoti, kad būtų galima juos perkelti į kitus HTML dokumentus arba ,kad turėti originalią versiją elemento prieš atliekant pakeitimus. „Wrapped set“ operacijos yra grandininės, kurios gali būti praplečiamos .FIND(), .FILTER() arba .ADD() metodais[2].
Įvykiai JQuery bibliotekoje
Įvykiai bibliotekoje yra valdomi labai našiai ir naudingai. Javascript DOM manipuliacijos skirtos AJAX yra atliekamos Async iškvietimais, kas kelia problemų dirbant su skirtingomis naršyklėmis. JQuery siūlo labai lengva mechanizmą valdant įvykius ir turi bendrą įvykių modelį visoms naršyklėms.
JQuery „Pulgin‘s“
JQuery yra kalba su DOM papildymų biblioteka, kuri labiausiai orientuojasi į kertinį funkcionalumą.Visam kitam JQuery siūlo paprastą „Plugin‘s“ API, beveik visas operacijas galima atlikti dirbant su DOM operacijomis. JQuery API leidžia plėsti biblioteką, paprasčiausiai kuriant naujas funkcijas ir perduodant parametrus „wrapped set“. Naudojant šį metodą galima lengvai naudotis „plugin‘s“ , kuriuos bus galima naudoti ir komandų grandinėse. Jei egzistuojantys „plugin‘s“ netenkintų, galima juos susikurti ir pačiam[2].
JQuery ir kitos bibliotekos[3]
JQuery biblioteka ir beveik visi “plugin’s” yra aprašomi JQuery vardu. Globalūs objektai yra saugomi JQuery varde ir neturėtų kilti bėdų su kitomis bibliotekomis(Prototype, Moo Tools ar YUI). Galima peršaukti standartinę funkciją “$” naudojantis JQuery.noconflict() :
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function() {
jQuery("div").hide();
});
// Use Prototype with $(...).
$('HTMLid').hide();
</script>
</head>
<body></body>
</html>
Kita galimybė sukurti JQuery bibliotekai specialų kintamąjį($j):
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function() {
$j("div").hide();
});
// Use Prototype with $(...),
$('HTMLid').hide();
</script>
</head>
<body></body>
</html>
Keletas JQuery naudojamo pavyzdžių[1]
Elementų parinkimas:
$("div"); // surenka visus div elementus
$("#myElement"); // parenka vieną elementą su ID “myElement”
$(".myClass"); // surenka elementus su klase “myClass”
$("p#myElement"); // parenka paragrafo elementą su ID “myElement”
$("p > a"); // surenka <a> elementus kurie yra pragrafo vaikai
$("input[type=text]"); // surenka <input> elementus nurodyto tipo
$("a:first"); // parenka pirmąjį <a> elementą dokumente
$(":animated"); // parenka elementus, kurie yra animuojami
$(":button"); // parenka bet kokius <button> elementus
$(":radio"); // parenka <radio> elementus
$(":checkbox"); // parenka <checkbox> elementus
$(":checked"); // parenka <checkbox> ir <radio> pažymėtus elementus
$(":header"); // parenka “header” elementus...h1,h2,h3...
Darbas su elementų CSS klasėmis:
$("div").addClass("content");
// pridedama klasė “content” visiems <div> elementams
$("div").removeClass("content");
// panaikinama klasė “content” iš visų <div> elemenentų
$("div").toggleClass("content");
// pridedama klasė “content” visiems <div> elementams(jeigu neturėjo) arba panaikinama klasė “content” iš visų <div> elementų(kurie turėjo šia klasę)
//Jeigu elementas su ID “myElement” turi klasę “content” atliekami veiksmai
if ($("#myElement").hasClass("content")) {
// kažkas atliekama
}
$("p").css("width", "400px"); // paplatinami visi paragrafai
$("#myElement").css("color", "blue") // teksto spalva pakeičiama į mėlyną elemento su ID “myElement”
$("ul").css("border", "solid 1px #ccc") // pridedami rėmai visiems sąrašams
Darbas su įvykiais:
$("a").click(function() {
//Kažkas atliekama, kai <a> elementas yra nuspaudžiamas
});
Kiti dažniausiai vartojami įvykiai: blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.
Pridėjimas, šalinimas ir apjungimas elementų bei turinio:
var myElementHTML = $("#myElement").html();
// kitamajam priskiriamas visas elemento html tekstas
var myElementHTML = $("#myElement").text();
// kintamajam priskiriamas tik elemento tekstas
$("#myElement").html("<p>This is the new content.</p>");
// elemento turinys pakeičiamas nurodytu
$("#myElement").text("This is the new content.");
// teksto turinys pakeičiamas nurodytu
$("#myElement").append("<p>This is the new content.</p>");
// prie elemento pabaigos prijungiamas naujas turinys.
$("p").append("<p>This is the new content.</p>");
// prijungiamas vienodas turinys visiems paragrafams
Apibendrinimas
Nors atrodytų, kad dirbant su JQuery yra viskas idealu, bet yra ir minusų: skaičių formatavimas, datos formatavimas ir lango palaikymas kartu su Javascript palaikymu. Tai nėra visiškai idealus įrankis spręsti visoms problemoms su kuriomis susiduriama dirbant su Javascript arba DOM. Bet kam reikia lengvo įrankio keičiant savo HTML dokumento vartotojo sąsają, darant ją vartotojui draugiškesnę ir našesnę tai tikrai vertas dėmesio įrankis[2].
Šaltinių sąrašas
- http://www.impressivewebs.com/jquery-tutorial-beginners.pdf “jQuery Tutorial for Beginners: Nothing But the Goods” [žiūrėta 2012.05.01] prieiga per internetą.
- http://blogs.vishwak.com/whitepapers/wp-content/uploads/2009/02/Why-JQuery-a-whitepaper-from-Vishwak-Solutions.pdf „Why JQuery? Vishwak Lab’s white paper“; G.Venkat (GV) Vishwak Solutions Pvt. Ltd; 2009; [žiūrėta 2012.05.01] prieiga per internetą.
- http://docs.jquery.com/How_jQuery_Works “JQuery Documentation”” [žiūrėta 2012.05.01] prieiga per internetą.
