[Powered by Google Translate] [Seminarium: jQuery] [Vipul Shekhawat, Harvard University] [To jest CS50.] [CS50.TV] Jeśli jesteś po wzdłuż w domu, rzeczywiście można uzyskać dostęp do moich slajdów Internecie wchodząc na ten link. To TjjRWj na bit.ly. Możesz też po prostu przejść do adresu URL bezpośrednio, co jest cloud.cs50.net / ~ vshekhawat, które jest moje imię, i jquery. Gorąco zachęcamy do podążać jeśli to oglądasz w domu, i jeśli jesteś tutaj, też, bo to jest dość interaktywne przedstawienie. 

Więc dzisiaj mam zamiar mówić o jQuery, i pierwsze pytanie, co to jest jQuery? W tym roku, wiem, że faceci nie są objęte JavaScript tak szczegółowo, jak to już w ostatnich latach. JavaScript jest, przede wszystkim, tylko po stronie klienta język , który służy do uruchamiania skryptów i kodu na każdym komputerze. Więc masz serwer, który zapewnia stron internetowych dla osób, ale możesz robić rzeczy, na ich maszyny, zapytaj ich urządzenia do wysyłania żądania do serwera co 30 sekund czy coś takiego. Możesz to zrobić za pomocą JavaScript. JQuery tylko zapewnia większą funkcjonalność na szczycie JavaScript że ma dodatkowe rzeczy dla Ciebie. Jeśli spojrzeć na treści na górze, które opisuje niektóre z rzeczy, które jesteś w stanie zrobić. Tak ogólnie, to powstała w styczniu 2006 roku. Po raz pierwszy został pomyślany w sierpniu 2005 roku. To już za kilka lat, a to jest naprawdę częścią nowego ruchu Web 2.0 że robił Internet tak błyszczące. Jest to najczęściej używany biblioteki JavaScript. Ponad 19.600.000 strony są jej używania i użytkowania nadal rośnie według builtwith.com, który, zdaje się, w ciągu ostatniego roku, właśnie stale rośnie dość liniowo. Wśród najlepszych 10 milionów stron, jest jeszcze - około 40% z nich jest obecnie używany. Facebook wykorzystuje je, wiele innych stron internetowych obecnie używać. Możesz patrzeć na te statystyki na własną rękę, jeśli chcesz. I można powiedzieć, że to legit, ponieważ ma podstawę i 13 członków Zarządu, wraz z zespołem 20 ludzi, którzy pracują na nim regularnie. Więc to jest bardzo szeroko stosowane, to ma. URL org, to jest fantazja, to ma skutki dla innych rzeczy, więc jest to duży problem. 

Dlaczego warto z niej korzystać? JQuery jest bardzo lekki. Oznacza to, że nie jest to ogromny plik. Możesz pobrać minified plik, który jest bez wszystkich białej przestrzeni i uwagi, a to tylko 32 kB. Tak łatwo jest po prostu wrzucić na swojej stronie internetowej i po prostu zacząć go używać. Jest to także bardzo sprawnie napisany, więc nie trzeba się wiele - to nie spowalnia swojej stronie wiele, gdy go używać. Pozwala realizować rzeczy, które wcześniej były niemożliwe. Istnieją pewne aspekty funkcjonalności, jak tworzenie animacji, które normalnie byłoby bardzo, bardzo trudne do zrobienia. Ale w jQuery są bardzo proste. I są pewne rzeczy, które są denerwujące uwagi, możliwe w JavaScript, takie jak wysyłanie żądania POST, ale aby wysłać żądanie do serwera, musisz napisać pięć lub sześć lub siedem linii kodu. Teraz możesz to zrobić w jednej linii kodu, w jednym wywołaniu funkcji. To bardzo upraszcza wiele rzeczy, które robisz. I wszystkie dzieciaki korzystasz. Przez to, mam na myśli mnie. W moim ostatnim projekcie w ubiegłym roku, co jest news.whrb.org, co jest dla stacji radiowej, stworzyłem ten blog w którym odbywają się wszystkie koncerty, które mamy zrobić i pliki MP3 do nich. Możesz przeglądać ostatnich pokazach, i to wszystko zrobić za pomocą jQuery. Można powiedzieć, z powodu tych wszystkich animacji, w istocie. Więc jeśli masz - jeśli tworzysz nowy post, widzisz te małe slideDowns, że wszystko odbywa się przy użyciu jQuery. I to więdną - tak tego rodzaju rzeczy jest wykonywane przy użyciu jQuery, i nie trzeba stale odświeżyć stronę, aby poruszać się po witrynie. Kolejna fajna rzecz, która z wykorzystaniem jQuery jest ta prezentacja. Używam tego otwartego rzecz source o nazwie scrolldeck, co ktoś napisał na górze jQuery. Jeśli spojrzy na źródła, można zobaczyć, że że używają tego znaku dolara, znaki dolara są wykorzystywane w jQuery oznaczać, że funkcja jest jQuery funkcja. Więc oni określenie otoki na górze jQuery , który pozwala dokonać prezentacji tak, i widać, że tutaj są one w tym oryginalny plik jQuery, czyli co musisz to jeśli chcesz używać jQuery na swoje strony. 

