Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00047 007284 12250745 na godz. na dobę w sumie
PHP i jQuery. Techniki zaawansowane. Wydanie II - książka
PHP i jQuery. Techniki zaawansowane. Wydanie II - książka
Autor: , Liczba stron: 344
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-283-3035-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> php - programowanie
Porównaj ceny (książka, ebook (-25%), audiobook).
PHP i JavaScript często idą w parze, ponieważ ich połączenie pozwala na łatwe budowanie elastycznych i dynamicznych aplikacji internetowych. Szczególnie interesujące możliwości drzemią w połączeniu PHP w wersji 7 z lekką, wszechstronną biblioteką jQuery. API jQuery jest proste w użyciu i może być obsługiwane przez różne przeglądarki. Dzięki temu możliwe są coraz bardziej złożone interakcje z użytkownikiem oraz obsługa dużych implementacji aplikacji, zwłaszcza że PHP 7 w porównaniu z wcześniejszymi wersjami może pochwalić się lepszą wydajnością i mniejszym zużyciem pamięci.

Niniejsza książka jest przeznaczona dla średnio zaawansowanych programistów, którzy chcą tworzyć lepsze aplikacje z wykorzystaniem technologii PHP i jQuery. Na przykładzie budowy kompletnej aplikacji WWW pokazano tu mnóstwo zaawansowanych technik PHP i metod doskonalenia aplikacji z frameworkiem jQuery. Niejako przy okazji zaprezentowano też sporo nowych możliwości PHP 7, takich jak określanie typów argumentów funkcji, stałe tablicowe, nowe typy wyjątków i stosowanie kilku , bardzo przydatnych operatorów. Przedstawione w tej książce techniki z pewnością wzbogacą warsztat każdego programisty WWW!

W tej książce znajdziesz najważniejsze informacje o:

PHP 7 i jQuery — oto recepta na aplikację wydajną, efektowną i dynamiczną!


Jason Lengstorf — pochodzi z Montany. Jest projektantem i programistą stron WWW. Tworzy oprogramowanie do zarządzania treścią z wykorzystaniem PHP, MySQL i AJAX-a. Jego hobby to gra w golfa, podróże i degustacja piwa.

