W zeszłym tygodniu mówiłem o tym, jak ważny jest jQuery Interaktywny Internet: Wprowadzenie do jQuery Interaktywny Web: Wprowadzenie do jQuery jQuery to biblioteka skryptów po stronie klienta, z której korzysta prawie każda nowoczesna strona internetowa - sprawia, że ​​strony internetowe są interaktywne. To nie jedyna biblioteka JavaScript, ale jest ona najbardziej rozwiniętą, najlepiej obsługiwaną i najczęściej używaną… dla każdego współczesnego programisty i dlaczego jest niesamowita. W tym tygodniu myślę, że nadszedł czas, aby zabrudzić sobie ręce jakimś kodem i nauczyć się, jak korzystać z jQuery w naszych projektach.

Powiem to teraz - nie musisz uczyć się Javascript, aby korzystać z jQuery. Prawdopodobnie najlepiej, jeśli uważasz jQuery za ewolucję Javascript - lepszy sposób na zrobienie tego - niż zwykłą bibliotekę, która dodaje funkcjonalność. Każdy skrypt JavaScript zostanie pobrany po drodze. Zakłada się jednak, że jako twórca stron internetowych masz dość dobrą znajomość HTML i CSS (a tutaj jest pomocny bezpłatny przewodnik xHTML, jeśli nie!).

Dokumentowy model obiektowy

jQuery polega na przechodzeniu i manipulacji DOM - reokument Object M.odel. DOM to hierarchiczna reprezentacja drzewa strony, zbudowana przez przeglądarki po przeczytaniu całego kodu HTML. W jQuery użyjemy terminologii podobnej do rodzic, dzieci, i rodzeństwo dość często, więc powinieneś mieć pojęcie, co to oznacza w odniesieniu do DOM.

Ten prosty schemat w3schools dość dobrze wyjaśnia pojęcia. Powinieneś być w stanie zobaczyć, że element nadrzędny elementu jest, podczas gdy element ma element bezpośredni

rodzeństwo.

Rozpoczęcie pracy: Dodawanie jQuery

Najnowsza wersja jQuery ma rozmiar około 91 KB po skompresowaniu, więc dodaje mniej więcej tyle samo strony jak małe zdjęcie lub zrzut ekranu. Najłatwiejszym sposobem włączenia jQuery do projektu jest wklejenie odwołania do najnowszej wersji hostowanej w sekcji nagłówka witryny:

Pamiętaj jednak, że jeśli korzystasz z WordPress, może to powodować problemy, ponieważ ma on już własną kopię biblioteki jQuery. Wtyczki mogą zażądać załadowania, a WordPress inteligentnie załaduje jQuery tylko raz, bez względu na to, ile wtyczek o to poprosiło.

Jeśli dodasz następujący wiersz do swojego functions.php plik motywu, dodasz kolejną prośbę o dołączenie. WordPress będzie wiedział, że zawsze go ładuje, jeśli Twój motyw jest aktywny.

wp_enqueue_script („jquery”);

Drugą rzeczą do zapamiętania jest to, że po dodaniu jQuery przy użyciu standardowej metody zostanie załadowane jako $. Wszystko, co zrobisz z jQuery, będzie poprzedzone tym $, na przykład:

.ajax

lub

$ („# nagłówek”)

Jednak gdy jQuery jest ładowane przez WordPress, wszystko odbywa się za pomocą zmiennej jQuery zamiast $, więc na przykład:

jQuery („# header”)

Chociaż nie jest to duży problem podczas pisania własnego kodu, oznacza to, że wycinanie i wklejanie fragmentów jQuery, które można znaleźć w Internecie, musi zostać przetłumaczone, aby używać jQuery zamiast $ - to wszystko.

Jednym ze sposobów obejścia tego jest zawinięcie kodu w stylu $:

(function ($) // wklej tutaj $ kod) (jQuery);

To zajmuje jQuery zmienną i przekazuje ją do funkcji anonimowej jako $. Wyjaśnię anonimowe funkcje następnym razem - na razie nauczmy się podstawowej struktury odrobiny kodu jQuery.

Aby dodać kod do strony HTML lub PHP, umieść wszystko w tagach, na przykład:

 // kody jQuery tutaj 

$ („selektor”). method ();

To tyle, w tytule tam. To podstawowa struktura pojedynczego fragmentu kodu jQuery do manipulowania DOM. Łatwo, prawda?

Selektor mówi jQuery, aby znalazł rzeczy pasujące do tej reguły,i jest taki sam jak selektory CSS (a następnie kilka innych na górze). Tak jak w CSS stylizujesz wszystkie linki

To samo można zrobić w jQuery jak

$ („a”)

Można to zrobić dla dowolnego elementu HTML - div, h1, span - cokolwiek. Możesz także użyć klas CSS i identyfikatorów, aby być bardziej szczegółowym.

Na przykład, aby znaleźć wszystkie linki z klasą “Znajdź mnie”, użyłbyś:

$ („a.findme”)

Nie musisz za każdym razem określać rodzaju elementu - ale jeśli to zrobisz, po prostu uszczegółowi to regułę. Mogłeś tylko powiedzieć

$ („. findme”)

który pasowałby do wszystkiego z klasą Znajdź mnie, czy to był link.

Aby użyć nazwanego elementu ID, użyj # zamiast tego podpisz. Kluczową różnicą jest tutaj to, że selektor ID zawsze wybiera tylko jeden obiekt, podczas gdy selektor klasy może znaleźć więcej niż jeden.

$ („# coś”)

Zasadniczo, jeśli możesz to zrobić w CSS, jQuery też to zrobi. W rzeczywistości można także zastosować dość złożone pseudo selektory w stylu CSS3, takie jak: najpierw

$ („body p: first”)

Który złapałby akapit strony. Znajdziesz także elementy o określonych atrybutach. Rozważ ten przykład; chcemy znaleźć wszystkie linki na stronie, które wskazują wewnętrznie zrobić użytek z i w jakiś sposób je podkreśl. Oto jak moglibyśmy je znaleźć:

$ ('a [href * = "makeuseof"]')

Czy to nie fajne? Myślę, że tak.

Następnym portem wywołania powinna być dokumentacja API jQuery dla selektorów. To ogromna lista wszystkich rodzajów dostępnych selektorów i nikt nie spodziewałby się, że nauczysz się ich wszystkich.

Następną częścią równania jest metoda - co zrobić z tymi rzeczami, kiedy już je wszystkie znajdziesz - ale zostawimy to na następną lekcję. Jeśli chcesz zacząć od wypróbowania różnych selektorów, sugeruję skorzystanie z następującej metody css. Wymaga to dwóch parametrów - CSS Nazwa właściwości, i nowy wartość przypisać do tej właściwości. Aby nadać wszystkim linkom czerwony kolor tła, wykonaj następujące czynności:

$ („a”). css („kolor tła”, „czerwony”);

Wystarczająco proste! Chociaż może to nie mieć praktycznego zastosowania, pozwoli ci łatwo zobaczyć dowolne elementy znajdujące się za pomocą selektorów. Teraz idź i wybierz - DOM czeka na ciebie.

Mam nadzieję, że ten poradnik był dla ciebie przydatny; Starałem się, aby było to tak proste, jak to możliwe, aby zrozumieć. Nie krępuj się zadawać jakichkolwiek pytań lub wystawiać opinie, ale pamiętaj, że z pewnością nie jestem elitarnym ninja jQuery.