Professzionális kliens oldali webfejlesztés jQuery alapokon

1. Professzionális kliens oldali webfejlesztésjQuery alapokon Gincsai Gábor gincsai@aut.bme.hu BME - AAIT

2. A jQuerylétjogosultsága, célja és koncepciója • Selectorok, HTML manipuláció, események kezelése • AJAX és a jQuery • Pluginek • jQuery UI • jQuerytemplates • Data Link • Miről lesz szó…

3. 2006 óta • Nyílt forráskódú JavaScript könyvtár • Egyszerű interakció a HTML-lel • Rengeteg plugin • Microsoft is fejleszt pluginokat • Visual Studióban van IntelliSense támogatás • Kis történelem • The Write Less, Do More, JavaScript Library John Resig

4. Letölthető a jQuery honlapjáról • Van hozzá CDN (Microsoft-os is) • Webes projectekben van. • *.js – Debug verzió • *.min.js – Minimalizált változat • *.vsdoc – VS Inellisensehezkell • Csak 1.4.4-es van a project sablonban • Első használat előtti teendők http://jquery.com

5. CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js • Referenciát kell csak átírni • Ilyenkor nincs vsdoc • NuGetpackage • jQuery (Add Librarypackage) • jQuery.vsdoc (Packagemanager) • Hogyan aktualizáljuk a verziót • CDN, NuGet

6. Hogyan használjuk mindezt hatékonyan? • http://jquerysnippets.codeplex.com/

7. A jQuery koncepciója Mágikus $() függvény Kiválaszt  Cselekszik Láncolhatóság

8. Egyszerű • Minden: $("*") • Tag: $("table") • Id: $("#tableHeader") • Css: $(".active") • Egyszerű és összetett selectorok Összetett • Tag és css: • $("tr.active") • Tag és Id: • $("table#tableHeader") • Id vagy css: • $("#tableHeader, .active")

9. Leszármazottak ( ) • $("#row1 td") • Hierarchikus selectorok

10. Leszármazottak ( ) • $("#row1 td") • Gyerekek (>) • $("tr > td") • Hierarchikus selectorok

11. Leszármazottak ( ) • $("#row1 td") • Gyerekek (>) • $("tr > td") • Következő (+): • $("#cellBB + td") • Hierarchikus selectorok

12. Leszármazottak ( ) • $("#row1 td") • Gyerekek (>) • $("tr > td") • Következő (+): • $("#cellBB + td") • Testvérek (~) • $("#cellAA ~ td") • Hierarchikus selectorok

13. Index alapján • Első/utolsó: $("tr:first") $("tr:last") • Index kisebb/nagyobb mint: $("tr:lt(2)") $("tr:gt(2)") • Index egyenlő: $("tr:eq(2)") • Láthatóság alapján • Látható/rejtett: $("div:visible")$("div:hidden") • Attribútum alapján • Van olyan attribútuma: $("div[id]") • Az attribútum értéke egyenlő: $("div[id='main']") • Az attribútum értéke kezdődik / végződik / tartalmazza: $("div[id^='mai']")$("div[id$='ain']")$("div[id*='ai']") • Szűrések

14. Szelektorok és filterek Selectorok • Jelölőnégyzet $("input:checkbox") • Rádió gomb $("input:radio") • Gomb $(":button") • Szöveg beviteli mező $(":text") Filterek • Bepipált $("input:checked") • Kiválasztott $("input:selected") • Engedélyezett $("input:enabled") • Letiltott $("input:disabled")

15. Legördülő menü kiválasztott elem <selectname="cities"> <optionvalue="1">Budapest</option> <optionvalue="2"selected="selected">Nyíregyháza</option> <optionvalue="3">Debrecen</option> </select> $("select[name='cities'] option:selected").val()

16. Selectorok és filterek

17. HTML dokumentum bejárása

18. A selectrokjQuery objektumok tömbjét adják vissza. • A length visszaadja, hogy mennyi elemet választottunk ki • Fontos tudni, hogy DOM vagy jQueryelemet kapunk • jQuery vagy DOM elem $("div").length; $("div").get(2); $("div")[2] DOM $("div").eq(2); jQuery

