Wprowadzenie do jQuery (część 2) Metody i funkcje

Jest to część ciągłego wprowadzenia dla początkujących do serii programowania stron internetowych jQuery. Część 1 obejmowała podstawy jQuery Podstawy jQuery - Pierwsze kroki: Podstawy i selektory. W tym tygodniu myślę, że nadszedł czas, aby zabrudzić sobie ręce jakimś kodem i dowiedzieć się, jak… jak włączyć go do twojego projektu i selektorów. W części 2 będziemy kontynuować podstawowe użycie, gdy przyjrzymy się niektórym metodom, które można wykonać na tych elementach DOM, i kilku innych podstawach językowych.

$ (selektor) .method ();

Jeśli przypomnisz sobie lekcję 1, jest to podstawowa struktura manipulacji DOM w jQuery. Manipulowanie DOM nie jest oczywiście jedyną rzeczą, którą możesz zrobić z jQuery, ale jest to najłatwiejsze miejsce do rozpoczęcia i najczęstsze, dlatego właśnie to wybraliśmy.

Aby szybko podsumować, część selektora tej instrukcji umożliwia użycie nazw elementów, klas lub identyfikatorów podobnych do CSS w celu zlokalizowania części DOM. Na przykład, aby złapać wszystkie z nazwą klasy .ukryty, użylibyśmy:

$ („div.hidden”)

Druga część tego równania to metoda wykonywania na tych DIV, gdy je znajdziemy (jeśli w ogóle istnieją; lub mogą być tylko jednym “pasujący” pozycja). Pamiętaj, że jQuery zwróci tylko jeden element do wyboru identyfikatora, ponieważ identyfikatory powinny odnosić się do unikalnych elementów. Jeśli zamierzasz mieć więcej niż jeden element, musisz zdefiniować go jako klasę w CSS.

Przejdźmy zatem do metod; co możesz zrobić z elementami DOM??

Po pierwsze przedstawiłem ci .css ostatnia metoda, aby można było użyć jej do testowania. Format jest prosty:

.css („właściwość”, „wartość”);

Wszystko, co można zdefiniować za pomocą CSS, może więc zostać dostosowane przez jQuery - kolory, przezroczystość, lokalizacja, rozmiar - aby wymienić tylko kilka. Zmiana jest natychmiastowa.

Jeśli wolisz animować zmiany w CSS, mam dla Ciebie świetną wiadomość; istnieje również metoda o nazwie .animować(). Jest to jednak trochę bardziej złożone:

.animacja („właściwość”: „wartość”, prędkość);

Jako przykład:

.animacja („krycie”: „0,25”, „wysokość”: „100px”, „szybki”);

W tym momencie możesz zastanawiać się, do czego służą nawiasy klamrowe; nazywają się “obiekt dosłowny”, i są zwykle używane do utworzenia listy wartość nieruchomości pary, trochę jak indeksowana tablica jeśli pochodzisz z innych języków. Będziesz ich często używać w jQuery, więc powiem to jeszcze raz - przyzwyczaj się do poprawnego sprawdzania zamkniętych nawiasów i nawiasów klamrowych!

Sprawdź tę stronę, aby znaleźć wiele praktycznych przykładów metody animacji.

Oprócz manipulowania właściwościami CSS czegoś, możesz dostosować jego zawartość za pomocą .Także metody text (), .html () i .val () (val dotyczy zawartości elementów formularza). Te metody działają jak oba zestawTers i otrzymaćters; jeśli nie określisz wartości, otrzymają bieżącą wartość. Jeśli podasz wartość, zastąpią one bieżącą wartość.

Oto kilka szybkich przykładów:

Pobierz bieżącą wartość pola nazwy w formularzu komentarza i przypisz ją do zmiennej nazwa_ komentarza:

var commenter_name = $ (# comment-form #name) .val ();

Ustaw wartość na wartość pobraną nazwa komentatora:

$ ('span.name'). text (nazwa komentatora);

Następnie mamy szeroki wybór metod klonowania, poruszania się, wstawiania lub usuwania części DOM. Twoja wyobraźnia jest naprawdę granicą.

Załóżmy, że chcesz dynamicznie wstawiać blok obrazu reklamowego co 3 akapit w kolumnie zawartości, ale robisz to w JavaScript, aby początkowe ładowanie strony było czyste. Brzmi dość skomplikowanie, prawda? Ledwie…

$ ('div # content p: nth-child (3n)'). after ('
Pamiętaj też, że może istnieć więcej niż jeden sposób na zrobienie czegoś. Jeśli na przykład nie możesz zawęzić właściwego obiektu do insertAfter (), może pomyśl o znalezieniu Kolejny dziecko w dół i za pomocą insertBefore () zamiast.
Łączenie metod
Na koniec dzisiaj porozmawiajmy o łańcuchach metod, głównie dlatego, że są niesamowite. Najpierw rozważmy następujące wiersze kodu:
$ („nav # menu”). fadeIn („fast”); $ („menu nav #”). addClass („beingShown”); $ („nav # menu”). css („margines z prawej”, „10px”);
Brzmi dość rozsądnie, prawda? Ale możesz zrobić to samo w jednym wierszu:
$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');
To robi dokładnie to samo i nazywa się łączenie metod. Ponieważ prawie wszystkie metody jQuery same zwracają obiekt jQuery, każda z nich może przejść do następnego. Oznacza to mniej kodu - co zawsze jest dobrą rzeczą - ale w rzeczywistości działa również szybciej.
Czemu? Za każdym razem, gdy wywołujesz podstawową jQuery $ polecenie i selektor, musisz go przeszukać drzewo DOM w poszukiwaniu pasującego elementu. Kiedy łączysz metody, nie musisz zbyt często powracać do DOM, ponieważ wie, gdzie są teraz i może natychmiast wykonać metodę.
To tyle na dzisiaj i myślę, że prawdopodobnie dużo omówiliśmy. Powinieneś być teraz uzbrojony w możliwość wykonywania dość ciężkich manipulacji DOM, więc spróbuj, połącz swoje metody i zrób prawdziwy bałagan na stronie. Na razie będziesz chciał umieścić swoje skrypty w stopce, aby dać resztę strony czasu na załadowanie. W przyszłym tygodniu zajmiemy się sprawą, aby jQuery działał tylko wtedy, gdy wszystko zostało poprawnie załadowane zdarzeniami, i ciekawy przypadek anonimowych funkcji.
Jeśli natknąłeś się na ten post, prawdopodobnie jesteś programistą i zechcesz sprawdzić wszystkie nasze artykuły WordPress i blogi, a nawet naszą stronę z najlepszymi wtyczkami WordPress.