jQuery - Polsko-Japońska Akademia Technik Komputerowych

Technologie Internetu. JQuery
Aleksander Denisiuk ([email protected])
Polsko-Japońska Akademia Technik Komputerowych
Wydział Informatyki w Gdańsku
ul. Brzegi 55, 80-045 Gdańsk
28 maja 2016
1 / 23
JQuery
Wprowadzenie
Dostęp
Najnowsza wersja tego dokumentu dostępna jest pod adresem
http://users.pja.edu.pl/~denisjuk/
Modyfikacjia
Łańcuch
2 / 23
Wprowadzenie
JQuery
Instalacja
Obiekt JQuery
Dostęp
Modyfikacjia
Łańcuch
Wprowadzenie
3 / 23
JQuery
Wprowadzenie
JQuery
Instalacja
Obiekt JQuery
Dostęp
Modyfikacjia
Łańcuch
✔
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
Jest bardzo popularna
4 / 23
Instalacja
Wprowadzenie
JQuery
Instalacja
Obiekt JQuery
✔
✔
Pobrać z http://jquery.com/download/
Wykorzystać CDN
<script
src="http://code.jquery.com/jquery-2.1.4.min.js">
</script>
Dostęp
Modyfikacjia
Łańcuch
✘
✔
są inne CDN
Bower:
bower install jquery
5 / 23
Obiekt JQuery
Wprowadzenie
JQuery
Instalacja
Obiekt JQuery
jQuery
albo
Dostęp
Modyfikacjia
$
Łańcuch
6 / 23
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
Łańcuch
Dostęp
7 / 23
Dostęp do elementów
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
Łańcuch
✔
Po selectorze css (plus kilka rozszerzeń)
$( "p" )
$( "p.intro img" )
$( "ul li:first-child" )
$( "#test")
jQuery( ’table.orders tr:odd’ )
$( "form input:radio" )
8 / 23
Wynik zapytania
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
Łańcuch
✔
✔
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
9 / 23
Dostęp do elementów rodzicielskich
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
✔
✔
✔
parent() element rodzicielski
parents() wszysctkie elementy rodzicielskie do html
parentsUntil(elem) wszystkie elementy rodzicielskie do
elem
Łańcuch
$("span").parent();
$("span").parents();
$("span").parentsUntil("div");
10 / 23
Dostęp do elementów dziecięcych
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
Łańcuch
✔
✔
children() elementy dziecięce (jeden poziom)
find() wszysctkie elementy dziecięce, pasujące do selectrora
$("ul").children();
$("ul").children("li.class1");
$("div").find("span");
$("div").find("*");
11 / 23
Nawigacja w poziomie
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
Łańcuch
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
12 / 23
Filtracja
Wprowadzenie
Dostęp
Dostęp do
elementów
Nawigacja
Modyfikacjia
first()
last()
filter()
not()
Łańcuch
13 / 23
Wprowadzenie
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
Łańcuch
Modyfikacjia
14 / 23
Dostęp/Zmiana zawartości
Wprowadzenie
✔
text() — zawartość tekstowa elementu
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
✘
✔
html() — zawartość html elementu
✘
Łańcuch
✔
val(new) — ustaw wartość pola formulaza
attr(at) — wartość atrybutu
✘
✔
html(new) — ustaw zawartość html elementu
val() — wartość pola formulaza
✘
✔
text(new) — ustaw zawartość tekstową elementu
val(at,new) — ustaw wartość atrybutu
prop(at) — wartość właściwości (selectedIndex, checked,
defaultSelected, etc.)
✘
prop(at,new) — ustaw wartość właściwości
15 / 23
Callback
Wprowadzenie
✔
Wymienione metody mogą mieć jako (drugi) argument funkcję
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
Łańcuch
✘
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 + ")";
16 / 23
Dodawanie treści
Wprowadzenie
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
✔
✔
✔
✔
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>");
Łańcuch
✔
Utworzenie nowego elementu:
$(’<tag></tag>’)
17 / 23
Usuwanie treści
Wprowadzenie
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
✔
✔
empty() usuwa wszystkie elementy dziecięce
remove() usuwa wszystkie elementy (razem z dziecięcymi)
✘
remove(filter) usuwa wszystkie elementy pasujące do
filtru
Łańcuch
$("ul").empty();
$("p").remove(".to_delete");
18 / 23
Zmiana clasy
Wprowadzenie
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
✔
✔
✔
✔
addClass()
removeClass()
toggleClass()
hasClass()
Łańcuch
$("h1, h2, p").addClass("blue");
$("div").removeClass("important");
$("span.toc").toggleClass("visible");
19 / 23
Dostęp/zmiana właściwości css
Wprowadzenie
✔
css(pror) — właściwość css (jak getComputedStyle)
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
✘
css(prop, new) — ustaw właściwość css
✘
new może być funkcją
Łańcuch
20 / 23
Wymiary
Wprowadzenie
Dostęp
Modyfikacjia
Modyfikacja
zawartości
Modyfikacja stylów
Łańcuch
21 / 23
Wprowadzenie
Dostęp
Modyfikacjia
Łańcuch
Zasada łańcuchowa
Łańcuch
22 / 23
Zasada łańcuchowa
Wprowadzenie
✔
Każda metoda zwraca nowy element
Dostęp
Modyfikacjia
Łańcuch
Zasada łańcuchowa
✘
Możliwe (a nawet zalecone) jest stosowanie łańcuchów
$(’<li></li>’).text(value).addClass(’clickable’)
.click(getShowGenre(value));
23 / 23