W zeszłym tygodniu mówiłem o tym, jak ważne jest jQuery dla każdego nowoczesnego web developera i dlaczego jest niesamowite. Myślę, że w tym tygodniu nadszedł czas, abyśmy ubrudzili sobie ręce kodem i nauczyli się, jak wykorzystać jQuery w naszych projektach.

Powiem to teraz - nie musisz uczyć się JavaScript, aby korzystać z jQuery. Prawdopodobnie najlepiej będzie, jeśli pomyślisz o jQuery jako o ewolucji JavaScript – lepszym sposobie na zrobienie tego – niż po prostu o bibliotece, która dodaje funkcjonalność. Jakikolwiek JavaScript, którego potrzebujesz, zostanie odebrany po drodze. Zakłada się jednak, że jako twórca stron internetowych masz całkiem dobrą znajomość HTML i CSS (a oto nasz pomocny darmowy przewodnik po xHTML, jeśli nie! ).

Obiektowy model dokumentu

jQuery polega na przemierzaniu i manipulowaniu OSĄD - ten D dokument LUB obiekt m odel. DOM to hierarchiczna reprezentacja strony w formie drzewa, zbudowana przez przeglądarki po wczytaniu całego kodu HTML. W jQuery będziemy używać terminologii takiej jak rodzic , dzieci , oraz rodzeństwo dość często, więc powinieneś mieć pojęcie, co to oznacza w odniesieniu do DOM.

Ten prosty schemat odw3schoolsdość dobrze wyjaśnia pojęcia. Powinieneś być w stanie zobaczyć, że rodzicem elementu jest , podczas gdy element ma natychmiastowe

jQuery code codes here`

$ ('selektor').metoda();

To wszystko, w tytule na górze. To jest podstawowa struktura pojedynczego kawałka kodu jQuery do manipulowania DOM. Łatwe, prawda?

tenselektornakazuje jQuery znaleźć rzeczy, które pasują do tej reguły, i jest taki sam jak selektory CSS (i jeszcze kilka na górze). Tak jak w CSS stylujesz wszystkie linki

a { }

To samo zostałoby zrobione w jQuery jako

$('a')

Można to zrobić dla dowolnych elementów 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ą „findme”, użyjesz:

$('a.findme')

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

$('.findme')

który pasowałby do wszystkiego z klasą Znajdź mnie , niezależnie od tego, czy był to link.

Aby użyć nazwanego elementu ID, użyj # zamiast tego podpisać. Kluczowa różnica polega na tym, że selektor identyfikatora zawsze wybierze tylko jeden obiekt, podczas gdy selektor klasy może znaleźć więcej niż jeden.

Windows 10 jak wyłączyć bluetooth

$('#something')

Zasadniczo, jeśli możesz to zrobić w CSS, jQuery też to zrobi. W rzeczywistości możesz również użyć dość skomplikowanych pseudo selektorów w stylu CSS3, takich jak :first

$('body p:first')

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

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

Czy to nie fajne? Cóż, myślę, że tak.

Następnym portem powinien być Dokumentacja jQuery API dla selektorów . Jest to ogromna lista wszystkich rodzajów selektorów dostępnych do użycia i nikt nie spodziewałby się, że nauczysz się ich wszystkich.

Następna część równania tometoda- co zrobić z tymi rzeczami, gdy już je wszystkie znajdziesz - ale zostawimy to na następną lekcję. Jeśli jednak chcesz już teraz wypróbować różne selektory, sugeruję trzymanie się 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. Tak więc, aby nadać wszystkim linkom czerwony kolor tła, powinieneś zrobić:

$('a').css('background-color','red');

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

Mam nadzieję, że ten samouczek był dla Ciebie przydatny; Starałem się, aby było to tak proste, jak to tylko możliwe. Zapraszam do zadawania jakichkolwiek pytań lub wystawiania opinii, ale pamiętaj, że z pewnością nie jestem elitarnym ninja jQuery.

Udział Udział Ćwierkać E-mail 5 wskazówek, jak doładować swoje maszyny VirtualBox Linux

Masz dość słabej wydajności oferowanej przez maszyny wirtualne? Oto, co powinieneś zrobić, aby zwiększyć wydajność VirtualBox.

Czytaj dalej Powiązane tematy

Kultura internetowa
Tworzenie stron internetowych
JavaScript
Programowanie
jQuery

O autorze James Bruce(707 opublikowanych artykułów)

James ma tytuł licencjata w dziedzinie sztucznej inteligencji i posiada certyfikaty CompTIA A+ i Network+. Kiedy nie jest zajęty jako redaktor recenzji sprzętu, lubi LEGO, VR i gry planszowe. Przed dołączeniem do MakeUseOf był technikiem oświetlenia, nauczycielem języka angielskiego i inżynierem centrum danych.

Więcej od Jamesa Bruce .a

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować