1 / 9

JQuery

JQuery. Jan Krňoul carney @civ. zcu.cz. Co je JQuery. Javascriptová knihovna (malá a jednoduchá) John Resig , 2006, neobtěžující javascript ( unobstructive ) Obsahuje podporu pro Výběr DOM elementů Manipulaci s DOMem Události Práce s CSS

rollin
Download Presentation

JQuery

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. JQuery Jan Krňoulcarney@civ.zcu.cz

  2. Co je JQuery • Javascriptová knihovna (malá a jednoduchá) • John Resig, 2006, neobtěžující javascript (unobstructive) • Obsahuje podporu pro • Výběr DOM elementů • Manipulaci s DOMem • Události • Práce s CSS • Ajax, základní efekty, zjištění prohlížeče… • Pluginy • Odstínení od prohlížeče • www.jquery.com • Tutoriály, dokumentace, pluginy, … • www.visualjquery.com

  3. Co JQuery není • Zaměření JQuery – úpravy DOM • Neobsahuje složité efekty • Neobsahuje GUI prvky (taby, stromečky, tabulky, …), žádné komplexní komponenty • Neobsahuje ‚užitečné metody‘ které se netýkají DOMu a HTML/CSS/JS … • Vysokoúrovňový kód • JQuery je nástroj na zjednodušení vlastního vývoje • Existence pluginů – obrovské množství • Validace formulářů, GUI komponenty i celé aplikace (galerie, …) • JQueryUI

  4. JQuery objekt • Základem práce s JQuery je tzv. JQuery objekt • JQuery(…), $(…) – zkratka • Případně JQuery.(…), $.(…) • $(CSS selektor,kontext ) • $("div#myid").show(); • $(html, dokument) • $("<div><p>Hello</p></div>").appendTo(document); • $(DOM elementy) • $(document.body).css( "background", "black" ); • $(callback); • $(function() {alert(…)} • Každé volání vrací objekt JQuery – volání lze řetězit • $("div.test").add("p").addClass("blue").show() • Případně vrací kolekci objektů $("div")…

  5. JQuery, metody, selektory • Selektory • #id, .třída, >, +, :pseudotřídy, • [atribut], [atribut=hodnota], základní podpora pro XPath • Události • Všechny běžné (ready, click, mouseover) • Jednoduchá registrace zbylých (bind, unbind) • Live events – i budoucí události • Registrace reakce na událost, i její programové vyvolání

  6. JQuery, metody, selektory 2 • Manipulace s DOMem • Metody html() a text() • Žádný parametr zjištění, jeden nastavení • Úpravy atributů a jejich hodnot • Attr(name), attr(name, value) • Jeden parametr zjištění, dva nastavení • Css(name), css(name, value) • Procházení DOMu • Next(), prev(), parent(), …

  7. Nejběžnějsí použití • $(function() {…}); zkratka pro ready událost nad dokumentem • Oddělení událostí od HTML • <a onclick=„..“ vs. <a.. $(‚a‘).click(…) • Click, mouseover, submit, blur, select,… • Manipulace s DOMem • $(‚div‘).append(‚<p>ahoj</p>‘); • After, before, empty • Metody html() a text() nad JQuery • CSS – třídy, vlastnosti • Rozměry (height, width) – odstínění od prohlížeče

  8. Nejběžnějsípoužití 2 • Formuláře • Val(), val(…), checked(), enabled/disabled • Serialize() – jednoduché, plugin • Základní efekty • hide, show, toggle • Slide, fade • Ajax • Utility metody – $.each(), $.browser.version(),

  9. Ajax • $.get(), $.post() • url, data, callback • $.get(‚www.google.com‘, {query:‘jquery‘}, function() {alert(data)}); • $.ajax(options) – name:value (json) • $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", error: function() { … }success: function(msg) { alert( "Data Saved: " + msg); } });

More Related