1 00:00:00,110 --> 00:00:00,530 W porządku. 2 00:00:00,530 --> 00:00:01,500 Witamy spowrotem. 3 00:00:01,500 --> 00:00:03,350 Więc zacznijmy od pisania kodu. 4 00:00:03,480 --> 00:00:07,290 A pierwszą rzeczą, mamy zamiar dowiedzieć się, jak zrobić to jak wybrać elementy. 5 00:00:07,290 --> 00:00:13,310 Tak samo jak przy regularnym dominującej związku lub fonologii Tak musimy wybrać rzeczy, a następnie manipulować. 6 00:00:13,380 --> 00:00:18,300 Wiem, że jestem trochę zdarta płyta tam, ale jest to bardzo ważny proces, wybierz, a następnie zmienić ten stan rzeczy. 7 00:00:18,300 --> 00:00:24,230 Ten film będzie koncentrowała się głównie na wyborze elementów z J Query dla dwóch głównych celów tutaj. 8 00:00:24,390 --> 00:00:33,500 Pierwszym z nich jest uczenie się, jak wybrać elementy z funkcją znak dolara, a następnie także za pomocą C ocenianą metodę projektować elementy. 9 00:00:33,630 --> 00:00:45,210 Więc my nie tylko coraz wybierz rzeczy po prostu wydrukować je, ale aby uczynić go bardziej wizualne Będziemy je zaznaczyć, a następnie zmienić kolor tła i Jay zapytanie możemy wybrać wszystko, co chcemy za pomocą tylko jednej funkcji. 10 00:00:45,570 --> 00:00:46,800 Znak dolara. 11 00:00:46,920 --> 00:00:55,650 Tak więc w przeciwieństwie waniliowym J.S. gdzie mamy dokument uzyskać elementu przez Query query ID selektor selektor wszystkie elementy nazwy klasy dostać się elementy według nazwy znacznika. 12 00:00:55,650 --> 00:01:00,840 Istnieje tak wiele różnych sposobów, wybierając znak dolara i Jay zapytanie zastąpi je wszystkie. 13 00:01:00,990 --> 00:01:07,230 To w zasadzie działa jak selektor zapytań wszystkim na tym, że dajemy mu selektor stylu C SS. 14 00:01:07,320 --> 00:01:12,370 A potem Jay zapytanie zwraca wszystkie elementy pasujące pasujące do selektora, że ​​damy mu. 15 00:01:12,720 --> 00:01:25,460 Więc mam tu przykład, jeśli chcemy wybrać wszystkie znaczniki obrazu na stronie, to po prostu wygląda tak, jeśli chcemy, aby zaznaczyć wszystkie elementy z klasą skali robimy kropki skalę. 16 00:01:25,620 --> 00:01:28,380 Pamiętaj, to jest ustawiony selektorów stylu. 17 00:01:28,380 --> 00:01:39,000 Więc dla identyfikatora musimy łuk Thorpe dla klasy, którzy potrzebują kropkę możemy również zrobić kilka bardziej zaawansowanych rzeczy jak to wybranie wszystkie znaczniki zakotwiczenia, które są wewnątrz elementów listy. 18 00:01:39,360 --> 00:01:41,900 Więc zrobię szybki demo tutaj o tym, jak to działa. 19 00:01:42,060 --> 00:01:47,750 Mamy więc nasze demo Jake Querrey wieku mu naszą stronę skonfigurować gdzie mam CDN włączone. 20 00:01:48,300 --> 00:01:54,180 I nie ma znaczenia, czy używamy słowa N lub jeśli chcesz użyć pobranego kopię będzie działać w ten sam sposób. 21 00:01:54,180 --> 00:01:58,110 Więc musimy tego skryptu tutaj i to musimy pewne treści do zabawy. 22 00:01:58,110 --> 00:02:00,410 Więc będę trzymać H-1 S. J. Rdzeń demo. 23 00:02:00,510 --> 00:02:06,270 Będę zmieniać tych sojuszników, aby uczynić je nieco bardziej wyjątkowy więc będę wypełnić go niektóre z moich ulubionych zwierząt. 24 00:02:06,480 --> 00:02:08,260 Więc koniec jest dla Newt. 25 00:02:08,520 --> 00:02:15,510 Mój pięcioletni self ulubiona część utworu alfabetu zwierząt doda w innym jednym z moich ulubionych albumu Monkey. 26 00:02:15,870 --> 00:02:19,050 A potem wreszcie sosna Martin. 27 00:02:19,680 --> 00:02:24,820 A jeśli nigdy wcześniej nie widział kuna leśna są równie urocze i przerażające zwierzę. 28 00:02:24,950 --> 00:02:27,190 Więc można zobaczyć tutaj całkiem urocze. 29 00:02:28,060 --> 00:02:32,690 Ale jeśli spojrzeć na nich działania są szalone drapieżnikami i dość przerażające. 30 00:02:33,000 --> 00:02:33,270 OK. 31 00:02:33,300 --> 00:02:38,770 Tak więc niektóre z moich ulubionych zwierząt na liście będzie zapisać i otwórzmy to się teraz. 32 00:02:39,720 --> 00:02:41,150 Upewnij się, że jesteśmy we właściwym katalogu. 33 00:02:41,200 --> 00:02:53,620 Jay wydobywany demo że każdy Chimo i co zrobię to przesunąć się w osobnym oknie, a my po prostu pójść w konsoli aby rozmiar czcionki trochę większy i użyjmy zapytania, aby wybrać niektóre z tych rzeczy. 34 00:02:53,640 --> 00:02:56,100 Więc pamiętaj znakiem dolara jest funkcją. 35 00:02:56,520 --> 00:03:00,490 A jeśli po prostu wpisać znak dolara na jego własne bez nawiasów. 36 00:03:00,720 --> 00:03:08,700 To tak jak ja wpisując wpisu bez nawiasów lub CON. log dot bez nawiasów naprawdę nie robić nic oprócz powiedz. 37 00:03:08,940 --> 00:03:12,610 Tak, wiem o tym kodzie, ale faktycznie nie wykonuje go. 38 00:03:13,170 --> 00:03:16,860 Zacznijmy od wyboru tylko H-1 na stronie, aby to zrobić. 39 00:03:16,860 --> 00:03:24,550 Możemy użyć znak dolara i selektor s, aby wybrać tylko te, H H-1 i wciśnij enter. 40 00:03:24,600 --> 00:03:27,480 Widać zwraca J queery demo H-1. 41 00:03:27,630 --> 00:03:30,110 Tak też zauważyć, że jest w środku listy. 42 00:03:30,300 --> 00:03:36,480 Tak więc w przeciwieństwie do selektora zapytań gdzie zwraca pierwszej instancji selektor znak dolara. 43 00:03:36,480 --> 00:03:43,310 Zapytanie zwróci listę, nawet jeśli jest tylko jeden element, który jest rzeczywiście przydatne, a my zobaczymy, że w trochę. 44 00:03:43,320 --> 00:03:53,150 Więc spróbujmy wybraniu wszystkich sojuszników, tak teraz możemy zrobić coś jak znak dolara sojusznikiem i mamy trzy sojuszników tak po prostu. 45 00:03:53,490 --> 00:03:59,130 Możemy również wybrać ciało wpisując ciało i zrobić rzeczy trochę bardziej interesująca. 46 00:03:59,130 --> 00:04:20,430 Wróćmy do naszego wieku e-mail i dodaj w średnica wewnętrzna z sosny martin nazwijmy go urocza jak ID, a następnie możemy również na naszej Wyjec doda tag Wyjec i będzie to po prostu pójść do małpiej kropka com i to będzie tylko małpa dot com. 47 00:04:20,730 --> 00:04:30,550 A jeśli odświeżyć jeśli chcę zaznaczyć, że link użyłbym dolara i mogę po prostu zrobić tag kotwicy i że będzie mi go dać. 48 00:04:30,600 --> 00:04:34,740 Mogę też powiedzieć, znacznik zakotwiczenia wewnątrz sojusznika. 49 00:04:34,980 --> 00:04:40,770 Mógłbym też, jeśli naprawdę chciałem tylko powiedzieć znaczniki zakotwiczenia wewnątrz sojuszników, które zamiast woli. 50 00:04:41,100 --> 00:04:43,990 Oraz w każdym przypadku do tej pory te są identyczne. 51 00:04:44,160 --> 00:04:51,270 Ale jeśli mogę dodać inny znacznik zakotwiczenia tylko na dole strony dot com Google i odświeżyć. 52 00:04:51,810 --> 00:04:55,290 A teraz robię moje tag znak dolara zakotwiczenia. 53 00:04:55,290 --> 00:04:57,350 Mam oba znaczniki kontrolne. 54 00:04:57,820 --> 00:05:05,820 Jeśli robię znak dolara UL z sojusznikiem z tagiem kotwicy wewnątrz, że to tylko daje mi ten znacznik zakotwiczenia. 55 00:05:05,970 --> 00:05:27,890 Albo może właśnie skrócona to tu, to tam idziemy, aby wybrać pozycję z ideą urocza To działa podobnie jak queery wybrać lub całość lub selektor pytanie lub Css dla tej sprawy, gdzie muszę arktycznych lub skrótu symbol plus Nazwa ID urocza i że daje mi kuna sojusznika. 56 00:05:27,940 --> 00:05:33,660 Tak więc widzieliśmy, jak wybrać i nie jest bardzo ekscytujące, po prostu wydrukować rzeczy do konsoli lub po prostu je zobaczyć wrócił tutaj. 57 00:05:33,670 --> 00:06:00,440 Ale ja naprawdę chcę zrobić, to wprowadzić jeden sposób mamy zamiar zobaczyć wiele więcej metod w ciągu najbliższych kilku filmach, ale mam zamiar pokazać jeden teraz, że pomogą nam dokonać rzeczy wizualne i pomóc nam zmienić stylizacji, tak aby metoda nazywa Dotsie SS i sposób, że działa to możemy wpisać znak dolara selektora i jakiś przełącznik, a następnie możemy dodać Dotsie SS na koniec, że i przekazać go w niektórych właściwości i wartości zmienić. 58 00:06:00,450 --> 00:06:11,220 Tak oto przykład ja wybierając coś z idei specjalnego, a następnie biegnę się CSSA na nim i zmieniając granica będzie świecić na czerwono dwa pikseli. 59 00:06:11,500 --> 00:06:13,190 Więc pozwól mi udowodnić, że. 60 00:06:13,300 --> 00:06:15,400 Zróbmy to na H-1. 61 00:06:15,390 --> 00:06:21,390 Więc wybierz znak dolara H-1 Dotsie SS Właśnie tak. 62 00:06:21,610 --> 00:06:30,380 A potem, zamiast tutaj, zmieńmy kolor żółty być tak po prostu. 63 00:06:30,630 --> 00:06:31,480 I wciśnij enter. 64 00:06:31,600 --> 00:06:34,980 I widać, że zmienia się na żółty, który jest niesamowite. 65 00:06:35,310 --> 00:06:39,420 Więc to zawsze dobrze jest pamiętać, jak można to zrobić bez j Querrey. 66 00:06:39,630 --> 00:06:54,840 Więc chcemy zrobić coś takiego dokumentu, który GET i zróbmy wyboru zapytań Dokument H-1 kropka i B nie mają, że C Ss Więc musimy zrobić styl dot kolor kropki równymi. 67 00:06:54,940 --> 00:06:56,700 I zmieńmy go na pomarańczowo. 68 00:06:57,690 --> 00:06:58,400 I tam idziemy. 69 00:06:58,440 --> 00:07:06,300 Zmieniliśmy ją pomarańczowy, ale ta linia właśnie tutaj jest rzeczywiście dużo bardziej wydajne i mogą zrobić o wiele więcej, niż możemy zrobić z tym jednym wierszu tutaj. 70 00:07:06,550 --> 00:07:14,100 Więc załóżmy, że chcę zmienić wiele stylów o tym H-1 Chciałem zmienić kolor i kolor tła i obramowania. 71 00:07:14,110 --> 00:07:19,240 Co mogę zrobić, to zdefiniować moje style w obiekcie i przekazać obiekt w. 72 00:07:19,480 --> 00:07:24,250 Więc nie mam po prostu zrobić ciąg Porter przecinkiem wartość dla Porter. 73 00:07:24,550 --> 00:07:31,070 mogę zdefiniować obiekt z wielu właściwości wielu par wartości klucza i przekazać, że i wszystkie będą stosowane. 74 00:07:31,360 --> 00:07:32,500 Więc zróbmy to teraz. 75 00:07:32,760 --> 00:07:37,080 Zdefiniujmy nasze style i nie trzeba wprowadzać oddzielny obiekt. 76 00:07:37,120 --> 00:07:38,250 Pokażę ci to. 77 00:07:38,350 --> 00:07:56,340 I zamiast tutaj powie kolor powinien być czerwone tło powinno być różowe i zrobimy graniczne powinny być dwa piksele stałe purpurowe tak po prostu. 78 00:07:56,740 --> 00:08:02,460 A jeśli trafiliśmy Wprowadź teraz mamy nasze style obiektów i znowu, że można nazwać cokolwiek. 79 00:08:02,740 --> 00:08:05,060 I co wtedy zrobimy to wybierz H-1. 80 00:08:05,310 --> 00:08:14,950 Więc znak dolara H-1 ponownie gutsiest nami, a my po prostu zdać się nasze style obiektu i wszystkich tych stylów są stosowane. 81 00:08:15,190 --> 00:08:19,720 Więc to zrobić bez zapytania j wymagałoby nam zrobić trzy oddzielne linie. 82 00:08:19,750 --> 00:08:32,400 trzeba by zrobić dokument querist Niech Twój H-1 Styl ciemny kolor czerwony jest równy, a następnie kropkę stylu dot tle jest równa różowy, a następnie, że styl, który jest równy granicy dwóch pikseli stałe fioletowy. 83 00:08:32,710 --> 00:08:35,580 Mam nadzieję, że widać już, że z zaledwie kilku linii. 84 00:08:35,640 --> 00:08:38,240 J Zapytanie jest już okazały się być dość silny. 85 00:08:38,520 --> 00:08:44,370 I chociaż możemy robić wszystko bez niego to zdecydowanie oszczędzało nam trochę czasu i uczynienie naszego kodu czyszczącego. 86 00:08:44,710 --> 00:08:58,160 Jest jeszcze jedna cecha metody dot CSSA sprawia, że ​​jeszcze bardziej użyteczna, że ​​pokażę co teraz możemy zrobić, to faktycznie styl wielu elementów naraz, zamiast po prostu wybierając pierwszy i uczynienie go żółty. 87 00:08:58,260 --> 00:09:03,290 Możemy wybrać wszystkie z nich lub wszystkich sojuszników i musimy tylko jedną linię, aby to zrobić. 88 00:09:03,340 --> 00:09:04,110 Więc ja ci to pokazać. 89 00:09:04,110 --> 00:09:06,430 Teraz zróbmy wszystkie kłamstwa. 90 00:09:06,970 --> 00:09:09,580 Tak więc, aby to zrobić muszę wybrać sojuszników. 91 00:09:09,730 --> 00:09:11,550 Więc tak po prostu. 92 00:09:11,550 --> 00:09:12,650 I jeśli nacisnąć enter. 93 00:09:12,780 --> 00:09:31,940 Zobaczysz, że to daje mi trzy sojuszników, a potem muszę łańcuchem na Css, a ja po prostu nadać mu kolor pojedynczej właściwości i zmienić go za niebieskie ot tak, a ja nacisnąć enter i zauważyć ten jeden linia zmienia wszystkie trzy sojuszników. 94 00:09:32,350 --> 00:09:34,610 Więc na pewno bardzo mocny. 95 00:09:34,650 --> 00:09:46,030 Wszystko, co zrobić, to wybrać z naszym znakiem dolara selektor sojusznika, a to daje nam trzy sojuszników i wykonując Dotsie SS na tablicy tu ALWIS tej liście sojuszników. 96 00:09:46,240 --> 00:09:52,320 To faktycznie pozwoli im wszystkim niebieski i nawet nie trzeba ręcznie pętli poprzez jakbyśmy byłoby bez zapytania. 97 00:09:52,360 --> 00:09:59,360 Więc po prostu przypomnieć, jeśli chcę zmienić ich wszystkich, aby być zielone bez zapytania po raz pierwszy należy wybrać wszystkie z nich. 98 00:09:59,500 --> 00:10:06,570 Więc var sojusznicy równa udokumentować, że selektor kwerendy wszystkich przejść w sojusznika strun. 99 00:10:06,790 --> 00:10:08,390 A potem muszę pętli. 100 00:10:08,520 --> 00:10:15,350 Więc dla mnie jest równa zeru var wynosi mniej niż Elvises na długości ja plus plus. 101 00:10:16,260 --> 00:10:30,100 A potem wewnątrz pętli musimy zrobić sojusznikom I, styl, który kolor jest równy, a my dołożymy zielone ot tak, a my wciskamy enter. 102 00:10:30,390 --> 00:10:32,850 I można zobaczyć wszystkie one zmieni kolor na zielony. 103 00:10:32,860 --> 00:10:36,800 Więc znowu to wykonalne bez zapytania, ale jest to znacznie więcej kodu. 104 00:10:36,900 --> 00:10:40,780 Musimy je wyselekcjonować wszystko pierwsze, a nawet po prostu wybierając ich jest bolesna. 105 00:10:40,770 --> 00:10:43,820 Jest to o wiele dłużej niż tylko znakiem dolara. 106 00:10:43,870 --> 00:10:53,450 A potem musimy także pętli ręcznie za pomocą pętli for lub while, a następnie zmienić każdą z nich indywidualnie, a następnie skończymy z kwerendy chociaż. 107 00:10:53,560 --> 00:11:02,900 Wszystko co musieliśmy zrobić, aby powrócić do niebieskiego jest zaznaczenie wszystkich sojuszników Dotsie SS, a następnie przekazać do naszej nieruchomości, która jest niebieski kolor niebieski. 108 00:11:03,420 --> 00:11:05,260 będę wykazywać jeszcze kilka przykładów tutaj. 109 00:11:05,430 --> 00:11:20,970 Załóżmy, wybrać wszystkie znaczniki zakotwiczenia podobnie jak ten znacznik, że C SS i dołożą rozmiar czcionki większy rozmiar czcionki i tak będzie to 40 pikseli i tam idziemy. 110 00:11:20,980 --> 00:11:31,140 Otrzymujemy duże powiązania Ja też pokazać, że możemy zdefiniować obiekt pełen stylów jak my wcześniej i możemy używać, aby wiele elementów stylu nie tylko jeden. 111 00:11:31,240 --> 00:11:44,890 Będziemy więc wybrać wszystkie kłamstwa i styl ich razem i zamiast po prostu robi SS i przechodzącą w ciągu jak kolor damy mu obiekt i po prostu zdefiniować go w miejscu tutaj. 112 00:11:45,550 --> 00:11:47,920 I dodamy w jakiejś przestrzeni, żeby pisać. 113 00:11:48,420 --> 00:11:52,340 A pierwszą rzeczą, zrobimy to zmienić rozmiar czcionki na wszystkie z nich. 114 00:11:52,540 --> 00:12:01,300 Więc NCSA jak rozmiar czcionki, rozmiar czcionki jest Dasch lub wysokość i wielkość w JavaScript i J zapytania musimy użyć sprawę wielbłąda. 115 00:12:01,480 --> 00:12:21,140 Więc rozmiar czcionki nie ma miejsca lub nie kreska ale wielkie s członkiem to przypadek Kimbal a my ich 10 zróbmy jeszcze 10 pikseli, a następnie dodamy w granicy, a ten będzie trzy pikseli Dasht fioletowy. 116 00:12:21,340 --> 00:12:23,610 Te granice przerywane są zawsze wspaniałe. 117 00:12:23,980 --> 00:12:27,840 A potem wreszcie dodać kolor tła tle. 118 00:12:28,140 --> 00:12:30,490 I niech tylko uzupełnić nasz własny R. G. kolor. 119 00:12:30,660 --> 00:12:31,670 Więc R. G. B. 120 00:12:31,710 --> 00:12:33,540 I zrobimy naszą G.P.A. tak właściwie. 121 00:12:33,690 --> 00:12:36,640 I pierwszy odczyt będzie zbyt. 122 00:12:37,070 --> 00:12:43,340 89 czerwony 45 zielony 20 niebieski. 123 00:12:43,480 --> 00:12:49,490 A następnie 0,5 Alpha, który jest zmętnienie lub przezroczystość kanału. 124 00:12:49,620 --> 00:12:54,490 A jeśli trafiliśmy wprowadzić można zauważyć, że wszystkie te są stosowane jednocześnie. 125 00:12:54,630 --> 00:12:58,110 Więc nasz rozmiar czcionki kurczą Mamy 10 pikseli. 126 00:12:58,260 --> 00:13:13,060 Mamy te wspaniałe ramki wokół sojuszników, że są trzy piksele Dasht fioletowy i wtedy mamy kolor tła, który jest cokolwiek ten kolor okazał się wygląda jak swego rodzaju jasnobrązowawy koloru. 127 00:13:13,090 --> 00:13:13,360 W porządku. 128 00:13:13,360 --> 00:13:22,070 Więc mam nadzieję, że widać z tej szybkiej demonstracji tylko dwie różne rzeczy, które robimy, wybierając ze znakiem dolara i że na własną rękę jest niezwykle silny. 129 00:13:22,090 --> 00:13:26,390 To w zasadzie działa jak queery Slichter i queery selektora wszystkich razem wziętych. 130 00:13:26,640 --> 00:13:29,620 I to jest znacznie krótszy i łatwiejszy do napisania składni. 131 00:13:29,910 --> 00:13:45,040 I to nie jest metoda CSSA który jest również bardzo silne, ponieważ możemy zmienić poszczególne właściwości jak my tutaj, ale możemy również Massas podpisać właściwości CSSA jak my tu, gdzie przechodzą w obiekcie pełnym par wartości klucza. 132 00:13:45,100 --> 00:14:03,830 Prawdopodobnie najważniejszą częścią tego wszystkiego jest to, że kiedy wybrać kolekcję jak wszystkich sojuszników jak ja tu nie trzeba ręcznie przez pętlę i zastosować coś indywidualnie jak ja się tu, gdzie mieliśmy do pętli wszystkich sojusznicy i zmienić jeden kolor na raz z J zapytania. 133 00:14:03,930 --> 00:14:12,990 Jeśli mam kolekcję elementów automatycznie pętle nad tym i stosuje Dotsie ocenić, na każdy jeden. 134 00:14:12,990 --> 00:14:14,600 Więc to jest bardzo silny. 135 00:14:14,770 --> 00:14:19,770 I dlatego tak na marginesie to dlaczego to zawsze zwraca tablicę tutaj. 136 00:14:19,890 --> 00:14:28,370 Nawet jeśli mam tylko jeden element z identyfikatorem urocza zawsze zwraca go na liście, ponieważ cała logika kulisami polega pętli na tej liście. 137 00:14:28,470 --> 00:14:31,860 Tak będzie w pętli nad tym i po prostu zdarza się, że istnieje jedna pozycja tutaj. 138 00:14:31,890 --> 00:14:33,030 Tak naprawdę nie ma pętli. 139 00:14:33,040 --> 00:14:34,540 To po prostu idzie na raz.