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

Reklama

Jest to część ciągłego wprowadzenia dla początkujących do serii programowania stron internetowych jQuery. Część 1 dotyczyła podstaw jQuery Samouczek jQuery - Pierwsze kroki: podstawy i selektoryW zeszłym tygodniu mówiłem o tym, jak ważna jest jQuery dla każdego współczesnego programisty i dlaczego jest niesamowita. W tym tygodniu myślę, że nadszedł czas, aby ubrudzić sobie ręce kodem i dowiedzieć się, jak ... Czytaj więcej jak włączyć to do swojego projektu i selektorów. W części 2 będziemy kontynuować podstawowe użycie, gdy przyjrzymy się niektórym metodom, które możesz wykonać na tych elementach DOM, i kilku innych podstawach językowych.

$(selektor).metoda();

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ć, selektor część tego oświadczenia pozwala na używanie 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

.ukrytyużylibyśmy:

$ („div.hidden”)

Drugą częścią tego równania jest metoda do wykonywania tych DIV, gdy je znajdziemy (jeśli w ogóle istnieją; lub mogą być tylko jednym „pasującym” przedmiotem). Pamiętaj, że jQuery zwróci tylko jeden element do wyboru identyfikatora, ponieważ identyfikatory powinny odnosić się do unikalnych elementów. Jeśli chcesz 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, zapoznałem Cię z .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ć w CSS, można zatem dostosować za pomocą jQuery - kolory, przezroczystość, lokalizacja, rozmiar - aby wymienić tylko kilka. Zmiana jest natychmiastowa.

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

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

Jako przykład:

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

W tym momencie możesz zastanawiać się, do czego służą nawiasy klamrowe; nazywane są „literałem obiektu” i zwykle służą do tworzenia 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!

Sprawdzić ta strona dla wielu roboczych 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 podasz wartości, otrzymają aktualną 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ść do wartości pobranej z nazwa komentatora:

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

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

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

$('div # contentp: nth-child (3n)').po('');

W związku z tym poprosiliśmy jQuery o:

1. Znajdź div z identyfikatorem „content”
2. Znajdź p zawarte w tym div
3. Filtruj co 3 p za pomocą pseudo selektora n-tego dziecka (więcej na ten temat tutaj)
4. Wstaw dowolny obraz po każdy pasujący element

Nie mogę tutaj wymienić wszystkich metod i nie chciałbyś tego przeczytać. Chodzi o to, że istnieje metoda robienia praktycznie wszystkiego, co możesz wymyślić, jeśli chodzi o manipulację, więc sprawdź API dla jednego możesz użyć.

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 łączeniu metod, po prostu dlatego, że jest niesamowity. Najpierw rozważmy następujące wiersze kodu:

$ („nav # menu”). fadeIn („fast”); $ („menu nav #”). addClass („beingShown”); $ („menu nav #”). css („margines z prawej”, „10px”);

Brzmi 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 szybciej.

Dlaczego? 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ć tę metodę.

To tyle na dzisiaj i myślę, że zapewne 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 porządny 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 właśnie natknąłeś się na ten post, prawdopodobnie jesteś programistą i zechcesz sprawdzić wszystkie nasze WordPress i blogowanie artykuły, a nawet nasze Najlepsze wtyczki WordPress Najlepsze wtyczki WordPress Czytaj więcej strona.