Czekając na to, w jaki sposób go zainstalować? Możesz pójść do jQuery.com i pobrać plik, dodać go do katalogu stron i obejmuje go. Więc po prostu na górze, w tagu głowa pliku HTML z głównego pliku HTML, wystarczy, że wiersz kodu z poprawnej wersji, dla których wersja jQuery używasz. Można go pobrać, przechodząc do jQuery.com, Kliknij przycisk "Download jQuery," i masz go. To wszystko. I rzeczywiście, możemy przyjrzeć się, jak to wygląda. Jeśli klikniesz na pobierz tutaj, jQuery to. To jest po prostu jeden wielki plik JavaScript, który nie wszystkie magiczne rzeczy dla Ciebie. Jest minified wersji, która nie może być odczytany w ogóle. Możesz też zajrzeć na wersji rozwojowej, która jest czytelna ale nadal bardzo, bardzo długo. Jest wiele rzeczy w tam. Można również link do obsługiwanej wersji Google to. Tak, że będziemy pozwalają tylko polegać na Google, aby dostarczyć. Zapewniają każdą wersję, dostępną w każdym czasie. Tak więc prawdopodobnie można polegać na Google, aby udostępniać je dla Ciebie. Można też na niej link do własnej jQuery w najnowszej wersji. Mają adres URL, który zawsze jest zaktualizowany do najnowszej wersji. To jQuery-ostatni, i jest jeden problem z tym, która jest, że, jeśli aktualizacja jQuery i niektóre z poprzedniej funkcji oni staje uległej retrogradacji lub przestarzałe, nie może - może rozpocząć się nie dać już wspierane. Więc jeśli piszesz stronę za pomocą wersji 1.8.2, przez wersję czasu 2.7 wychodzi niektóre z funkcji, które napisałem nie działają już. Więc lepiej jest po prostu pobrać 32 plików kB, umieścić ją na swojej stronie internetowej, a będziesz pracować zawsze. 

Mam zamiar iść do przodu i zacząć mówić o rzeczywistej funkcjonalności jQuery. Pierwszą rzeczą jest selektorów. To jest to, co jQuery był początkowo pomyślany, aby zapewnić. I możesz kliknąć na dokumentacji patrzeć Szczegółowa dokumentacja dla selekcjonerów I zamierzam pokrycie. Ideą selektorów jest to, że można wybrać elementów HTML na stronie. Elementy na stronie mają identyfikatory i klasy i innych określających aspekty do nich. Jest też - Oni są w różnych zleceń. Raz na jakiś czas są one zagnieżdżone wewnątrz siebie. JQuery pozwala na budowę prostych zapytań pobierających elementy z tej strony. Następnie można manipulować tych elementów za pomocą jQuery funkcje, która jest sekcja manipulacja dostaniemy później. Możesz zmienić HTML, zmienić CSS, można również animować i dodać funkcje, które aktywują się na pewne wydarzenia. Tak więc, na przykład, jeśli coś się kliknął, chcesz coś się stało, możesz to zrobić przy użyciu jQuery, jak również. I istnieje ogromna liczba sposobów wyboru elementów. Większość z nich nigdy nie używane, ale są te podstawowe, które są bardzo ważne. Selektor elementu, na przykład, jeśli jesteś po prostu wybierając niczego to jest div - I rzeczywiście kod otwarty dla prezentacji slajdów. Tak więc, na przykład, oto pierwszy slajd. Tutaj mamy div. Jeśli rzeczywiście wybrać wszystkie div na stronie, będzie to po prostu dać nam tablicę wszystkich div, które istnieją w tym pliku. ID selektor pozwala wybrać coś z danym ID. Jeżeli więc, na przykład, tego co ma identyfikator "co" i jeśli zrobił to z # co zamiast jakiegoś identyfikatora, to po prostu zwraca tablicę, która ma jeden element i to jest ten element strony. Możemy również połączyć selektorów w ten sposób poprzez wybrać tylko rzeczy z identyfikatorów, które są DIV. Więc tak. Tylko wybierz div, które mają tego identyfikatora. Dla klasy po prostu użyć kropki, to samo, co CSS. Potomek działa również, więc jeśli masz jakąś klasę i to zagnieżdżone elementy wewnątrz niego - tak, na przykład, istnieje pewna klasa i ma tagu kotwicy, żeby dodać odnośnik do innej strony, można użyć tej składni do pobrania link. Możesz również wybrać kilka rzeczy na raz, tylko oddzielić je przecinkami używać selektor, który chcesz, a będzie można wybrać je wszystkie na raz, w jednym szeregu. I wtedy też nie selektor, więc można wybrać wszystkie div że nie mają jakieś konkretne klasy. A to tylko jako sposób na wprowadzenie do tego, jak ta opcja działa. Pokażę kilka konkretnych przykładów w drugim. 

Zaawansowane selektory są - to tylko kilka przykładów. Istnieją dziesiątki tych, ale jeśli chcesz wybrać wszystkie tagi obrazu w ramach jakiegoś elementu, to po prostu zrobić: obraz. Jeśli chce wybrać nawet elementy, na przykład, jeśli jest 20 z nich, chcesz wybrać 0, 2, 4, 6, i tak dalej, zrobić: nawet, czy można to zrobić również: dziwne. Są to pseudo selektorów, co oznacza, że ​​faktycznie obliczyć każdy inny element, a nie tylko iść i wybierając je wszystkie. Można również - każdy element może mieć określone atrybuty. Tak więc, na przykład, class = center jest również atrybutem. Dla tego tagu kotwicy, href, hipertekst odniesienia, jest atrybutem również. Tak więc można wybrać coś, że linki do konkretnej strony lub po prostu - to bardzo ogólne. Możesz wybrać coś z każdego atrybutu, które chcesz. A potem, również atrybut zawiera. Jeśli, na przykład, chciał, aby wybrać wszystkie elementy wejściowe , które mają słowo "przepustkę" jako nazwę nich jeśli strona ma blok tekstu wejściowego to się nazywa "password", to byłoby jednym ze sposobów można wybrać, które. I wiele więcej. Można iść dalej i patrzeć na dokumentacji i zobaczyć konkretne przykłady, jak to działa. 

