1 / 47

Professzionális kliens oldali webfejlesztés jQuery alapokon

Professzionális kliens oldali webfejlesztés jQuery alapokon. Gincsai Gábor. gincsai@aut.bme.hu. BME - AAIT. A jQuery létjogosultsága, célja és koncepciója Selectorok , HTML manipuláció, események kezelése AJAX és a jQuery Pluginek jQuery UI jQuery templates Data Link.

neola
Download Presentation

Professzionális kliens oldali webfejlesztés jQuery alapokon

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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…

More Related