Keith Wald – jest doktorem fizyki. Wykłada na Uniwersytecie Kalifornijskim. Jest doświadczonym projektantem stron WWW, programistą PHP, JavaScriptu, Pythona i Perla. Przez wiele lat projektował układy scalone, a obecnie zajmuje się rozwijaniem oprogramowania wbudowanego.
Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: Pro PHP and jQuery, 2nd Edition Tłumaczenie: Krzysztof Wołowski ISBN: 978-83-283-3035-1 Original edition copyright © 2016 by Jason Lengstorf and Keith Wald. All rights reserved. Polish edition copyright © 2017 by HELION SA. All rights reserved. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/phjqz2.zip Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/phjqz2 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis tre(cid:258)ci O autorach ........................................................................................................ 9 O recenzencie .................................................................................................. 11 Cz(cid:218)(cid:258)(cid:202) I Podstawy jQuery .............................................................................. 13 Rozdzia(cid:239) 1 Wprowadzenie do jQuery ............................................................................... 15 Zalety jQuery w porównaniu do JavaScriptu ......................................................................... 15 Biblioteki JavaScript ............................................................................................................ 15 Korzyści z używania jQuery ............................................................................................... 16 Historia jQuery ..................................................................................................................... 16 Konfiguracja środowiska testowego ........................................................................................ 17 Instalacja Firefoksa .............................................................................................................. 17 Instalacja Firebuga ............................................................................................................... 17 Konfiguracja lokalnego środowiska testowego ................................................................ 18 Odwołanie do jQuery w kodzie strony .................................................................................... 19 Ładowanie pobranej kopii biblioteki ................................................................................ 19 Ładowanie kopii biblioteki przechowywanej na zdalnym serwerze ............................. 19 Plik testowy .................................................................................................................................. 19 Funkcja jQuery ..................................................................................................................... 20 Wybór elementów DOM za pomocą składni CSS .......................................................... 21 Podsumowanie ............................................................................................................................ 32 Typowe operacje i metody jQuery .................................................................. 33 Podstawy budowy skryptów jQuery ........................................................................................ 33 Metody jQuery ............................................................................................................................ 33 Poruszanie się w obrębie drzewa DOM ............................................................................ 34 Tworzenie i wstawianie elementów DOM ....................................................................... 42 Odczyt i modyfikacja atrybutów CSS ................................................................................ 55 Przetwarzanie zbiorów wynikowych ................................................................................. 62 Animacje i pozostałe efekty ................................................................................................ 65 Rozdzia(cid:239) 2 Poleć książkęKup książkę SPIS TRE(cid:165)CI Obsługa zdarzeń ................................................................................................................... 70 Obsługa zapytań AJAX ....................................................................................................... 75 Podsumowanie ............................................................................................................................ 81 Cz(cid:218)(cid:258)(cid:202) II Zaawansowane techniki programowania w PHP ............................ 83 Rozdzia(cid:239) 3 Programowanie obiektowe ............................................................................. 85 Czym jest programowanie obiektowe? .................................................................................... 85 Obiekty i klasy ............................................................................................................................. 85 Różnica między obiektem a klasą ...................................................................................... 86 Struktura klasy ...................................................................................................................... 86 Definiowanie właściwości klasy ......................................................................................... 87 Definiowanie metod klasy .................................................................................................. 88 Mechanizm dziedziczenia w klasach ................................................................................. 95 Rodzaje dostępu do właściwości i metod ......................................................................... 99 Komentarze DocBlock ...................................................................................................... 105 Kod obiektowy a kod proceduralny ....................................................................................... 107 Łatwość implementacji ...................................................................................................... 107 Lepsza organizacja ............................................................................................................. 111 Łatwiejsze utrzymanie kodu ............................................................................................. 111 Podsumowanie .......................................................................................................................... 112 Rozdzia(cid:239) 4 Aplikacja Kalendarz wydarze(cid:241) ...................................................................... 113 Planowanie aplikacji ................................................................................................................. 113 Struktura bazy danych ....................................................................................................... 113 Szkielet aplikacji ................................................................................................................. 113 Hierarchia folderów aplikacji ........................................................................................... 114 Modyfikacja środowiska programistycznego ................................................................ 116 Tworzenie kalendarza .............................................................................................................. 117 Projektowanie bazy danych .............................................................................................. 117 Połączenie z bazą danych w klasie ................................................................................... 119 Klasa Calendar .................................................................................................................... 120 Właściwości klasy Calendar ............................................................................................. 121 Konstruktor klasy Calendar ............................................................................................. 122 Wczytywanie danych wydarzenia .................................................................................... 128 Generowanie kodu HTML kalendarza i wydarzeń ....................................................... 134 Generowanie kodu HTML do wyświetlania pełnych opisów wydarzeń .................... 148 Podsumowanie .......................................................................................................................... 153 Formularze do tworzenia, edytowania i usuwania wydarze(cid:241) ....................... 155 Tworzenie i edycja wydarzeń .................................................................................................. 155 Zabezpieczenie formularza tokenem .............................................................................. 157 Plik z formularzem ............................................................................................................ 159 Arkusz stylów dla strony administratora ....................................................................... 160 Zapis nowych wydarzeń w bazie danych .............................................................................. 162 Plik do przetwarzania formularza ................................................................................... 165 Przycisk do tworzenia wydarzeń na stronie głównej kalendarza ................................ 167 Rozdzia(cid:239) 5 4 Poleć książkęKup książkę SPIS TRE(cid:165)CI Przycisk edycji na stronie ze szczegółami wydarzenia ........................................................ 170 Opcje administratora w metodzie displayEvent() ......................................................... 172 Stylizacja strony wydarzenia ............................................................................................ 173 Usuwanie wydarzeń ................................................................................................................. 175 Kod HTML przycisku usuwania ...................................................................................... 176 Metoda obsługująca potwierdzenie usunięcia wydarzenia .......................................... 176 Plik do obsługi formularza potwierdzenia ..................................................................... 180 Podsumowanie .......................................................................................................................... 182 Rozdzia(cid:239) 6 Kontrola uprawnie(cid:241) u(cid:285)ytkownika ................................................................. 183 Tabela użytkowników w bazie danych .................................................................................. 183 Plik odpowiedzialny za wyświetlanie formularza logowania ............................................. 183 Klasa administratora ................................................................................................................ 185 Definicja klasy .................................................................................................................... 185 Budowa metody sprawdzającej dane logowania ........................................................... 186 Modyfikacja rdzenia aplikacji .......................................................................................... 195 Wylogowywanie z aplikacji ..................................................................................................... 199 Przycisk Wyloguj ............................................................................................................... 201 Metoda przetwarzająca formularz wylogowania ........................................................... 201 Modyfikacja rdzenia aplikacji .......................................................................................... 203 Kontrola dostępu do narzędzi administratora ..................................................................... 204 Wyświetlanie opcji administratora .................................................................................. 205 Ograniczenie dostępu do stron administracyjnych ...................................................... 209 Podsumowanie .......................................................................................................................... 212 Cz(cid:218)(cid:258)(cid:202) III Zastosowanie jQuery w aplikacjach PHP ....................................... 213 Rozdzia(cid:239) 7 Optymalizacja interfejsu u(cid:285)ytkownika za pomoc(cid:200) jQuery ............................. 215 Stopniowe ulepszanie aplikacji z wykorzystaniem jQuery ................................................. 215 Cele stopniowego ulepszania ............................................................................................ 216 Dołączenie biblioteki jQuery .................................................................................................. 216 Plik konfiguracyjny JavaScript ......................................................................................... 216 Nowy arkusz stylów dla elementów utworzonych przez jQuery ................................ 217 Okno modalne z danymi wydarzenia .................................................................................... 219 Dołączenie procedury obsługi zdarzenia click .............................................................. 220 Wstrzymanie domyślnego działania odnośnika i dodanie klasy active ..................... 220 Odczyt łańcucha zapytania za pomocą wyrażeń regularnych ..................................... 221 Okno modalne .................................................................................................................... 222 Pobieranie i wyświetlanie informacji o wydarzeniu przy użyciu AJAX-a ................. 226 Przycisk Zamknij ............................................................................................................... 231 Efekty specjalne przy otwieraniu i zamykaniu okna ..................................................... 233 Podsumowanie .......................................................................................................................... 240 Edycja kalendarza za pomoc(cid:200) AJAX-a i jQuery .............................................. 241 Otwieranie formularza do tworzenia wydarzeń ................................................................... 241 Zapytanie AJAX wyświetlające formularz ...................................................................... 242 Modyfikacja pliku do obsługi żądań AJAX .................................................................... 243 Zamykanie okna przyciskiem Anuluj ............................................................................. 246 Rozdzia(cid:239) 8 5 Poleć książkęKup książkę SPIS TRE(cid:165)CI Zapis nowych wydarzeń w bazie danych .............................................................................. 246 Modyfikacja pliku ajax.inc.php ........................................................................................ 249 Dodawanie wydarzeń bez odświeżania strony ..................................................................... 251 Deserializacja danych z formularza ................................................................................. 251 Obiekty dat .......................................................................................................................... 255 Dodawanie wydarzenia do kalendarza ........................................................................... 259 Pobranie identyfikatora nowego wydarzenia ................................................................. 261 Edycja wydarzeń w oknie modalnym .................................................................................... 265 Określenie wartości pola action formularza .................................................................. 266 Zapis identyfikatora wydarzenia ...................................................................................... 267 Usunięcie danych wydarzenia z okna ............................................................................. 269 Duplikaty wydarzeń ........................................................................................................... 270 Potwierdzenie usunięcia w oknie modalnym ....................................................................... 274 Wyświetlenie okna potwierdzenia ................................................................................... 274 Modyfikacja procedury obsługi wysyłania formularza ................................................ 275 Usuwanie wydarzenia z kodu HTML kalendarza ......................................................... 279 Podsumowanie .......................................................................................................................... 282 Cz(cid:218)(cid:258)(cid:202) IV Rozdzia(cid:239) 9 Kontrola poprawno(cid:258)ci danych formularza Zaawansowane techniki jQuery i PHP ............................................ 285 przy u(cid:285)yciu wyra(cid:285)e(cid:241) regularnych .................................................................. 287 Podstawy wyrażeń regularnych .............................................................................................. 287 Elementarna składnia wyrażeń regularnych .................................................................. 287 Podstawowe modyfikatory w wyrażeniach regularnych .............................................. 291 Odwołania wsteczne .......................................................................................................... 292 Klasy znaków ...................................................................................................................... 294 Granice słowa ..................................................................................................................... 298 Operatory powtórzenia ..................................................................................................... 298 Wykrywanie początku i końca łańcucha ........................................................................ 298 Alternatywy ......................................................................................................................... 299 Wyrażenia opcjonalne ....................................................................................................... 299 Budowa bardziej złożonego wyrażenia regularnego ..................................................... 299 Kontrola poprawności daty po stronie serwera ................................................................... 301 Wyrażenie regularne do walidacji dat ............................................................................. 302 Testowe dane ............................................................................................................................. 302 Dopasowanie formatu daty .............................................................................................. 303 Metoda odpowiedzialna za walidację w klasie Calendar .............................................. 305 Wyświetlenie komunikatu o błędzie w przypadku niepoprawnej daty ..................... 307 Kontrola poprawności daty po stronie klienta ..................................................................... 310 Nowy plik JavaScript do sprawdzania poprawności łańcucha daty ........................... 310 Dołączenie nowego pliku w stopce .................................................................................. 311 Zabezpieczenie przed wysłaniem formularza w przypadku nieudanej walidacji ..... 311 Podsumowanie .......................................................................................................................... 314 6 Poleć książkęKup książkę SPIS TRE(cid:165)CI Rozdzia(cid:239) 10 Rozszerzanie biblioteki jQuery ...................................................................... 315 Dodawanie funkcji ................................................................................................................... 315 Przeniesienie walidacji daty do funkcji jQuery ............................................................. 315 Modyfikacja pliku stopki .................................................................................................. 318 Modyfikacja pliku init.js ................................................................................................... 318 Dodawanie metod do obiektu jQuery ................................................................................... 320 Budowa własnej wtyczki ................................................................................................... 320 Implementacja wtyczki ..................................................................................................... 326 Podsumowanie .......................................................................................................................... 327 Dodatki .......................................................................................... 329 Dodatek A Uwagi dotycz(cid:200)ce PHP 7 ................................................................................. 331 Deklarowanie typów ................................................................................................................ 331 Nowe wyjątki ............................................................................................................................. 333 Stałe tablicowe ........................................................................................................................... 333 Rozpakowywanie argumentów ............................................................................................... 335 Dzielenie całkowite ................................................................................................................... 335 Lukier składniowy .................................................................................................................... 336 Skorowidz .................................................................................................... 338 7 Poleć książkęKup książkę SPIS TRE(cid:165)CI 8 Poleć książkęKup książkę R O Z D Z I A (cid:146) 1 (cid:132) (cid:132) (cid:132) Wprowadzenie do jQuery Aby w pełni zrozumieć bibliotekę jQuery i jej zastosowanie w nowoczesnych stronach WWW, warto na chwilę spojrzeć wstecz na jej początki, na to, jakie potrzeby miała zaspokoić i jak wyglądało programowanie w JavaScripcie, zanim się pojawiła. W tym rozdziale przybliżymy koncepcję bibliotek JavaScript oraz cele, które starają się one realizować, a także wyjaśnimy, dlaczego większość programistów wybiera właśnie jQuery. Omówimy też kilka kluczowych kwestii; pokażemy na przykład, jak wykorzystać bibliotekę w swoich aplikacjach, i zaprezentujemy działanie rdzenia jQuery — niezwykle wydajnego mechanizmu selektorów. Zalety jQuery w porównaniu do JavaScriptu Język JavaScript ma bardzo zróżnicowaną reputację w społeczności twórców oprogramowania. Duża część jego składni pozornie przypomina składnię innych znanych języków, takich jak C lub Java. Ale semantyka kodu JavaScript bywa odmienna, co często powoduje frustrację u niewtajemniczonych (znany architekt oprogramowania Douglas Crockford mówił i pisał o tym wielokrotnie; więcej informacji na ten temat znajdziesz w internecie). Przeglądarki komplikują proces tworzenia stron WWW jeszcze bardziej. W każdej z nich (z nielicznymi wyjątkami) interpreter JavaScript jest zaimplementowany inaczej. W rezultacie nie ma praktycznie żadnej kontroli nad przeglądarką obsługiwaną przez użytkownika końcowego ani informacji, które z wykorzystywanych przez twórcę strony funkcji ona obsługuje. Ale za sprawą społeczności programistów stron WWW sytuacja nie jest tak beznadziejna, jak by się mogło na pierwszy rzut oka wydawać. Biblioteki JavaScript Duże wymagania JavaScriptu oraz kwestie związane z jego obsługą przez przeglądarki były zmorą programistów przez długie lata. Z czasem ci ambitniejsi rozpoczęli budowę bibliotek JavaScript, określanych też jako frameworki JavaScript. Biblioteki te miały na celu uproszczenie korzystania z JavaScriptu i udostępnienie pełni jego potencjału zarówno nowym, jak i doświadczonym programistom dzięki łatwym w obsłudze funkcjom, które wyręczały ich w wykonywaniu rutynowych, ale żmudnych zadań. Biblioteki przydają się szczególnie w obrębie techniki AJAX (termin pochodzi od asynchronicznego JavaScriptu i XML). Wkrótce się przekonasz, że AJAX odgrywa kluczową rolę przy uelastycznianiu aplikacji WWW, kierując żądania do serwera asynchronicznie i w miarę potrzeb (często nawet bez wiedzy użytkownika). Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Biblioteki JavaScript zapewniają znacznie prostszą składnię przy typowych zadaniach, co przekłada się na przyspieszenie pracy programistów i ułatwienie nauki początkującym. Eliminują też niektóre trudności związane z dostosowaniem JavaScriptu do różnych przeglądarek, wykonując za Ciebie wszystkie kontrole zgodności przy użyciu wbudowanych metod, co pozwala na oszczędności czasu podczas tworzenia kodu. (cid:132) Uwaga Ró(cid:285)nica mi(cid:218)dzy u(cid:285)yciem narz(cid:218)dzi AJAX biblioteki jQuery a wykorzystaniem metod JavaScript zostanie wyja(cid:258)niona w rozdziale 2. Wybór bibliotek JavaScript jest duży. Kilka z najbardziej obecnie popularnych to Prototype (www.prototypejs.org), MooTools (http://mootools.net), Yahoo! UI Library (http://yuilibrary.com/), AngularJS (https://angularjs.org/) oraz Dojo (https://dojotoolkit.org/). Ich rola i możliwości są różne, ale my skupimy się na najpopularniejszej bibliotece, skoncentrowanej głównie na ułatwianiu najczęstszych interakcji z przeglądarką internetową: jQuery. Korzyści z używania jQuery Każdy framework JavaScript ma swoje zalety. Biblioteka jQuery nie jest tu wyjątkiem — jej mocne strony to: (cid:120) mały rozmiar pliku (około 80 kB w wersji 2.1.4), (cid:120) wyjątkowo prosta składnia, (cid:120) możliwość łączenia wywołań metod kaskadowo, (cid:120) elastyczny charakter i mnogość dostępnych wtyczek, (cid:120) bardzo liczna społeczność internetowa, (cid:120) szczegółowa dokumentacja pod adresem http://api.jquery.com, (cid:120) opcjonalne rozszerzenia pozwalające rozbudować bibliotekę o nowe możliwości, na przykład jQueryUI. Historia jQuery Biblioteka jQuery, pomysł programisty Johna Resiga, została po raz pierwszy zaprezentowana na spotkaniu entuzjastów nowych technologii w Nowym Jorku w 2006 roku (więcej informacji na temat formuły takich spotkań znajdziesz pod adresem http://barcamp.org). Resig tłumaczy na swojej stronie internetowej, że stworzył jQuery, ponieważ nie był zadowolony z ówcześnie dostępnych bibliotek i czuł, że można je ulepszyć poprzez usunięcie bezproduktywnych elementów składni i jednocześnie dodanie uproszczonych konstrukcji dla często wykonywanych zadań (http://ejohn.org/blog/selectors-in-javascript/). jQuery z miejsca stała się hitem w społeczności programistów i szybko nabierała rozpędu. Wielu z nich pomogło udoskonalić bibliotekę, co zaowocowało jej pierwszym stabilnym wydaniem (w wersji 1.0) 26 sierpnia 2006 r. Od tego czasu jQuery doczekała się wielu kolejnych wersji (w chwili pisania tego tekstu najnowsza to 2.1.4), a także setek utworzonych przez entuzjastów wtyczek. Wtyczka to rozszerzenie jQuery, które nie wchodzi w skład rdzenia biblioteki. Więcej o wtyczkach jQuery i o tym, jak je tworzyć, dowiesz się w rozdziale 10. 16 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Konfiguracja (cid:258)rodowiska testowego Ponieważ nie ma lepszego sposobu na zrozumienie nowego języka od wzięcia spraw w swoje ręce, na początek przygotujemy środowisko testowe, które umożliwi nam wykonanie kilku ćwiczeń wprowadzających w tematykę jQuery. Na szczęście, utworzenie takiego środowiska wymaga tylko dwóch czynności: instalacji Firefoksa oraz instalacji Firebuga. W tej książce zakładamy, że wszystkie ćwiczenia będziesz wykonywać, używając przeglądarki Firefox wraz z jej wtyczką Firebug. Największą zaletą tego tandemu jest doskonała konsola do testowania kodu JavaScript w Firebugu. Instalacja Firefoksa Aby pobrać i uruchomić Firefoksa, przejdź do adresu http://firefox.pl i pobierz najnowszą wersję przeglądarki (42.0 w chwili pisania tego tekstu), dostępną pod adresem https://www.mozilla.org/pl/firefox/products/. Instalacja Firebuga Aby zainstalować Firebuga, otwórz Firefoksa i przejdź do adresu http://getfirebug.com/downloads, a następnie kliknij łącze Download przy najnowszej wersji (w chwili pisania 2.0.13). Zostaniesz przeniesiony do pozycji Firebug w katalogu Dodatki dla programu Firefox. Teraz kliknij przycisk Zainstaluj, co spowoduje wyświetlenie okna dialogowego instalacji w przeglądarce (zob. rysunek 1.1). Kliknij przycisk Zainstaluj i poczekaj na koniec instalacji. Rysunek 1.1. Okno dialogowe instalacji Firebuga 17 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Po zakończeniu instalacji na pasku stanu pojawi się ikona wyglądająca jak świetlik. Służy ona do aktywacji paneli Firebuga. Domyślnie widoczny jest panel konsoli (zob. rysunek 1.2). Rysunek 1.2. Panel konsoli w dodatku Firebug (cid:132) Uwaga Mo(cid:285)liwo(cid:258)ci Firebuga znacznie wykraczaj(cid:200) poza debugowanie kodu JavaScript. Wtyczka ta jest nieocenionym narz(cid:218)dziem ka(cid:285)dego projektanta stron WWW. Aby dowiedzie(cid:202) si(cid:218) o niej wi(cid:218)cej, odwied(cid:283) adres http://getfirebug.com. Konfiguracja lokalnego środowiska testowego Chociaż utworzenie lokalnego środowiska testowego nie jest konieczne do wykonania ćwiczeń prezentowanych w tej książce, zalecamy ten krok jako dobrą praktykę. Testowanie w środowisku lokalnym pozwala na szybsze, bezpieczniejsze programowanie i jest zazwyczaj łatwiejsze niż na zdalnym serwerze. Instalacja XAMPP Aby szybko i (cid:239)atwo skonfigurowa(cid:202) (cid:258)rodowisko lokalne na komputerze, nale(cid:285)y pobra(cid:202) i zainstalowa(cid:202) pakiet XAMPP. Wykonaj nast(cid:218)puj(cid:200)ce kroki: 1. Przejd(cid:283) do strony http://www.apachefriends.org/pl/xampp.html i pobierz najnowsz(cid:200) wersj(cid:218) XAMPP-a dla swojego systemu operacyjnego (w chwili pisania jest to wersja 7.0.1). W tej ksi(cid:200)(cid:285)ce b(cid:218)dziemy u(cid:285)ywa(cid:202) PHP w wersji 7.x; w rozdziale 3. dowiesz si(cid:218) dlaczego. 18 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY 2. Otwórz pobrany plik. Na komputerze PC uruchom plik .exe, wybierz katalog i rozpocznij instalacj(cid:218). Na komputerze Mac zamontuj obraz DMG i przeci(cid:200)gnij folder XAMPP do folderu Applications. 3. Otwórz panel sterowania w folderze XAMPP-a i uruchom Apache. 4. Wpisz w pasku adresu przegl(cid:200)darki http://localhost/, aby upewni(cid:202) si(cid:218), i(cid:285) XAMPP dzia(cid:239)a. Je(cid:258)li dzia(cid:239)a, zobaczysz stron(cid:218) g(cid:239)ówn(cid:200) XAMPP-a. Oprócz wersji dla Windows i Mac istniej(cid:200) te(cid:285) dystrybucje XAMPP-a dla systemów Linux i Solaris. W ka(cid:285)dym systemie operacyjnym proces instalacji przebiega nieco inaczej. Dodatkowe informacje na temat uruchomienia lokalnego (cid:258)rodowiska testowego na swoim komputerze znajdziesz w dokumentacji. Odwo(cid:239)anie do jQuery w kodzie strony Skorzystanie z jQuery wymaga załadowania biblioteki w dokumencie HTML, żeby skrypty miały dostęp do jej metod. Jeżeli biblioteka nie zostanie załadowana jako pierwsza, wszystkie skrypty bazujące na składni jQuery będą najprawdopodobniej powodować błędy JavaScript. Na szczęście, ładowanie jQuery jest bardzo proste i — co więcej — może się odbywać na kilka sposobów. Ładowanie pobranej kopii biblioteki Pierwszy sposób ładowania jQuery w projekcie polega na zapisaniu kopii biblioteki w strukturze plików projektu, a następnie odwołaniu się do niej w kodzie, podobnie jak do każdego innego pliku JavaScript: script src= js/jquery-2.1.4.min.js /script Ładowanie kopii biblioteki przechowywanej na zdalnym serwerze Drugi sposób to dołączenie kopii biblioteki jQuery z serwera Google. Podstawową zaletą tego rozwiązania jest duże prawdopodobieństwo, że odwiedzający stronę internetową będzie już mieć w pamięci podręcznej swojej przeglądarki kopię tego samego pliku biblioteki pobraną wcześniej z innej strony, co skróci czas ładowania. Odwołanie do zdalnego pliku wygląda podobnie jak do pobranego: script src= https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js /script Plik testowy Teraz, gdy środowisko testowe jest już skonfigurowane, w folderze htdocs, w obrębie instalacji XAMPP-a, należy utworzyć nowy folder testing zawierający plik index.html. Otwórz swój ulubiony edytor i umieść w nim następujący kod HTML: !DOCTYPE html html head title Testowanie jQuery /title meta charset= utf-8 / /head body 19 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE p Witaj, (cid:258)wiecie! /p p class= foo Kolejny akapit, ale z klas(cid:200). /p p span Element span wewn(cid:200)trz akapitu. /span /p p id= bar Akapit z identyfikatorem. span class= foo A to zdanie znajduje si(cid:218) w elemencie span. /span /p script src= https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js /script /body /html (cid:132) Uwaga (cid:146)adowanie JavaScriptu tu(cid:285) przed znacznikiem zamykaj(cid:200)cym /body s(cid:239)u(cid:285)y temu, aby skrypty nie blokowa(cid:239)y (cid:239)adowania innych elementów strony, na przyk(cid:239)ad obrazów. Zapobiega to te(cid:285) uruchomieniu skryptów przy nie w pe(cid:239)ni za(cid:239)adowanych elementach strony, co mog(cid:239)oby powodowa(cid:202) nieoczekiwane dzia(cid:239)anie lub b(cid:239)(cid:218)dy JavaScript. Zapisz ten plik i przejdź do adresu http://localhost/testing/ w Firefoksie (zob. rysunek 1.3). Rysunek 1.3. Plik testowy wyświetlony w Firefoksie Plik testowy wykorzystamy do eksperymentów z podstawowymi operacjami jQuery. Funkcja jQuery Sercem biblioteki jQuery jest funkcja jQuery. Bez niej tworzenie kodu jQuery jest niemożliwe. Jednak w większości implementacji jQuery używa się skrótu $() zamiast jQuery(), dzięki czemu kod jest bardziej zwięzły. Nie będziemy się tu zajmować mechanizmem działania tej funkcji. W zasadzie wystarczy tylko wiedzieć, że tworzy ona obiekt jQuery i oblicza wartość wyrażenia przekazanego jej w argumentach. Następnie ustala, jak powinna zareagować, i na tej podstawie odpowiednio się zmienia. 20 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY (cid:132) Ostrze(cid:285)enie Niektóre inne biblioteki JavaScript równie(cid:285) u(cid:285)ywaj(cid:200) funkcji $(), co mo(cid:285)e powodowa(cid:202) konflikty przy próbie korzystania z wielu bibliotek jednocze(cid:258)nie. jQuery udost(cid:218)pnia rozwi(cid:200)zanie tego problemu w postaci: jQuery.noConflict(). Wi(cid:218)cej informacji o tej metodzie znajdziesz pod adresem http://docs.jquery.com/Core/jQuery.noConflict. Wybór elementów DOM za pomocą składni CSS Fundamentem biblioteki jQuery jest jej niezwykle wydajny mechanizm selektorów. Pozostała część tego rozdziału poświęcona jest różnym sposobom wybierania za pomocą jQuery elementów z drzewa DOM (ang. Document Object Model — obiektowy model dokumentu). (cid:132) Uwaga DOM to zbiór obiektów i w(cid:218)z(cid:239)ów, które sk(cid:239)adaj(cid:200) si(cid:218) na dokumenty HTML, XHTML, XML. Jest niezale(cid:285)ny od platformy i j(cid:218)zyka. Oznacza to, (cid:285)e programi(cid:258)ci mog(cid:200) pos(cid:239)ugiwa(cid:202) si(cid:218) ró(cid:285)nymi j(cid:218)zykami programowania (na przyk(cid:239)ad JavaScriptem) w ró(cid:285)nych (cid:258)rodowiskach (jak przegl(cid:200)darki internetowe), aby uzyska(cid:202) dost(cid:218)p do informacji zapisanych w DOM i modyfikowa(cid:202) je bez problemów ze zgodno(cid:258)ci(cid:200). Jednym z największych wyróżników jQuery jest łatwość, z jaką programista może wybierać elementy w obrębie DOM. Pseudoselektory CSS1 zwiększają znacznie potencjał biblioteki. Dają programiście dostęp do ściśle określonych wystąpień elementów w kodzie HTML. To bardzo duże ułatwienie, szczególnie dla tych, którzy mieli wcześniej styczność z CSS, ponieważ składnia jest prawie identyczna. W zasadzie, za pomocą tych samych konstrukcji CSS, z których zbudowane są reguły stylów, można wybierać elementy. Można przy tym korzystać z: (cid:120) podstawowych selektorów, (cid:120) hierarchii selektorów, (cid:120) filtrowania: (cid:120) prostego, (cid:120) na podstawie zawartości, (cid:120) na podstawie widoczności, (cid:120) na podstawie atrybutów, (cid:120) na podstawie relacji rodzic-dziecko, (cid:120) związanego z formularzami. Podstawowe selektory Podstawowe selektory pozwalają wybrać elementy o określonym typie znacznika, nazwie klasy lub identyfikatorze, a także dowolnej ich kombinacji. Wyświetl zawartość http://localhost/testing/, aktywuj okno Firebuga, a następnie kliknij zakładkę Konsola (zob. rysunek 1.4). Jeśli panel konsoli jest wyłączony, kliknij zakładkę Konsola, a następnie wybierz opcję Włączony. Z konsoli będziemy korzystać we wszystkich przykładach w tym rozdziale. 1 www.w3schools.com/CSS/css_pseudo_classes.asp. 21 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Rysunek 1.4. Konsola Firebuga po wykonaniu polecenia (cid:132) Uwaga Je(cid:258)li znasz CSS, mo(cid:285)esz si(cid:218) ograniczy(cid:202) do przejrzenia tej cz(cid:218)(cid:258)ci rozdzia(cid:239)u, poniewa(cid:285) opisywane selektory zachowuj(cid:200) si(cid:218) tak samo, jak ich odpowiedniki CSS. Wybór elementów na podstawie typu znacznika W celu wybrania elementu o określonym typie znacznika wystarczy jako selektora użyć nazwy znacznika (na przykład p, div czy span): element Aby wybrać wszystkie znaczniki akapitu ( p ) w dokumencie testowym, wpisz w wierszu u dołu konsoli: $( p ); Naciśnij klawisz Enter, a kod zostanie uruchomiony. Konsola powinna teraz wyglądać tak, jak na rysunku 1.4: $( p ); Object[ p, p.foo, p, p#bar ] Pierwszy wiersz świadczy o tym, że polecenie zostało wykonane, a drugi pokazuje otrzymany wynik. Dokument testowy zawiera cztery znaczniki akapitu: dwa bez klasy, identyfikatora ani atrybutów, jeden z klasą foo i jeden z identyfikatorem bar (o zastosowanej składni dowiesz się więcej w następnych rozdziałach). Po przekazaniu nazwy znacznika do funkcji jQuery wszystkie jego wystąpienia dodawane są do obiektu jQuery. 22 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Wybór znaczników na podstawie nazwy klasy Równie szybko, jak według typu znacznika, można wybrać elementy, którym przypisano określoną klasę lub klasy. Służy do tego nazwa klasy poprzedzona kropką (.): .klasa Zaznacz wszystkie elementy z klasą foo, uruchamiając w konsoli następujący kod: $( .foo ); W konsoli pojawi się wynik: $( .foo ); Object[ p.foo, span.foo ] Wynikowy zbiór zawiera zarówno znacznik akapitu, jak i element span, ponieważ oba są klasy foo. Wybór elementów na podstawie identyfikatora Aby wybrać element o określonej wartości atrybutu id, stosujemy taką samą konstrukcję, jak w CSS — identyfikator poprzedzony znakiem hash (#): #id Znajdź wszystkie elementy z identyfikatorem bar, wpisując: $( #bar ); Tylko jeden akapit w dokumencie ma identyfikator bar, co widać w wyniku: $( #bar ); Object[ p#bar ] (cid:146)(cid:200)czenie selektorów w celu bardziej precyzyjnego wyboru Czasami może zajść potrzeba wyizolowania spośród znaczników tylko tych, które posiadają określoną klasę. Łatwo to osiągnąć, łącząc w selektorze typ znacznika i klasę. Aby wybrać tylko znaczniki akapitów z klasą foo, wydaj w konsoli instrukcję: $( p.foo ); Wyświetlony wynik potwierdza, że element span został zignorowany, chociaż i on ma klasę foo: $( p.foo ); Object[ p.foo ] Grupowanie selektorów W sytuacji, która wymaga dostępu do wielu elementów jednocześnie, selektory można grupować. Na przykład, jeśli chcemy wybrać każdy znacznik akapitu z klasą foo lub każdy element o identyfikatorze bar, użyjemy selektorów: $( p.foo,#bar ); W zbiorze wynikowym znajdą się wtedy elementy, które odpowiadają przynajmniej jednemu selektorowi w cudzysłowie: 23 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE $( p.foo,#bar ); Object[ p.foo, p#bar ] Hierarchia selektorów Zdarza się, że możliwość wyboru na podstawie elementu, klasy czy identyfikatora nie wystarcza. Czasami potrzebujemy dostępu do elementów znajdujących się wewnątrz lub obok innego elementu albo następujących po nim, na przykład kiedy chcemy usunąć klasę active ze wszystkich elementów menu z wyjątkiem jednego, który właśnie został kliknięty, kiedy chcemy przechwycić wszystkie pozycje z wybranej listy nieuporządkowanej albo kiedy chcemy zmienić atrybuty elementu nadrzędnego przy wybranym elemencie formularza. Wybór elementów potomnych Do wybierania elementów potomnych, czyli elementów zawartych w innych elementach, stosuje się selektor przodka, spację i selektor potomka, tak jak w przykładzie poniżej: przodek potomek Aby wybrać w dokumencie testowym elementy span będące potomkami, uruchom w konsoli Firebuga następujące polecenie: $( body span ); Znalezione zostaną wszystkie elementy span wewnątrz znacznika body , mimo że znajdują się one również wewnątrz znaczników p: $( body span ); Object[ span, span.foo ] Wybór dzieci Selektor dzieci można traktować jako szczególny przypadek selektora potomków. Wybiera on tylko elementy znajdujące się w hierarchii jeden poziom niżej. Aby znaleźć element dziecko, należy użyć kolejno elementu rodzica, znaku większości ( ) i elementu dziecka: rodzic dziecko Spróbuj wybrać z pliku testowego wszystkie elementy span, które są dziećmi elementu body, wpisując w konsoli: $( body span ); Ponieważ nie ma elementów span zawartych bezpośrednio w elemencie body, w konsoli wyświetli się następujący wynik: $( body span ); Object[ ] Teraz zawęź zbiór elementów span do tych, które są dziećmi elementu p: $( p span ); 24 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Wynik wygląda tak: $( p span ); Object[ span, span.foo ] Wybór nast(cid:218)pnego s(cid:200)siada Czasami w skrypcie trzeba wybrać następny element drzewa DOM. Podaje się wtedy identyfikator elementu wyjściowego (w praktyce może to być dowolny selektor), po którym następuje znak plus (+) oraz selektor docelowy, tak jak w przykładzie poniżej: poprzedni+nastepny Spróbuj wpisać w konsoli następujące polecenie: $( .foo+p ); Ponieważ istnieje tylko jeden element klasy foo, zwrócony zostanie tylko jeden element akapitu: $( .foo+p ); Object[ p ] Użyj teraz bardziej ogólnego zapytania i wybierz element akapitu następujący po jakimkolwiek innym elemencie akapitu: $( p+p ); Kod dokumentu zawiera cztery akapity i po każdym z nich, z wyjątkiem ostatniego, jest jeszcze jeden akapit. Konsola wyświetli zatem w wyniku trzy elementy: $( p+p ); Object[ p.foo, p, p#bar ] W zbiorze wynikowym znalazł się drugi, trzeci i czwarty akapit z kodu HTML. Wybór rodze(cid:241)stwa Elementy rodzeństwo to wszystkie elementy znajdujące się w tym samym elemencie. Rodzeństwo wybiera się podobnie jak następnych sąsiadów. Różnica polega na tym, że selektor rodzeństwa dopasuje wszystkie elementy rodzeństwa następujące po elemencie wyjściowym, a nie tylko pierwszy. Aby wybrać elementy rodzeństwo, należy podać selektor wyjściowego elementu, a po nim tyldę (~) oraz selektor rodzeństwa, tak jak w przykładzie poniżej: brat~siostra Aby dopasować całe rodzeństwo po akapicie z klasą foo, wykonaj następujące polecenie w konsoli: $( .foo~p ); Wynikowy zbiór będzie wyglądać następująco: $( .foo~p ); Object[ p, p#bar ] Proste filtrowanie Filtry to jeszcze jeden wydajny sposób dostępu do elementów DOM. Zamiast polegać na typach elementów, ich klasach czy identyfikatorach, możemy je wyszukiwać na podstawie położenia, aktualnego stanu oraz innych kryteriów. 25 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Podstawowym elementem składni filtra jest dwukropek (:), który poprzedza nazwę filtra: :filtr W przypadku niektórych filtrów w nawiasach może być przekazywany argument: :filtr(parametr) W dalszej części rozdziału omówimy najpopularniejsze i najbardziej przydatne filtry. (cid:132) Uwaga Aby jak najszybciej przej(cid:258)(cid:202) do praktycznych przyk(cid:239)adów, ograniczymy si(cid:218) do opisu najwa(cid:285)niejszych filtrów. Pe(cid:239)n(cid:200) list(cid:218) dost(cid:218)pnych filtrów mo(cid:285)na znale(cid:283)(cid:202) w dokumentacji jQuery. Wybór pierwszego lub ostatniego elementu Do najbardziej powszechnych zastosowań filtrów należy ustalanie, czy dany element jest pierwszym albo ostatnim w zbiorze. Dzięki filtrom jest to bardzo proste zadanie. Wystarczy dołączyć do dowolnego selektora filtr :first lub :last, tak jak w przykładzie poniżej: $( p:last ); Po uruchomieniu tego kodu w konsoli zostanie wyświetlony wynik: $( p:last ); Object[ p#bar ] Wybór elementów niepasuj(cid:200)cych do selektora Najprostszym sposobem na znalezienie wszystkich elementów, które nie pasują do selektora, jest skorzystanie z filtra :not(). Dołącz ten filtr do selektora, podając jako argument inny selektor, a w wynikowym zbiorze znajdą się wszystkie elementy, które będą pasować do pierwszego selektora, ale nie do selektora przekazanego jako argument :not(). Na przykład $( p:not(.foo) ); zwróci następujący zbiór wynikowy: $( p:not(.foo) ); Object[ p, p, p#bar ] Wybór elementów parzystych i nieparzystych Podobnie do :first i :last, filtry :even i :odd mają prostą składnię, zwracając, odpowiednio, parzyste i nieparzyste elementy zbioru wynikowego, co w kontekście ich nazw nie jest zaskoczeniem2: $( p:odd ); Uruchamiając powyższy wiersz w konsoli, uzyskamy następujący wynik: $( p:odd ); Object [ p.foo, p#bar ] 2 Even to po angielsku parzysty, a odd — nieparzysty — przyp. tłum. 26 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Wybór elementów na podstawie indeksu Gdy chcemy wydobyć element o konkretnej pozycji w zbiorze, możemy się posłużyć filtrem :eq(), przekazując jako argument indeks żądanego elementu: $( p:eq(3) ); Wynik będzie następujący: $( p:eq(3) );¸ Object[ p#bar ] (cid:132) Uwaga Indeks elementu odnosi si(cid:218) do jego pozycji w(cid:258)ród innych elementów zbioru. Liczenie w programowaniu zaczyna si(cid:218) od 0, wi(cid:218)c pierwszy element ma indeks 0, drugi indeks 1 itd. Filtrowanie na podstawie zawarto(cid:258)ci Istnieją też filtry, które pozwalają wybierać elementy według ich zawartości. Takim kryterium może być na przykład określona zawartość tekstowa albo zawartość HTML. Wybór elementów, które zawieraj(cid:200) okre(cid:258)lony tekst Aby wybrać tylko te elementy, które zawierają dany tekst, użyjemy filtra :contains(), przekazując szukany tekst jako parametr: $( p:contains(Kolejny) ); Uruchamiając powyższy wiersz w konsoli, uzyskamy następujący wynik: $( p:contains(Kolejny) ); Object[ p.foo ] (cid:132) Uwaga Wielko(cid:258)(cid:202) liter w ci(cid:200)gu przekazywanym do filtra :contains() ma znaczenie. W komentarzu pod opisem tego filtra w dokumentacji API jeden z uczestników dyskusji doda(cid:239) wersj(cid:218) filtra :contains(), która nie rozró(cid:285)nia wielko(cid:258)ci liter. Wi(cid:218)cej informacji odno(cid:258)nie tego filtra znajdziesz pod adresem http://api.jquery.com/contains-selector. Wybór elementów, które zawieraj(cid:200) okre(cid:258)lony element Jeśli trzeba wybrać tylko te elementy, które zawierają inny element, można skorzystać z filtra :has(). Działa on podobnie do :contains(), z tą różnicą, że zamiast ciągu znaków przyjmuje jako argument nazwę elementu: $( p:has(span) ); Po wykonaniu tej instrukcji w konsoli zostanie wyświetlony wynik: $( p:has(span) ); Object[ p, p#bar ] Jak widać, w zbiorze wynikowym znalazły się tylko elementy zawierające elementy span. 27 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Wybór elementów, które s(cid:200) rodzicami W przeciwieństwie do filtra :empty, filtr :parent spowoduje wybranie tylko tych elementów, które mają dzieci, przy czym dziećmi mogą być zarówno inne elementy, jak i węzły tekstowe. Wybierz wszystkie akapity, które są rodzicami, wydając następujące polecenie: $( p:parent ); Ponieważ każdy z akapitów w przykładowym dokumencie HTML zawiera tekst, a niektóre również inne elementy, w zbiorze wynikowym znajdą się wszystkie elementy p: $( p:parent ); Object[ p, p.foo, p, p#bar ] Filtrowanie na podstawie widoczno(cid:258)ci Filtry widoczności :hidden i :visible służą do wybierania, odpowiednio, ukrytych i widocznych elementów. Wybierz wszystkie widoczne akapity za pomocą polecenia: $( p:visible ); Ponieważ żaden z elementów przykładowego dokumentu HTML nie jest aktualnie ukryty, konsola zwróci następujący zbiór wynikowy: $( p:visible ); Object[ p, p.foo, p, p#bar ] Filtrowanie na podstawie atrybutów Do wybierania elementów doskonale nadają się również atrybuty. Atrybuty to te składowe elementu, które dodatkowo go określają. Atrybutami są na przykład: class, href, id albo title. W przykładach poniżej posłużymy się atrybutem class. (cid:132) Uwaga Pami(cid:218)taj, (cid:285)e w (cid:258)rodowisku produkcyjnym zaleca si(cid:218) stosowanie — tam, gdzie jest to mo(cid:285)liwe — selektorów identyfikatora (#id) oraz klasy (.class) z racji ich wi(cid:218)kszej wydajno(cid:258)ci. Poni(cid:285)sze przyk(cid:239)ady s(cid:239)u(cid:285)(cid:200) tylko prezentacji mo(cid:285)liwo(cid:258)ci filtrów atrybutów. Wybór elementów na podstawie warto(cid:258)ci atrybutu Aby dopasować elementy, które zawierają dany atrybut i jego określoną wartość, należy ująć parę atrybut-wartość w nawiasy kwadratowe ([]): [atrybut=warto(cid:258)(cid:202)] Zaznacz wszystkie elementy z atrybutem class o wartości foo, wydając w konsoli instrukcję: $( [class=foo] ); W wyniku operacji otrzymasz: $( [class=foo] ); Object[ p.foo, span.foo ] 28 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Wybór elementów, które nie maj(cid:200) atrybutu lub jego okre(cid:258)lonej warto(cid:258)ci Aby — odwrotnie niż wcześniej — wybrać tylko te elementy, które nie odpowiadają parze atrybut-wartość, przed znakiem równości między atrybutem a wartością należy wstawić wykrzyknik (!): [atrybut!=warto(cid:258)(cid:202)] Wybierz wszystkie akapity bez klasy foo za pomocą następującej instrukcji: $( p[class!=foo] ); Oto wynik: $( p[class!=foo] ); Object[ p, p, p#bar ] Filtrowanie na podstawie relacji rodzic-dziecko, Filtry bazujące na relacji rodzic-dziecko w rzeczywistości są alternatywą dla filtrów :even, :odd i :eq(). Podstawowa różnica polega na tym, że w tej grupie filtrów indeksowanie zaczyna się od 1 zamiast od 0 (jak ma to miejsce w przypadku :eq()). Wybór elementów dzieci na podstawie parzysto(cid:258)ci, indeksu lub równania Jeden z najbardziej uniwersalnych filtrów, :nth-child(), akceptuje aż trzy różne rodzaje argumentów: słowo odd lub even, indeks oraz równanie. Podobnie jak w przypadku pozostałych filtrów operujących na elementach dzieciach, tu też indeksowanie zaczyna się od 1 zamiast od 0 (a więc pierwszy element ma indeks 1, drugi element indeks 2 i tak dalej). Po użyciu filtra :odd zbiór wynikowy zawierał akapity z klasą foo i identyfikatorem foo. Wybierz nieparzyste akapity za pomocą :nth-child(), aby zobaczyć, czy i tym razem będzie podobnie. Wpisz w konsoli: $( p:nth-child(odd) ); Otrzymasz następujący wynik: $( p:nth-child(odd) ); Object[ p, p ] Dane wyjściowe mogą być zaskoczeniem, ale pamiętaj, że różnica wynika z innego sposobu indeksowania elementów. Wybór pierwszego lub ostatniego elementu Chociaż bardzo podobne do :first i :last, :first-child i :last-child wyróżnia to, że zwrócony przez nie zbiór wynikowy może zawierać więcej niż jedno dopasowanie. Na przykład, aby znaleźć ostatni element span spośród wszystkich będących dziećmi akapitu, użyjemy: $( p span:last ); co spowoduje wyświetlenie w konsoli wyniku: $( p span:last ); Object[ span.foo ] 29 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Jeśli jednak chcemy znaleźć wszystkie elementy span będące ostatnim dzieckiem akapitu, skorzystamy z filtra :last-child: $( p span:last-child ); Tutaj punktem odniesienia jest nie drzewo DOM, ale każdy rodzic, dlatego uzyskujemy inny wynik: $( p span:last-child ); Object[ span, span.foo ] Filtry zwi(cid:200)zane z formularzami Formularze stanowią obecnie niezwykle ważną część stron WWW. Ich niebagatelna rola przyczyniła się do powstania szeregu filtrów nastawionych na obsługę formularzy. Ponieważ w naszym przykładowym dokumencie HTML nie ma formularza, trzeba go dodać przed wykonaniem kolejnych ćwiczeń. Dodaj w pliku index.html między ostatnim znacznikiem akapitu i pierwszym znacznikiem skryptu następujący kod HTML: form action= # method= post fieldset legend Formularz rejestracyjny /legend label for= name Imi(cid:218) /label br / input name= name id= name type= text / br / label for= password Has(cid:239)o /label br / input name= password id= password type= password / br / br / label input type= radio name= loc / Jestem przy swoim komputerze /label br / label input type= radio name= loc checked= checked / Jestem przy wspólnym komputerze /label br / br / input type= submit value= Zaloguj / br / label input type= checkbox name= notify disabled= true / Zapami(cid:218)taj mnie na tym komputerze /label br / /fieldset /form Po zapisaniu zmian odśwież w przeglądarce stronę http://localhost/testing/, aby wyświetlić testowy formularz. Powinien on wyglądać tak, jak na rysunku 1.5. (cid:132) Uwaga Poniewa(cid:285) strona zawiera pole has(cid:239)a, a jest wy(cid:258)wietlana w trybie zwyk(cid:239)ym (niezabezpieczonym), w konsoli mo(cid:285)e si(cid:218) pojawi(cid:202) ostrze(cid:285)enie o zagro(cid:285)eniu, takie jak na rysunku 1.5. Konfigurowanie serwera Apache na komputerze lokalnym tak, aby strony by(cid:239)y wy(cid:258)wietlane w bezpieczny sposób, mo(cid:285)e by(cid:202) zbyt daleko posuni(cid:218)t(cid:200) ostro(cid:285)no(cid:258)ci(cid:200), lecz aplikacje w (cid:258)rodowisku produkcyjnym powinny u(cid:285)ywa(cid:202) bezpiecznego protoko(cid:239)u https. Wi(cid:218)cej informacji uzyskasz pod adresem https://httpd.apache.org/docs/2.4/ssl/. 30 Poleć książkęKup książkę ROZDZIA(cid:146) 1. (cid:132) WPROWADZENIE DO JQUERY Rysunek 1.5. Wygląd formularza po zmianach w pliku index.html Dopasowanie na podstawie typu elementu formularza Najczęściej używane filtry związane z formularzami dopasowują typ elementu. Są to :button, :checkbox, :file, :image, :input, :password, :radio, :submit oraz :text. Aby zaznaczyć wszystkie pola wyboru typu radio, wystarczy użyć następującego kodu: $( input:radio ); Po jego uruchomieniu w konsoli zostanie wyświetlony wynik: $( input:radio ); Object[ input property value = on attribute value = null , input property value = on (cid:180)attribute value = null ] Filtry te przydają się szczególnie dlatego, że wszystkie wymienione wyżej typy pól to elementy input. Wybór poszczególnych typów pól formularza bez tych filtrów byłby więc znacznie utrudniony. Wybór w(cid:239)(cid:200)czonych lub wy(cid:239)(cid:200)czonych elementów formularza Kolejne dwa filtry pozwalają wybrać włączone lub wyłączone elementy formularza. Są to odpowiednio :enabled i :disabled. Aby zaznaczyć wszystkie wyłączone elementy formularza, należy użyć następującej instrukcji: $( :disabled ); 31 Poleć książkęKup książkę PHP I JQUERY. TECHNIKI ZAAWANSOWANE Po jej wykonaniu w konsoli zostanie wyświetlony wynik: $( :disabled ); Object[ input property value = on attribute value = null ] Opcja Zapamiętaj mnie na tym komputerze jest wyłączona i dlatego znajduje się w zbiorze zwracanym przez filtr :disabled. Wybór zaznaczonych lub wybranych elementów formularza Pola wyboru typu radio i typu checkbox wejścia mają stan checked3, natomiast lista rozwijana (element select) ma stan selected4. Dostęp do elementów formularza będących w którymkolwiek z tych stanów zapewniają, odpowiednio, filtry :checked i :selected. Aby wybrać w naszym przykładzie aktualnie zaznaczone pole wyboru typu radio, użyj następującego kodu: $( :checked ); W konsoli wyświetlone zostanie pole wyboru typu radio, które jest aktualnie zaznaczone: $( :checked ); Object[ input property value = on attribute value = null ] Podsumowanie W tym rozdziale dowiedziałeś się, czym jest biblioteka jQuery i dlaczego została stworzona, a także poznałeś podstawy jej działania. Skonfigurowaliśmy środowisko, instalując XAMPP-a, Firefoksa i dodatek Firebug. W tym momencie powinieneś z łatwością wybierać elementy z DOM przy użyciu mechanizmu selektorów jQuery. Być może uznasz ten rozdział za mało ekscytujący, ale to ważne, żebyś w pełni rozumiał, jak działa jQuery, zanim skoczysz na głębszą wodę. W następnym rozdziale omówimy operacje na drzewie DOM przy użyciu wbudowanych metod jQuery (między innymi: poruszanie się w jego obrębie, dostęp do elementów oraz ich modyfikację). 3 gdy są zaznaczone — przyp. tłum. 4 wskazujący wybraną pozycję — przyp. tłum. 32 Poleć książkęKup książkę Skorowidz A adres URL, 253 AJAX, 75, 226, 229, 243 algorytmy szyfrujące, 190 aliasy, 315 animacja, 65 aplikacja Kalendarz wydarzeń, 113 arkusz stylów CSS, 160, 217 atak typu blokada usługi, 191 atrybuty, 28 CSS, 55 baza danych, 113 bezpieczeństwo, 191 biblioteki jQuery, 15 JavaScript, 15 budowa skryptów, 33 B C cele stopniowego ulepszania, 216 chronione metody i właściwości, 100 ciąg zaburzający, 190, 191 CSS, 143, 160, 217 CSS3, 144 D definiowanie klasy, 185 metod klasy, 88 właściwości klasy, 87 dekodowanie znaków, 253 deserializacja danych, 251 destruktory, 90 DocBlock, 105 dodatek Firebug, 18 dodawanie funkcji, 315 funkcji do obiektu, 316, 320 wydarzenia, 251, 259 dołączenie arkusza stylów, 218 biblioteki jQuery, 216 pliku konfiguracyjnego, 217 DOM, Document Object Model, 21, 34 dopasowanie do wzorca, 298 formatu daty, 303 dostęp do domyślnych opcji, 320 do narzędzi administratora, 204 do oryginalnych metod, 98 do stron administracyjnych, 209 do właściwości, 99 drzewo DOM, 21, 34 duplikaty wydarzeń, 270 dziedziczenie, 95 dzielenie całkowite, 335 E edycja kalendarza, 241 wydarzeń, 155, 265 Poleć książkęKup książkę edytor poleceń, 44 efekty specjalne, 233 elementy DOM, 21 rodzeństwo, 25 F filtr filtr button, 31 checkbox, 31 contains, 27 empty, 28 eq, 27, 29 even, 26, 29 file, 31 first, 26 has, 27 image, 31 input, 31 last, 26 not, 26 nth-child, 29 odd, 26, 29 parent, 28 password, 31 radio, 31 submit, 31 text, 31 filtrowanie, 25, 29 na podstawie atrybutów, 28 na podstawie widoczności, 28 na podstawie zawartości, 27 filtry związane z formularzami, 30 Firebug, 17 Firefox, 17 foldery publiczne i niepubliczne, 115 formularz, 30, 155 administratora, 175 do tworzenia wydarzeń, 163 logowania, 183 potwierdzenia, 180 wylogowania, 201 frameworki JavaScript, 15 funkcja $.ajax(), 76, 226, 229, 242 $.ajaxSetup(), 77 $.get(), 79 SKOROWIDZ $.getJSON(), 80 $.getScript(), 80 $.post(), 79 fx.addevent, 255 fx.initModal(), 224 jQuery.noConflict(), 315 preg_match(), 305 funkcja session_destroy(), 201 sleep(), 194 validDate(), 311 funkcje narzędziowe, 223, 225 skrótu, 190 G generowanie kodu HTML, 148, 150 granice słowa, 298 grupowanie, 292 selektorów, 23 H hasło, 190 hierarchia folderów aplikacji, 114 selektorów, 24 I identyfikator miesiąca, 256 wydarzenia, 261, 268 informacje o wydarzeniu, 153, 226 inicjalizacja wtyczki, 326 inspektor elementów, 45 instalacja Firebuga, 17 Firefoksa, 17 XAMPP, 18 interfejs użytkownika, 215 J JavaScript, 15 jQuery, 13, 15 metody, 33 operacje, 33 339 Poleć książkęKup książkę SKOROWIDZ K Kalendarz wydarzeń, 113 dodawanie wydarzeń, 155, 251 edycja, 241 edycja wydarzeń, 155, 265 interfejs użytkownika, 215 planowanie aplikacji, 113 tworzenie aplikacji, 117 usuwanie wydarzeń, 175 wylogowywanie, 199 zapis wydarzeń, 162 klasa, 86 active, 220 Admin, 185 Calendar, 120, 256, 305 Event, 131 klasy znaków, 294, 297 kod HTML kalendarza, 134 HTML przycisku usuwania, 176 obiektowy, 107 proceduralny, 107 komentarze DocBlock, 105 komunikat o błędzie, 307, 309, 314 konfiguracja środowiska testowego, 17, 18 właściwości obiektu, 126 konsola Firebuga, 22 konstruktor, 90 klasy Calendar, 122 kontrola dostępu, 209 poprawności danych, 287 poprawności daty, 301, 310 uprawnień użytkownika, 183, 210 konwersja do łańcucha znaków, 93 L (cid:146) literały obiektowe, 225 logowanie, 183 ładowanie dokumentu, 71 kopii biblioteki, 19 340 łańcuch łączenie zapytania, 221, 248 znaków, 93 selektorów, 23 wywołań, 322 M mechanizm dziedziczenia, 95 metoda .add(), 40 .addClass(), 60 .after(), 48 .andSelf(), 41 .animate(), 67 .append(), 45 .appendTo(), 47 .attr(), 55 .before(), 48 .bind(), 72 .children(), 36 .closest(), 37 .contents(), 42 .css(), 56 .data(), 59 .delay(), 69 .detach(), 54 .die(), 73 .each(), 63, 324 .end(), 42 .eq(), 34 .error(), 70 .fadeIn(), 65 .fadeOut(), 65 .fadeTo(), 65 .filter(), 35 .find(), 37 .first(), 35 .getDay(), 258 .has(), 35 .hasClass(), 61 .height(), 61 .hide(), 65 .html(), 57 .innerHeight(), 61 .innerWidth(), 61 .insertAfter(), 49 .insertBefore(), 49 Poleć książkęKup książkę metoda .is(), 36 .last(), 35 .live(), 73 .load(), 80 .map(), 63 .next(), 38 .nextAll(), 38 .nextUntil(), 38 .not(), 35 .one(), 74 .outerHeight(), 61 .outerWidth(), 61 .parent(), 39 .parents(), 40 .parentsUntil(), 40 .prepend(), 45 .prependTo(), 47 .prev(), 39 .prevAll(), 39 .prevUntil(), 39 .ready(), 71 .remove(), 54 .removeAttr(), 56 .removeClass(), 60 .scroll(), 70 .show(), 65 .siblings(), 39 .slice(), 36 .slideDown(), 66 .slideT
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

PHP i jQuery. Techniki zaawansowane. Wydanie II
Autor:
,

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: