Professzionális kliens oldali webfejlesztés jQuery alapokon

IT-DEV-CON – 2011. 04. 06.

Professzionális kliens oldali webfejlesztés jQuery alapokon

Gincsai Gá[email protected] - AAIT

IT-DEV-CON

A jQuery létjogosultsága, célja és koncepciójaSelectorok, HTML manipuláció, események kezeléseAJAX és a jQueryPluginek

jQuery UIjQuery templatesData Link

Miről lesz szó…

IT-DEV-CON

2006 óta Nyílt forráskódú JavaScript könyvtárEgyszerű interakció a HTML-lelRengeteg pluginMicrosoft is fejleszt pluginokatVisual Studióban van IntelliSense támogatás

Kis történelemThe Write Less, Do More, JavaScript Library

John Resig

IT-DEV-CON

Letölthető a jQuery honlapjárólVan hozzá CDN (Microsoft-os is)

Webes projectekben van.*.js – Debug verzió*.min.js – Minimalizált változat*.vsdoc – VS Inellisensehez kellCsak 1.4.4-es van a project sablonban

Első használat előtti teendők

http://jquery.com

IT-DEV-CON

CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js

Referenciát kell csak átírniIlyenkor nincs vsdoc

NuGet packagejQuery (Add Library package)jQuery.vsdoc (Package manager)

Hogyan aktualizáljuk a verziótCDN, NuGet

IT-DEV-CON

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

IT-DEV-CON

A jQuery koncepciója

Mágikus $() függvény

Láncolhatóság

Kiválaszt Cselekszik

IT-DEV-CON

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")

IT-DEV-CON

Leszármazottak ( ) $("#row1 td")

Hierarchikus selectorok

A B C

A - 1-2 1-0

B 2-2 - 3-2

C 1-1 0-1 -

IT-DEV-CON


Gyerekek (>)$("tr > td")


A B C

A - 1-2 1-0

B 2-2 - 3-2

C 1-1 0-1 -

IT-DEV-CON



Következő (+): $("#cellBB + td")


A B C

A - 1-2 1-0

B 2-2 - 3-2

C 1-1 0-1 -

IT-DEV-CON



Következő (+): $("#cellBB + td")

Testvérek (~) $("#cellAA ~ td")


A B C

A - 1-2 1-0

B 2-2 - 3-2

C 1-1 0-1 -

IT-DEV-CON

Index alapjánElső/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ánLátható/rejtett: $("div:visible") $("div:hidden")

Attribútum alapjánVan 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

IT-DEV-CON

Szelektorok és filterekSelectorok

Jelölőnégyzet$("input:checkbox")

Rádió gomb$("input:radio")

Gomb$(":button")

Szöveg beviteli mező$(":text")

FilterekBepipált$("input:checked")

Kiválasztott$("input:selected")

Engedélyezett$("input:enabled")

Letiltott$("input:disabled")

IT-DEV-CONLegö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()

Demó

IT-DEV-CON

Selectorok és filterek

IT-DEV-CON

HTML dokumentum bejárása

IT-DEV-CON

A selectrok jQuery objektumok tömbjét adják vissza.

A length visszaadja, hogy mennyi elemet választottunk kiFontos tudni, hogy DOM vagy jQuery elemet kapunk

jQuery vagy DOM elem

$("div").length;

$("div").get(2);$("div")[2]

$("div").eq(2);DOM jQuer

y

IT-DEV-CON

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

each (fn)

$("table tr").each(function(i){

if (i % 2) $(this).addClass("paros");});

IT-DEV-CON

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

IT-DEV-CONMit 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();

IT-DEV-CONMennyire láncolható?

$("<li><a></a></li>").find("a")

.html("About")

.attr("href", "/Home/About")

.andSelf().addClass("menu")

.end().end()

.appendTo("#menu");

IT-DEV-CON

HTML manipuláció

IT-DEV-CON

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ékeval(), html(), text()

IT-DEV-CON

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ásaaddClass(), removeClass(), toggleClass(), hasClass()

IT-DEV-CON

Ú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ásaappend(), prepend(), replaceWith(), replaceAll()

IT-DEV-CONCsere megmaradó

tartalommal$("h3").each(function(){

$(this).replaceWith("<div>" + $(this).html() + "</div>");

});

IT-DEV-CON

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éseempty(), remove()

IT-DEV-CONHTML 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"});

IT-DEV-CON

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ásaA 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ó

Demó

IT-DEV-CON

HTML manipuláció

IT-DEV-CON

Események

IT-DEV-CON

Böngésző eseményekerror(), resize(), scroll()

Dokumentum betöldőséseload(), ready(), unload()

Esemény fel és leiratkozások(un)bind(), (un)delegate(), one(), live(), die(), trigger(), proxy

Űrlap eseményeiblur(), change(), focus(), select(), submit()

Billentyűzet eseményekfocusin(), focusout(), keydown(), keyup(), keypress()

Egér eseményekclick(), dbclick(), hover(), mousedown(), mouseup(), mouseenter(), mouseleave(), mousemove(), moseover(), toggle()

jQuery események

IT-DEV-CON

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.

Feliratkozás egy elem eseményrepreventDefault(), stopPropagation(), bind(), one(), live()

$(document).ready(function () {$('#foo').bind('click', function (event) {

alert('Katt (' + event.pageX + ', ' + event.pageY + ')' );

});});

IT-DEV-CON

Tetszőleges eseményt a .trigger() tud kiváltaniBöngésző eseményekre is működikSaját eseményeket is kiválthatunkA .trigger()-rel kiváltott események is felgyűrűznek.

A .triggerHandler()-rel is kiválthatunk eseményeket, ámEzek 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álisantrigger(), triggerHandler()

$("div").trigger("click");

$("#new").click(function () { $

("input").triggerHandler("focus"); });

Demó

IT-DEV-CON

jQuery események

IT-DEV-CON

AJAX és a jQuery

IT-DEV-CON

Egy oldal tartalmának letöltése egy HTML elembe.innerHTML-t használ, (<html>, <title>, <head> szűrés)Same origin szabályHa 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");

IT-DEV-CON

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;

IT-DEV-CON

$.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

IT-DEV-CON

Widget-ekAccordion, Autocomplete, Button, Datepicker, Dialog, Progressbar, Slider, Tabs

InterakciókDraggable, Droppable, Resizable, Selectable, Sortable

Effektek, animációkSegédosztályok

Position

jQuery UI Aktuális verzió: 1.8.11http://jqueryui.com

IT-DEV-CON

Egyirányú adatkötés sablonokkal

jQuery Templates BETAhttp://api.jquery.com/category/plugins/templates/

IT-DEV-CONjQuery Templates

<ul id="movieList"></ul>

<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>

IT-DEV-CON

Objektumok tulajdonságainak egymáshoz kötéseHa az egyik változik, frissül a másik

jQuery Data Linkhttp://api.jquery.com/category/plugins/data-link/

var hallgato = {}; // Adat objektum$("form").link(hallgato); // Kötés egy űrlaphoz

$("[name=kernev]").val("Béla"); // Űrlap kitöltésealert(hallgato.kernev); // Adat objektumba bekerül

Demó

IT-DEV-CON

jQuery Template és AJAX

IT-DEV-CON

Egyszerű, könnyen tanulhatóGyorsan készíthető gazdag felhasználói felület

Kész pluginek használataKiterjeszthetőASP.NET MVC-vel is használható

Ajaxos hívások esetén közvetlenül hívható controllerJsonResult

Folyamatosan fejlődik

ÖsszefoglalásAmiről szó volt…

IT-DEV-CON

Professzionális kliens oldali webfejlesztés jQuery alapokon

Documents