Następną rzeczą jest manipulacji DOM. Po wybierz elementy, będziemy chcieli, aby rzeczywiście robić rzeczy z nimi. Do tej pory nie spojrzał na to w ogóle, ale jeśli spojrzeć na dokumentacji, tam naprawdę dużo, że możemy zrobić. W tym momencie mamy zamiar wybrać elementy na tej prezentacji i manipulować nimi przy użyciu jQuery. Bo to jest realizowane przy użyciu jQuery, mamy dostęp do biblioteki jQuery, i możemy korzystać z tych funkcji, w tym kodzie. Jednym z przydatnych rzeczy, które może nie wiedzieć o jest konsola. I Google Chrome jest to, co używam. Można nacisnąć alt polecenia J lub alt control J, aby otworzyć konsolę. Firefox Myślę, że to polecenie przesunięcia K lub Shift Control K. W Safari trzeba iść zmienić niektóre ustawienia. Tam jest link, jeśli chcesz to zrobić, ale ja polecam się Chrome lub Firefox. Warto więc otworzyć konsolę, to tutaj. Pozwala po prostu w zasadzie zrobić wszystko, co chcesz. Więc może po prostu wpisać w utworzyć zmienną x nazwie, x = 5, zobaczmy co x + 2 jest. Można nawet zrobić coś jak CS + Zobaczmy, x + 45, że będzie CS50. Możesz po prostu zrobić kilka typowych rzeczy JavaScript. Ale można też zrobić jQuery tutaj. 

Warto więc spojrzeć na ten pierwszy aspekt tutaj. Zamierzamy utworzyć zmienną o nazwie HTML, który jest ciągiem znaków. Posiada znacznik akapitu w to, że nazywa się jakiś nowy tekst. Mamy więc ten HTML, to jakiś nowy tekst, w znaczników akapitu. Teraz naprawdę chcemy, aby dodać go do strony. I ustawić go tak, że HTML do niniejszego ustępu, tytuł ten tutaj, to append ID. Jeśli wybieramy identyfikator append a następnie dodać do niego HTML zmienna I właśnie stworzył, to dodać, że kod HTML na końcu, tuż po tym tagiem ust. Więc jeśli to zrobimy - wybraliśmy ten akapit, i mamy wywołaniu funkcji dołączania z HTML zmiennej Właśnie dodanej, to dodać, że nowy tekst tam na stronie. Można również poprzedzić, co oznacza, że ​​to jest możliwe, zanim na początku tego elementu. Więc jest jakiś nowy tekst na początku i później. Mogę śmiało odświeżyć, aby pozbyć się tych rzeczy I właśnie wykonywana. Ale to jest przykład jak można użyć prepend i dołączyć metody manipulować rzeczy na stronie, dodać trochę kodu HTML. 

Można również zmienić klasy. Jeszcze w tym pliku stylu, stworzyłem ten dla klasy win , który ma kolor czerwony tekst, jakiś kolor tła i cienia tekstu. Wygląda to ohydne, ale może faktycznie - niniejszym ustępie odpowiada identyfikator klasy. Więc mogę dodać klasę dla wygranej. Mogę wykonać to w konsoli, i że będzie dodać, że klasy, a teraz wygląda to ohydne, jak oczekiwano. CSS automatycznie zostanie zastosowane do klas, że - czy jest CSS dla klasy, automatycznie zostanie zastosowana jeśli zmienisz klasę elementu. Wtedy możemy po prostu usunąć go za pomocą Remove Class. Więc jeśli masz kilka predefiniowanych klas, takich jak czerwony lub wyróżniony, a następnie chcesz zastosować te, do elementów, nie trzeba robić wszystko CSS stylizacji każdym razem. Można tylko dodać klasę do elementu, a następnie zostanie ona automatycznie stają się - będzie automatycznie wyszuka odpowiednie dla tej klasy. Możemy również usunąć rzeczy, więc mam zamiar wybrać wszystkie div na stronie i usunąć je. Co to będzie wyglądać? To będzie wyglądać jak nic, więc nie ma właściwie nic. Moja prezentacja nie ma. Można odświeżyć i wprowadzić go ponownie, na szczęście, bo to po prostu działa raz, ale to jest przykład usunięcia, jeśli chcesz, aby całkowicie zniszczyć element poza stronę. 

Możesz również zastąpić, i mam zamiar wybrać wszystkie znaczniki akapitów na stronie i przejść w nich i zastąpić dowolny inny tekst mają w nich z tylko słowo "badanie". Jeśli to zrobisz, możesz zamienić każdy paragraf na stronie z tego badania. Tak. Oni wszyscy zastąpić badania. Więc to jest przykład dostępu do tekstu i zastępowanie go. Można również uzyskać informacje, a to jest naprawdę fajne dla pól wejściowych. Jeśli pole wprowadzania, że ​​ludzie są wpisując rzeczy do, ludzie wpisując rzeczy do niego, tu wybrać wejście, każdy tag wejście w nowy rodzaj tekstu. W tym przypadku jest tylko jedno wejście box w całej prezentacji, więc musimy po prostu wybrać pierwszy z nich, a następnie wywołujemy funkcję val na nim. , Która zwraca wartość, a na polu tekstowym, wartość jest po prostu, co dzieje się w środku. Więc jeśli to zrobimy, to po prostu zwraca rzeczy ciąg. A jeśli nazwiemy go ponownie po napisaniu więcej rzeczy, okazuje się więcej rzeczy. To jeden świetny sposób, aby uzyskać dostęp do elementów na polu tekstowym, a następnie sprawdzić, jest to, że podany adres e-mail, jest to ważna data, na przykład. Możesz tylko pobierać rzeczy od razu, jak ludzie są wpisując je, a następnie sprawdzić, czy to ważne, wysłać go do serwera, rób co chcesz z nim. A to, w jaki sposób uzyskać dostęp do tego, co jest w środku tych polach. 

Można również zmodyfikować CSS bezpośrednio, więc zamiast dodawać Klasa, która ma kilka predefiniowanych właściwości, można po prostu dodać cokolwiek CSS chcesz coś. Warto więc wybrać ciało, które jest cała prezentacja, i kolor jest właściwość, która określa, jakie kolory tekst. Jeśli zmienimy go na czerwono, cały tekst na stronie zmieni kolor na czerwony. Możemy zrobić coś niebieskiego koloru tła, nie idziemy, to jest piękne. Możesz robić co chcesz z tym. Korzystanie z właściwości CSS, naprawdę można zmienić, jak coś wygląda w każdej chwili. Następna sprawa to efekty. Efekty są w zasadzie to samo, co modyfikując CSS, ale rzeczywiście świadczą jakieś dodatkowe animacje do niego. Zamiast więc pokazując lub ukrywając coś lub zmianę koloru, rzeczywiście można zrobić to animowany. Oto dokumentacja, jeśli chcesz zapoznać się z obszerną dokumentacją do niego. Ale mam zamiar pokryć główne z nich. Jest show i właściwości ukryć. Pokaż / ukryj ID rzeczywiście odpowiada całym tym polu, więc jeśli to ukryć, to będzie po prostu zniknąć. I mogę pokazać go ponownie, jeśli chcesz zrobić to wrócić. I to jest z powrotem. To faktycznie nie znikają, I faktycznie nie usunąć go ze strony, po prostu ustawić właściwość CSS widoczność do ukryty , więc nie można zobaczyć go już. Jest też przesunąć w górę i przesuń w dół, która pozwala na taki efekt. To przesuwa się znikać, a po znika można przesunąć go w dół, aby to wrócić. A teraz wracamy. Jest też tego efektu zanikania, które - więdną ID odpowiada tym polu. Gdybym fade out, a następnie będzie ona powoli znikają. Mogę również fade in, i to wróci. Możesz też zrobić blaknięcie do, co jest specyficzne dla blaknięcie funkcji. Możesz mieć to znikną z konkretnym zadymienia, które chcesz. Więc jeśli znikną powoli do 0,5, to będzie się pół widoczne. Mogę zrobić to udać się do 0,1, i z powrotem do 1, aby to w pełni widoczne ponownie. To tylko kolejna animacja, że ​​można zrobić. 

Istnieją również przełączniki efekty. Więc mam zamiar wybrać przełącznik ID, która odpowiada tym polu, i na tym div możesz zadzwonić przełącznik, jeśli jest widoczny stanie się niewidzialny, jeśli jest niewidoczne stanie się ponownie widoczne. Tak właśnie nazywa się to przełącznik funkcji dwa razy, pierwszy był samo jak skóry, drugie połączenie było to samo w formie pokazu. I można to zrobić także z blaknięcie przełącznik, który robi to samo, tylko, że faktycznie zanika. I to samo z suwakiem przełączyć. Jest przykuty efekty, jak również, co oznacza, po wybraniu elementu i po prostu zadzwonić kilka metod animacji na nim, gdybyś go wygasić, a następnie przesuń w dół, a następnie ukryć, a następnie znikają, pojawia się zrobić je w rzędzie. Tak zniknął, powrócił - z jakiegoś powodu, ukryj się nie stało. Spróbujmy go. Tak, więc jest wyciszony, a potem zjechał z dala. I jest wiele więcej. Możesz używać animate funkcji do tworzenia własnych animacji, która jest dość skomplikowane, ale zapewnia nieskończonej rozciągliwości. Można dokonać wszelkiego rodzaju animacji, który chcesz. Można również użyć kolejki w kolejce wielu animacji w czasie. Więc jeśli chcesz coś do pływania w poprzek strony, slajd z góry po prawej na dole po lewej stronie, można to zrobić, i po prostu kilka działań wykraczających jeden po drugim. 

Następną rzeczą, będziemy rozmawiać o to wydarzenia. Zdarzenia pozwalają - jak dotąd, mamy właśnie pisanie rzeczy do konsoli i to jest jeden sposób, aby tak się stało, ale na rzeczywistej stronie, nie będziemy w stanie robić rzeczy typu użytkownika do konsoli. Chcesz rzeczy dzieje się automatycznie. Do tego trzeba użyć zdarzenia, które aktywują się na pewnym określonym zaistnienia zdarzenia. Możesz sprawdzić w dokumentacji pełnych szczegółów. Zobaczmy więc. Chcemy, aby ukryć lub wyświetlić okno, ale teraz ten przycisk nie działa, bo nie wdrożyła jeszcze. Mam zamiar iść do rzeczywistej strony HTML. Oto slide. Jest div na slajdzie. Posiada klasę slajdu. Nie ma tekstu. Teraz, jest to pole i przycisk box. Jak by faktycznie zrobić to zniknąć? Przede wszystkim, niech napisać funkcję, która sprawia, że ​​ID box zniknąć. To jest składnia funtion, po prostu nazwać to hideTheBox. Nie ma żadnych argumentów, bo nie ma żadnych argumentów, które mają być podjęte. Możemy wybrać identyfikator skrzynki. Więc za pomocą jQuery wybrać, możemy wybrać identyfikator skrzynki, a potem po prostu sprawiają, że znikają. Zróbmy to fade out. Jeśli zabrakło tej funkcji w rzeczywistej konsoli możemy zdefiniować tę funkcję, można nazwać hideTheBox, i to działa. Ale chcemy, żeby tak się stało, gdy przycisk jest rzeczywiście wciśnięty. Aby to zrobić, musimy użyć zdarzenia. Aby powiązać zdarzenie do jakiegoś konkretnego przycisku lub jakiegoś happeningu działania, musimy wybrać element, że wydarzenie wywoła - lub że będzie wyzwalać, sorry. 

Więc po pierwsze, niech wybrać przycisk pole ID bo to jest przycisk, a teraz, na tym przycisku, chcemy stworzyć animację kiedy jest kliknięty. Więc jest to funkcja Click. To pozwala powiązać inną funkcję do niego. Funkcja ta ma inną funkcję jako argument możemy przekazać w funkcji hideTheBox, i kiedykolwiek tego przycisku, funkcja ta automatycznie wykonać. Więc to będzie działać, jeśli zapisać to, będę odświeżać, oraz - jedną sekundę, przykro mi. Pozwól mi rozwiązać to naprawdę szybko. Okay. Tam my iść. Więc teraz pole znika, gdy kliknij przycisk. Możemy również zmienić to tylko fadeToggle, zmienić go tak, aby ukryć lub wyświetlić okno, i to będzie także działać także, jeśli mamy odświeżyć. Możemy go ukryć, możemy również pokazać, i że będzie nadal działać. Kolejną rzeczą, którą możemy zrobić, to, że w rzeczywistości nie ma potrzeby definiowania tej funkcji hideTheBox przed wywołujemy funkcję kliknięcia. Więc zamiast definiowania funkcji i wywołanie hideTheBox, jesteśmy tylko będzie to nazwać, jeśli ta sprawa zostanie kliknięty. Można więc określić go anonimowo w tutaj, która to funkcja JavaScript ma. Można zdefiniować funkcję, normalnie, powiedzielibyśmy hideTheBox funkcji z argumentami, ale zamiast tego, możemy tylko powiedzieć funkcjonować żadnych argumentów, rozpocząć nawias klamrowy do określenia funkcji, zamknąć ten nawias kręcone, a potem po prostu zdefiniować funkcję w tutaj, w pierwszym i nawiasach nawiasem ostatniego które odpowiadają na argumenty funkcji kliknięcia. Liczymy więc, przechodząc w tej funkcji, możemy skopiować ten wiersz kodu tutaj, i że zrobi dokładnie to samo. A teraz nie mamy tę funkcję losową fadeTheBox że siedzi wokół bez widocznego powodu. Funkcja została zdefiniowana anonimowo, nie ma nazwy. To tylko wykonać, gdy klikamy na przycisk skrzynki. Więc orzeźwiający raz, jeszcze raz, i widać, że to działa. A to, w jaki sposób tworzyć wydarzenia. 

Istnieje wiele różnych wydarzeń, które możemy wykorzystać. Mam zamiar wrócić do korzystania z konsoli, aby po prostu pokazać, jak te prace. Identyfikatory dla każdego z nich odpowiadają każdym polu. Więc to pole jest ID kliknij ten jest kluczem ID, a ten jest ID myszy. Jeszcze jedno jest to, że istnieje funkcja ta akcja, a nie wpisywać go za każdym razem, I rzeczywiście poszedł do przodu i zdefiniowane tę funkcję działania tutaj. To nie to samo, co funkcji hideTheBox. Robi to pole i albo zanika to z albo zanika go w. A to dlatego, że jesteśmy w stanie użyć go tutaj. Jeśli więc kliknij na ten ID click, chcemy, aby pole znika lub pojawia się ponownie. To samo, jak przycisk, który mieliśmy w ostatnim slajdzie. Teraz po wywołaniu, możemy kliknąć na ten i pole zniknie, następnie kliknij na nią ponownie i ponownie zostanie wyświetlone okno. To bardzo proste. Kliknij dwukrotnie robi to samo, oprócz tego, że wymaga podwójnego kliknięcia. Więc jeśli kliknij na nią raz i kliknij na nią ponownie nic się nie stanie, ale jeśli klikniesz dwukrotnie szybko, to będzie zanikać. Jeśli dwukrotnie kliknij ponownie, to wróci. Więc to jest bardzo proste. Klawiatura jest trochę dziwne, nie sądzę, to rzeczywiście działa w tym przykładzie ponieważ klucz w dół, w górę i naciśnięcie i inne kluczowe działania włączyć bez względu na to element który wiąże go. Na przykład, nawet jeśli wiąże klucz w dół ciała lub coś innego całkowicie, wtedy to jeszcze włączyć bez względu na to - to nie jest specyficzny. I nie trzeba być kliknięcie na to i naciśnij klawisz, aby zrobić coś zniknie. To jest włączana bez względu na to, co elementem jestem obecnie w. Więc nie są one faktycznie pracują w tym przykładzie ponieważ nie uznają mnie jako wejście wejście do div wejścia klawiatury. 