19. Az each(fn) végighívja a megadott függvényt a lista minden elemén • A függvény tartalmazhatja a sorszámot, de nem kötelező. fn() vagy fn( index ) • Egy tábla minden páros sorához hozzáadja az oddcssosztályt • each (fn) $("tabletr").each( function(i){ if(i % 2) $(this).addClass("paros"); });

20. Szülő(k): .parent(expr) .parents(expr) • Testvérek: .siblings(expr) • Következő testvér(ek): .next(expr) .nextAll(expr) • Előző testvér(ek): .prev(expr) .prevAll(expr) • Gyerekek: .children(expr) • Leszármazottak: .find(expr) • HTML bejárást segítő függvények

21. Mit csinál az alábbi kód? $("trtd").each( function(){ if ( $(this).is(":first-child") ) $(this).addClass("firstCol"); }); $("p").find(".header").hide(); $(".header", $("p")).show();

22. Mennyire láncolható? $("<li><a></a></li>") .find("a") .html("About") .attr("href", "/Home/About") .andSelf() .addClass("menu") .end() .end() .appendTo("#menu");

23. HTML manipuláció

24. Jelölőnégyzet értékének lekérdezése $("input:checkbox:checked").val(); • Szövegdoboz értékének beállítása $(":text[name='txt']").val("Hello"); • Listaelemek beállítása (kiválasztás, vagy bejelölés) $("#lst").val(["NY","IL","NS"]); • HTML tartalom beállítása $("p").html("<div>Hello $!</div>"); $("div.a").text($("div.b").html()); • HTML elemek értéke • val(), html(), text()

25. CSS osztály hozzáadás és leszedése $("p").removeClass("blue").addClass("red"); $("div").toggleClass("main"); • Lekérdezés, hogy rendelkezik-e egy CSS osztállyal if ($("div").hasClass("main")) { //… } • CSS attribútum lekérdezése / beállítása $("div").css("background-color"); $("div").css("float","left"); • CSS osztályok manipulálása • addClass(), removeClass(), toggleClass(), hasClass()

26. Új HTML elem beszúrása: append(To) / prepend(To) $("h1").append("<li>Hello$!</li>"); $("<li/>").html("1").prependTo("ul"); • HTML elem lecserélése $("h1").replaceWith("<div>Hello</div>"); $("<div>Hello</div>").replaceAll("h1"); • HTML elemek beszúrása / módosítása • append(), prepend(), replaceWith(), replaceAll()

27. Csere megmaradó tartalommal $("h3").each(function() { $(this).replaceWith("<div>" + $(this).html() + "</div>"); });

28. Kiválasztott elem tartalmának törlése • $("#tableHeader").empty() • Kiválasztott elemek törlése • $("p.header").remove() • $("p").remove(":not(.red)") • Kiválasztott elemek pozíciójának módosítása • $("p").remove().appendTo("#main") • HTML elemek törlése • empty(), remove()

29. HTML attribútumok kezelése $("a").attr("href","home.htm"); $("button").removeAttr("disabled"); $("img").attr({"src": "/images/smile.jpg","alt": "Smile"});$("div").css({"color":"blue","margin-right": "10px"marginLeft: "10px"});

30. Szélesség lekérdezésének lehetőségei: • Elem szélessége: .width() .height() • Belső szélesség: .innerWidth() .innerHeight() • Szélesség a kerettel: .outerWidth() .outerHeight() • Teljes szélesség: .outerWidth(true) .outerHeight(true) • Pozíció meghatározása • A dokumentumtól: $("div").offset().top; • A szülő elemtől: $("div").position().left; • Csúszka pozíció: $(window).scrollTop(); Alapértelmezés szerint minden pixel (px) • Szélesség és pozíció

31. HTML manipuláció

32. Események

33. Böngésző események • error(), resize(), scroll() • Dokumentum betöldősése • load(), ready(), unload() • Esemény fel és leiratkozások • (un)bind(), (un)delegate(), one(), live(), die(), trigger(), proxy • Űrlap eseményei • blur(), change(), focus(), select(), submit() • Billentyűzet események • focusin(), focusout(), keydown(), keyup(), keypress() • Egér események • click(), dbclick(), hover(), mousedown(), mouseup(), mouseenter(), mouseleave(), mousemove(), moseover(), toggle() • jQuery események

34. A falsevisszatérési érték ugyanaz, mintha meghívnánk a .preventDefault() és .stopPropagation() • .bind()mindig lefut, .one()első lefutás után leiratkozik automatikusan az eseményről. • .live() azokra az elemekre is lefut, amit később adunk az oldalhoz. A .die()-al tudjuk eltávolítani. • Feliratkozás egy elem eseményre • preventDefault(), stopPropagation(), bind(), one(), live() $(document).ready(function() { $('#foo').bind('click', function (event) { alert('Katt(' + event.pageX + ', ' + event.pageY+ ')' ); }); });

35. Tetszőleges eseményt a .trigger() tud kiváltani • Böngésző eseményekre is működik • Saját eseményeket is kiválthatunk • A .trigger()-rel kiváltott események is felgyűrűznek. • A .triggerHandler()-rel is kiválthatunk eseményeket, ám • Ezek nem gyűrűznek tovább és nem fut le a default eseménykezelő • Csak az első egyező esemény fog lefutni • Események kiváltása manuálisan • trigger(), triggerHandler() $("div").trigger("click"); $("#new").click(function () { $("input").triggerHandler("focus"); });

36. jQuery események

37. AJAX és a jQuery

38. Egy oldal tartalmának letöltése egy HTML elembe • .innerHTML-t használ, (<html>, <title>, <head> szűrés) • Sameorigin szabály • Ha adunk át paramétert, akkor POST egyébként GET. • Az oldal egy darabjának letöltése is képes • Egy oldal letöltése • .load() $("div").load("test.aspx"); $("#content").load("getcontent.aspx",{"i":"33", "type":"main" } ); $("div").load("test.php#mainDiv");

39. Bonyolult testre szabott AJAX-os lekérdezésekhez. • global: globális események ne süljenek el (ajaxStart/ajaxStop) • dataType: xml, json(p), html, text, script • $.ajax() bodyContent = $.ajax({ url: "script.php", global: false, type: "POST", data: ({ id: this.getAttribute('id') }), dataType: "html", async: false, success: function (msg) { alert(msg); } } ).responseText;

40. $.get(): HTTP GET • $.post(): HTTP POST • $.getScript(): Szkriptet tölt le és futtat • $.getJSON(): JSON adathalmazt tölt le • $.ajax() rövidebb / egyszerűbb formái

41. Widget-ek • Accordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs • Interakciók • Draggable, Droppable, Resizable, Selectable, Sortable • Effektek, animációk • Segédosztályok • Position • jQuery UI Aktuális verzió: 1.8.11 • http://jqueryui.com

42. Egyirányú adatkötés sablonokkal • jQueryTemplatesBETA • http://api.jquery.com/category/plugins/templates/

43. jQueryTemplates <!-- Helyőrző a teljes listához --> <ul id="movieList"></ul> <!-- Egy elem sablonja, helyőrzőkkel az adatoknak --> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script> <script type="text/javascript"> // A megjelenítendő adatok var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; // Renderelés $( "#movieTemplate" ).tmpl( movies ).appendTo( "#movieList" ); </script>

44. Objektumok tulajdonságainak egymáshoz kötése • Ha az egyik változik, frissül a másik • jQuery Data Link • http://api.jquery.com/category/plugins/data-link/ varhallgato = {};// Adat objektum $("form").link(hallgato);// Kötés egy űrlaphoz $("[name=kernev]").val("Béla");// Űrlap kitöltése alert(hallgato.kernev);// Adat objektumba bekerül

45. jQueryTemplate és AJAX

46. Egyszerű, könnyen tanulható • Gyorsan készíthető gazdag felhasználói felület • Kész pluginek használata • Kiterjeszthető • ASP.NET MVC-velis használható • Ajaxos hívások esetén közvetlenül hívható controller • JsonResult • Folyamatosan fejlődik • Összefoglalás • Amiről szó volt…