jQuery

1 / 23

Technologie Internetu. JQuery

Aleksander Denisiuk (denisjuk@pja.edu.pl)

Polsko-Japońska Akademia Technik Komputerowych Wydział Informatyki w Gdańsku

ul. Brzegi 55, 80-045 Gdańsk

JQuery

Wprowadzenie Dostęp Modyfikacjia Łańcuch 2 / 23 Najnowsza wersja tego dokumentu dostępna jest pod adresem

Wprowadzenie

Wprowadzenie JQuery Instalacja Obiekt JQuery Dostęp Modyfikacjia Łańcuch 3 / 23

JQuery

Wprowadzenie JQuery Instalacja Obiekt JQuery Dostęp Modyfikacjia Łańcuch 4 / 23

✔ Legalna (MIT) biblioteka w JavaScript do zastosowych

internetowych

✘ Manipulacja DOM

✘ Obsługa zdarzeń

✘ AJAX

✘ Animacja i inne efekty

✘ Dużo wtyczek

✘ Uwzględnia niestandadrowe przeglądarki (wersja 2.x

wymaga IE9+)

✘ Ułatwia(?) napisanie kodu

Instalacja

Wprowadzenie JQuery Instalacja Obiekt JQuery Dostęp Modyfikacjia Łańcuch 5 / 23 ✔ Pobrać z _{http://jquery.com/download/} ✔ Wykorzystać CDN <script src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> ✘ są inne CDN ✔ Bower:

Obiekt JQuery

Wprowadzenie JQuery Instalacja Obiekt JQuery Dostęp Modyfikacjia Łańcuch 6 / 23 jQuery albo $

Dostęp

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 7 / 23

Dostęp do elementów

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 8 / 23

✔ Po selectorze css (plus kilka rozszerzeń)

$( "p" )

$( "p.intro img" )

$( "ul li:first-child" ) $( "#test")

jQuery( ’table.orders tr:odd’ )

Wynik zapytania

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 9 / 23

✔ Zestaw obiektów jQuery, podobny do tablicy

✔ Ma _length, operator _[] i wiele metod do manipulacji na

elementach

✘ _{$(’p’)[0]} jest elementem DOM ✘ _{$(’p’).eq(0)} jest obiektem jQuery

Dostęp do elementów rodzicielskich

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 10 / 23

✔ _parent() element rodzicielski

✔ _parents() wszysctkie elementy rodzicielskie do _html

✔ _{parentsUntil(elem)} wszystkie elementy rodzicielskie do

elem

$("span").parent(); $("span").parents();

Dostęp do elementów dziecięcych

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 11 / 23

✔ _children() elementy dziecięce (jeden poziom)

✔ _find() wszysctkie elementy dziecięce, pasujące do selectrora

$("ul").children();

$("ul").children("li.class1"); $("div").find("span");

Nawigacja w poziomie

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 12 / 23 siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()

Filtracja

Wprowadzenie Dostęp Dostęp do elementów Nawigacja Modyfikacjia Łańcuch 13 / 23 first() last() filter() not()

Modyfikacjia

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 14 / 23

Dostęp/Zmiana zawartości

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 15 / 23

✔ _text() — zawartość tekstowa elementu

✘ _text(new) — ustaw zawartość tekstową elementu ✔ _html() — zawartość html elementu

✘ _html(new) — ustaw zawartość html elementu ✔ _val() — wartość pola formulaza

✘ _val(new) — ustaw wartość pola formulaza ✔ _attr(at) — wartość atrybutu

✘ _val(at,new) — ustaw wartość atrybutu

✔ _prop(at) — wartość właściwości (selectedIndex, checked,

defaultSelected, etc.)

Callback

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 16 / 23

✔ Wymienione metody mogą mieć jako (drugi) argument funkcję

✘ funkcja ta ma dwa argumenty: numer elementu na liście

oraz starą wartość

$("#test2").html(function(i, origText){

return "Old html: " + origText +

" New html: Hello <em>world!</em> (index: " + i + ")";

Dodawanie treści

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 17 / 23

✔ _prepend() dodaje treść na początku elementu ✔ _append() dodaje treść na końcu elementu

✔ _before() dodaje treść przed elementem ✔ _after() dodaje treść po elemencie

$("p").append("New");

$("p").before("<p>New</p>", "<p>Text</p>");

✔ Utworzenie nowego elementu:

Usuwanie treści

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 18 / 23

✔ _empty() usuwa wszystkie elementy dziecięce

✔ _remove() usuwa wszystkie elementy (razem z dziecięcymi) ✘ _{remove(filter)} usuwa wszystkie elementy pasujące do

filtru

$("ul").empty();

Zmiana clasy

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 19 / 23 ✔ _addClass() ✔ _{removeClass()} ✔ _{toggleClass()} ✔ _hasClass() $("h1, h2, p").addClass("blue"); $("div").removeClass("important"); $("span.toc").toggleClass("visible");

Dostęp/zmiana właściwości css

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 20 / 23

✔ _css(pror) — właściwość css (jak _{getComputedStyle}) ✘ _{css(prop, new)} — ustaw właściwość css

Wymiary

Wprowadzenie Dostęp Modyfikacjia Modyfikacja zawartości Modyfikacja stylów Łańcuch 21 / 23

Łańcuch

Wprowadzenie Dostęp Modyfikacjia Łańcuch Zasada łańcuchowa 22 / 23

Zasada łańcuchowa

Wprowadzenie Dostęp Modyfikacjia Łańcuch Zasada łańcuchowa 23 / 23

✔ Każda metoda zwraca nowy element

✘ Możliwe (a nawet zalecone) jest stosowanie łańcuchów

$(’<li></li>’).text(value).addClass(’clickable’) .click(getShowGenre(value));