Ale jeśli spojrzeć na działania myszy, Pierwszy z nich jest unosić, a to może zrobić trochę tego za pomocą CSS. Jeśli używasz CSS, można stworzyć go tak, że jeśli po najechaniu na coś, to jego styl się zmienia. Ale za pomocą jQuery można zmieniać style innych rzeczy również. Tak więc, na przykład, mamy zamiar wywołać działania jeśli unoszą się nad tym div. Oznacza to, że jeśli unoszą się nad nim, a następnie pole zniknie. Jeśli poruszamy się z dala od niego, w polu pojawi się ponownie. Jeśli nazywamy to i unoszą się nad nim, box nie zniknie, i jak tylko odejść, to wraca. Jeśli nazywamy tę funkcję aktywowania na identyfikatorze myszy który odpowiada tym polu, a następnie, jeśli wskaźnik nad polu, następnie box rzeczywiście znikają - to jest modny teraz, ale - gdy oddalamy się od niego, będzie się ona ponownie. Teraz to jest do tyłu z jakiegoś powodu. Mysz wprowadzić ruch myszy oraz funkcje są nieco podobne, ale nieco inaczej. Mysz wprowadzić tylko uaktywnia się, gdy mysz wchodzi na pole, zgodnie z oczekiwaniami. Jeśli więc przenieść się do niego, będzie to zniknie. Ale to nie pojawi się ponownie, kiedy odejść, musisz wrócić na nim do niego wrócić. Jest też funkcja move mouse, która aktywuje gdy mysz jest jeszcze obecny w polu. Więc to po prostu zachować na dzieje, blaknięcie i na zewnątrz. I to rzeczywiście zalogowaniu - wydaje się, że to jest po prostu zanika i obecnie, ale to faktycznie zalogowaniu dużo więcej akcji, niż to, więc kiedy odejść to będzie po prostu iść dalej, bo zalogować się jak tysiąc z nich. Może nie tysiące. Może pięć. Loguje więcej. Chodzi o to, wszystkie działania myszy, istnieje wiele z nich. Możesz przeczytać o pozostałych, ale wszystkie są nieco inne, i można wybrać zależnie od tego, którego potrzebujesz w zależności od tego, konkretny cel starasz się zrobić. 

Następną rzeczą, będę mówić o jest AJAX. AJAX, wiem, że nie obejmuje JavaScript w tyle głębi w tym roku, tak mam zamiar mówić o AJAX w ogóle na minutę. AJAX oznacza Asynchronous JavaScript and XML. Jest to w zasadzie, na przykład, gdy jesteś na Facebooku i to popycha cię zgłoszenie, to dlatego, że AJAX jest uruchomiony w przeglądarce internetowej. Co kilka sekund Twoja przeglądarka jest w rzeczywistości dzieje się z serwerami Facebooka, pytając ich, czy masz coś nowego dla mnie, , a następnie wraca do Ciebie. To pozwala na wysyłanie żądań do serwera , bez potrzeby ładowania strony. Tak normalnie, jeśli tylko za pomocą PHP i bazy danych, trzeba odświeżyć stronę, zanim będzie można uzyskać nowe informacje z serwera. Ale za pomocą AJAX, można wyciągnąć na tej nowej informacji stale, lub pociągnąć za to po kliknięciu przycisku lub coś podobnego. Więc to pozwala nam na wysyłanie żądań bez przeładowania strony, i możemy użyć albo GET lub POST. 

GET są, na przykład, jeśli do Google.com in English i zrobić testy q =. To daje im zapytanie test. I to jest żądanie GET, bo to przechodzi w tych parametrów w samym URL. Żądanie POST jest tak jeśli wysyłasz je pocztą. To jak można umieścić go w piśmie i wysłać go do nich, ale w rzeczywistości nie zobaczyć zawartość. Nie są one widoczne w adresie URL. Nie można bezpośrednio wpisać go, trzeba wysłać go niemal w tajemnicy. To w poście. Ale za pomocą jQuery, można zrobić żądań GET i POST znacznie łatwiej niż normalnie można używając tylko zwykłego JavaScript. Możesz zapytać API przy użyciu żądań GET, można również sprawdzić informacje logowania. Na następnej stronie, stworzyłem ten, który pyta: "Co na obiad?" Harvard żywności za pomocą interfejsu API, więc niech to ciągnąć, że się. To tylko przykład jak można użyć jQuery zrobić żądanie GET do API i uzyskać informacje z powrotem od niego. Dlatego chcemy, aby wyświetlić menu na dzisiaj, i chcemy, aby zobaczyć, co jest na obiad. Oto adres URL do tworzenia żądania GET w jQuery. używasz $. uzyskać funkcję. Pierwszy argument to URL, więc dokładnie to, czego odpytywania. Potem następny argument to funkcja, która wykonuje żądania GET po zakończeniu. Więc wysyłaj jakieś żądanie do serwera, poczekaj, aż wróci. Gdy to nie wróci, masz zamiar podjąć pewne działania z danych, które z serwera. Idziemy naprzód i kodować to za dobrze. I nie koduje tego albo, w celu. Oto TODO. Przede wszystkim, użyjmy wiązania zdarzeń tak, że gdy ten przycisk jest wciśnięty, wysyłamy od żądania GET. A kiedy to GET zwraca zapytanie z niektórych danych, mamy zamiar napisać to w tym informacji posiłku div id. Przede wszystkim, niech wybierz przycisk ID jedzenie. W przypadku, gdy użytkownik klika, chcemy, aby coś zrobić. Chcę po prostu zrobić to anonimowo fuction, jak wcześniej. Można owinąć te nawiasy klamrowe, a gdy ten przycisk jest wciśnięty, chcemy wysłać żądanie GET , aby sprawdzić, co jest na obiad. Aby to zrobić, możemy po prostu wpisać $. Dostać. To jQuery funkcja, za pomocą znaku dolara. To trwa kilka argumentów. Pierwszy to adres URL, Drugi jest funkcja zwrotna, funkcja, która się nazywa gdy wniosek ten rzeczywiście zwraca. Miejmy tylko zbudować domową pierwszy. Możemy go z API, które David napisał up. Idąc tutaj, widzimy, że jest to food.cs50.net/api/1.3/menus, a potem po prostu przejść w nazwach parametrów, które chcesz. Więc parametr 1 jest wartość 1. To wygląda jak standardowy dzień, datę rozpoczęcia, domyślnie do dzisiaj jeśli nie wprowadzić nic, i zakończenia także domyślnie do dzisiaj, jeśli nie wprowadzono żadnych danych. To jest to, co chcemy. Chcemy po prostu uzyskać informacje na dziś. 

