Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
KiadtaErika Oroszné Megváltozta több, mint 10 éve
1
Professzionális kliens oldali webfejlesztés jQuery alapokon
Gincsai Gábor Egy markup -> sötét múlt elrejtése (kompatibilitás) BME - AAIT
2
Miről lesz szó… 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
3
Kis történelem The Write Less, Do More, JavaScript Library 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 John Resig
4
Első használat előtti teendők
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 Inellisensehez kell Csak es van a project sablonban
5
Hogyan aktualizáljuk a verziót
CDN, NuGet CDN: Referenciát kell csak átírni Ilyenkor nincs vsdoc NuGet package jQuery (Add Library package) jQuery.vsdoc (Package manager)
6
Hogyan használjuk mindezt hatékonyan?
7
Kiválaszt Cselekszik
A jQuery koncepciója Mágikus $() függvény Kiválaszt Cselekszik Láncolhatóság
8
Egyszerű és összetett selectorok
Minden: $("*") Tag: $("table") Id: $("#tableHeader") Css: $(".active") Összetett Tag és css: $("tr.active") Tag és Id: $("table#tableHeader") Id vagy css: $("#tableHeader, .active")
9
Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1
10
Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1
11
Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Következő (+): $("#cellBB + td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1
12
Hierarchikus selectorok
Leszármazottak ( ) $("#row1 td") Gyerekek (>) $("tr > td") Következő (+): $("#cellBB + td") Testvérek (~) $("#cellAA ~ td") A B C - 1-2 1-0 2-2 3-2 1-1 0-1
13
$("div[id^='mai']") $("div[id$='ain']") $("div[id*='ai']")
Szűrések 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']")
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
<select name="cities"> <option value="1">Budapest</option> <option value="2" selected="selected">Nyíregyháza</option> <option value="3">Debrecen</option> </select> $("select[name='cities'] option:selected").val()
16
Selectorok és filterek
17
HTML dokumentum bejárása
18
jQuery vagy DOM elem A selectrok jQuery objektumok tömbjét adják vissza. A length visszaadja, hogy mennyi elemet választottunk ki Fontos tudni, hogy DOM vagy jQuery elemet kapunk $("div").length; $("div").get(2); $("div")[2] DOM $("div").eq(2); jQuery
19
each (fn) 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 odd css osztályt $("table tr").each( function(i){ if (i % 2) $(this).addClass("paros"); });
20
HTML bejárást segítő függvények
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)
21
Mit csinál az alábbi kód?
$("tr td").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
HTML elemek értéke val(), html(), text()
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());
25
CSS osztályok manipulálása
addClass(), removeClass(), toggleClass(), hasClass() 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");
26
HTML elemek beszúrása / módosítása
append(), prepend(), replaceWith(), replaceAll() Ú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");
27
Csere megmaradó tartalommal
$("h3").each(function() { $(this).replaceWith("<div>" + $(this).html() + "</div>"); });
28
HTML elemek törlése empty(), remove()
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")
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
Alapértelmezés szerint minden pixel (px)
Szélesség és pozíció 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)
31
HTML manipuláció
32
Események
33
jQuery események Böngésző események Dokumentum betöldősése
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()
34
Feliratkozás egy elem eseményre
preventDefault(), stopPropagation(), bind(), one(), live() A false visszaté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. $(document).ready(function () { $('#foo').bind('click', function (event) { alert('Katt (' + event.pageX + ', ' event.pageY + ')' ); });
35
Események delegálása A .delegate() működése hasonló a .live() műköséséhez. Annyiban tér el, hogy a gyökér elemet, amihez a handler kötődik mi adjuk meg. $("table").delegate("td", "hover", function () { $(this).toggleClass("hover"); }); $("table").each(function () { $("td", this).live("hover", function () { $(this).toggleClass("hover"); }); });
36
$("div").trigger("click");
Események kiváltása manuálisan trigger(), triggerHandler() 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 $("div").trigger("click"); $("#new").click(function () { $("input").triggerHandler("focus"); });
37
jQuery események
38
AJAX és a jQuery
39
$("div").load("test.php #mainDiv");
Egy oldal letöltése .load() Egy oldal tartalmának letöltése egy HTML elembe .innerHTML-t használ, (<html>, <title>, <head> szűrés) Same origin szabály Ha adunk át paramétert, akkor POST egyébként GET. Az oldal egy darabjának letöltése is képes $("div").load("test.aspx"); $("#content").load("getcontent.aspx", {"i":"33", "type":"main" } ); $("div").load("test.php #mainDiv");
40
$.ajax() 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 bodyContent = $.ajax({ url: "script.php", global: false, type: "POST", data: ({ id: this.getAttribute('id') }), dataType: "html", async: false, success: function (msg) { alert(msg); } } ).responseText;
41
$.ajax() rövidebb / egyszerűbb formái
$.get(): HTTP GET $.post(): HTTP POST $.getScript(): Szkriptet tölt le és futtat $.getJSON(): JSON adathalmazt tölt le
42
jQuery UI Aktuális verzió: 1.8.11
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
43
jQuery Templates BETA Egyirányú adatkötés sablonokkal
44
jQuery Templates <!-- 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" );
45
jQuery Data Link http://api.jquery.com/category/plugins/data-link/
Objektumok tulajdonságainak egymáshoz kötése Ha az egyik változik, frissül a másik var hallgato = {}; // 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
46
jQuery Template és AJAX
47
Összefoglalás Amiről szó volt… Egyszerű, könnyen tanulható
Gyorsan készíthető gazdag felhasználói felület Kész pluginek használata Kiterjeszthető ASP.NET MVC-vel is használható Ajaxos hívások esetén közvetlenül hívható controller JsonResult Folyamatosan fejlődik
Hasonló előadás
© 2024 SlidePlayer.hu Inc.
All rights reserved.