Chcemy być w formacie JSON. To jest po prostu arbitralne, można stosować dowolną postać, którą chcesz. Możesz używać CSV, ale JSON jest JavaScript Object Notation. Jest bardzo łatwy w JavaScript, aby zrozumieć, co oznacza, i możemy wydrukować go łatwiej w ten sposób. Warto więc poprosić go w JSON, i obiad niech wniosek. Więc posiłek obiad =. Wystarczy napisać na ten adres URL, wrócimy tu. Nie ma menu. Pierwszym parametrem jest moc = JSON bo to jest to, co chcemy, i oddzielić parametrów z "i". Drugim parametrem jest - nie pamiętam. Meal. I chcemy obiad = posiłek. Można przetestować ten adres, wpisując go w przeglądarce i będzie do niego. To daje jakieś wyjście. To tylko kilka rzeczy, które znajduje się na lunch. Jest w tym brzydkim formacie. Chcemy, aby wydrukować go na naszej stronie w lepszej formie. Więc URL jest poprawny, teraz musimy tylko napisać funkcję się połączyć, gdy wniosek jest udany. Funkcja ta będzie faktycznie jeden z argumentów. Będzie danych. Danych, co wraca z GET po Żądanie GET jest zrobione. Możemy robić nawiasy klamrowe; tu piszemy funkcję anonimowego które wykonuje, wykorzystując te dane, gdy otrzymamy informacje z powrotem. Więc danych, gdy wpisaliśmy w tym URL, to jest to, co dane będzie wyglądać. To będzie ten wielki łańcuch. Ale dobre jest to, JavaScript może przetworzyć go za pomocą JSON.parse funkcji. Warto więc stworzyć nową zmienną o nazwie dane analizowania. A dane parse jest tablica obiektów. Każdy obiekt zawiera informacje, takie jak - cóż, rzućmy okiem. Ma datę, posiłek, kategorię, przepis, wszystkie te inne rzeczy. Więc po prostu wydrukować imię dla każdego z nich. Miejmy iteracyjne nad całym szeregu rzeczy, które możemy odzyskać od niego, i po prostu wydrukować każdy - wydrukuj nazwę każdego z nich. To jest w pętli. 

JavaScript ma tego jako składni, gdzie można utworzyć zmiennej i pętli nad tablicy, i var i jest tylko iterator, więc zamiast zrobić var ​​i = 0, i była mniejsza niż długość, i + +, można po prostu zrobić var ​​i w analizowanych danych. W tym przykładzie, przeanalizowane dane (I) będzie odpowiadać bieżącego elementu z tablicy, rzeczywisty obiekt. I chcemy, aby uzyskać nazwę z niego. Więc zróbmy nazwa. I ostatnia rzecz jest, będziemy mieć trochę jQuery ponownie. Właściwie dodać go do div div informacji, ten posiłek, który jest pusty. Warto więc wybrać, które. Będziemy używać jQuery i wybierz informacji posiłek ID div lub identyfikatora informacji posiłek, sorry. Chcemy, aby dołączyć do tego. Jeśli zrobiliśmy testy, na przykład, że to po prostu zastąpić go za każdym razem. Tak więc możemy po prostu dodać to. Aktualny element tablicy, będziemy mieć nazwę z niego, a my dołączyć go do końca informacji posiłku div id. A potem po prostu, aby wyglądać czystsze, my również dołączyć na końcu linii, więc nie wszystko jest w jednej linii. Tak więc, jeśli wszystko pójdzie dobrze, to powinno być dobrze - przede wszystkim, gdy tego przycisku, wysyła się żądanie GET do tego adresu URL. Gdy dane wraca z nim, to będzie analizować je, przekształcić go w JSON, pętli na całej tablicy reprezentującej te dane, a następnie dodać nazwę i koniec linii do każdego wiersza w tym informacji ID posiłek, który był wcześniej pusty. Tak więc wracając do tej strony, odświeżenie, kliknij, dowiedzieć się - to nie działa. To niefortunne. I tu wkracza debugowanie Index.html, line 1. To jest interesujące. Dobrze, dobrze, a nie spędzać czas robi to, jestem po prostu będzie podciągnąć zrobić plik, który mam, która jest zakończona wersja. Nie jestem pewien, jaka jest różnica, ale może po prostu otworzyć ten fakt, zamiast. I idziemy na AJAX, a to powinno działać prawidłowo. To jest to, co było na obiad dzisiaj, w przypadkowej kolejności, w cudzysłowie, więc to nie jest najładniejszy. Ale, oczywiście, jeśli robisz to dla ostatecznego projektu, chcesz, żeby wyglądało lepiej. Ale to tylko prosty przykład, w jaki sposób wykonać żądanie GET. A jeśli spojrzeć na rzeczywisty kod, zgaduję, jestem pewien, to wciąż niemal tak samo. Oh, zapomniałem przekonwertować go na ciąg, to jest to. Nie, dalej nie działa. Niezależnie, oto rzeczywisty wypełniony kod za to, co powinno to wyglądać, i to nie to samo, co to, co właśnie realizowane. Po kliknięciu na przycisk, używa GET JSON automatycznie analizować dane. Zajmuje dane z powrotem z niego i pętle przez cały szereg i wypisuje na - wszystko co dziś na obiad, nazwę to, i dołącza do nowego wiersza po każdym wierszu. To, w jaki sposób korzystać z funkcji GET. 

Można również użyć POST, które nie mają czasu pisać się przykładem dla niego, ale możemy spojrzeć na dokumentacji. Jeśli spojrzeć na jquery.post, widać, że jest to prawie to samo. Masz adres URL, ale zamiast przekazywania parametrów za pomocą - po prostu umieszczając je w ciąg na samym URL, trzeba przejść w tej zmiennej danych , że jest w zasadzie tablicy, słownik, który mapuje parametry do wartości. Mijamy że, i że wysyła je w użyciu POST. A kiedy już to, to możesz mieć funkcję sukces które wykonuje, gdy dane wraca. W przeciwnym razie jest to dokładnie to samo. Więc za pomocą POST, możesz użyć POST, na przykład, jeśli masz formularz wejściowy niech ludzie haseł wejściowych do niego i wysłać te hasła off do back-end skryptu, aby sprawdzić w bazie danych, czy użytkownik jest ważny, czy nie. Możesz zrobić wszystko przy użyciu jQuery zamiast odświeżyć stronę w ogóle. Tak właśnie realizowane w blogu, że pokazałem wcześniej. Jeśli idziemy do portalu końcowego i wylogować się, zaloguj się, Zaloguj się, nie działa. Cóż, pozwól mi tylko otworzyć go w nowym oknie. Tu jest hasło, i miałem zamiar wpisać coś losowego. To nie działa, ale widać, że nie rzeczywiście trzeba odświeżyć stronę w ogóle. Kod, jeśli chcesz spojrzeć na to, wszystko jest dostępne tutaj. Więc kod pisałem w zeszłym roku gdzieś. Jak widać tutaj, wysyłamy żądania POST. Mam plik o nazwie login.php na tylnym końcu, który sprawdza, czy hasło jest ważne. Parametry mijamy w to hasło, przypisane do Wejście to jest w tym polu tekstowym obecnie. A kiedy dane wraca, możemy sprawdzić. Jeśli dane są fałszywe, to mówimy, niepoprawne hasło, przesuń go w dół, i po prostu sprawiają, że znikają po tym. W przeciwnym razie, możemy załadować administratora strony. I to wszystko było zrobione za pomocą JSON. W tym wiele linii kodu, można po prostu przekazać dane do tylnego końca, sprawdzić, czy jest on poprawny, sprawdź, czy jesteś zalogowany w pełnym zakresie, i właściwie reagować na to, skierowanie osoby do właściwej strony lub nie pozwalając im zalogować się i mówi im, że mieli błędne hasło. Więc to jest przykład jak można użyć jQuery POST wysłać żądanie POST do back-end, sprawdzając, czy ktoś poprawnie zalogowany. 

W porządku, więc to wszystkie przykłady miałem i wszystkie rzeczy chciałem pokryć. To są najważniejsze rzeczy, które jQuery pozwala zrobić: wybierz elementy, zmodyfikować je za pomocą manipulacji DOM, można dodawać efekty, włączyć rzeczy na pewnych zdarzeń, a także do żądań AJAX bardzo płynnie i łatwo. Więc dziękuję za przybycie lub oglądania, a jeśli masz jakiekolwiek pytania, po prostu daj mi znać. Tak? [Student] Powrót kiedy pokazał, miałeś JSON po żądania POST w cudzysłowie, i byłem po prostu zastanawiasz się, co to zrobił. >> Tak, widzę. Pytanie było, że w tym przykładzie po prostu pokazał, było JSON słowo w cudzysłowie - Ja po prostu wyciągnąć go ponownie - całego POST funkcji. Jestem po prostu wyciągając ją pokazać. Więc to jest żądanie POST, a tam to jest JSON w cudzysłów. To właśnie określa, co spodziewamy wyjście być. Więc jeśli mamy przejść w JSON jako oczekiwanego typu danych, Wymaganie to nie jest, ale jeśli mijamy go, Następnie dane są automatycznie analizowane jako JSON. Tak więc nie mamy do wywołania funkcji parse JSON na nim, będzie to po prostu dzieje się automatycznie. A jeśli spojrzeć na dokumentacji POST nie jest to typ danych zmiennej, typ danych oczekiwanych z serwera. Domyślnie jest to inteligentny przypuszczenie, że mogą się mylić, więc można pozostawić puste, ale to jest po prostu rodzaj danych w kodowaniu, że używasz, czy to JSON lub XML lub coś innego. 

Jeszcze jakieś pytania? Dobrze. Jeśli masz jakieś pytania, nie wahaj się napisz do mnie w vshekhawat@college.harvard.edu, i slajdy i kod powinien być dostępny w sieci już wkrótce. Powodzenia ostatecznych projektów, nadzieję, że korzystać z jQuery. [CS50.TV]