W porządku.
Witamy spowrotem.
Więc zacznijmy od pisania kodu.
A pierwszą rzeczą, mamy zamiar dowiedzieć się, jak zrobić to jak wybrać elementy.
Tak samo jak przy regularnym dominującej związku lub fonologii Tak musimy wybrać rzeczy, a następnie manipulować.
Wiem, że jestem trochę zdarta płyta tam, ale jest to bardzo ważny proces, wybierz, a następnie zmienić ten stan rzeczy.
Ten film będzie koncentrowała się głównie na wyborze elementów z J Query dla dwóch głównych celów tutaj.
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.
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.
Znak dolara.
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.
Istnieje tak wiele różnych sposobów, wybierając znak dolara i Jay zapytanie zastąpi je wszystkie.
To w zasadzie działa jak selektor zapytań wszystkim na tym, że dajemy mu selektor stylu C SS.
A potem Jay zapytanie zwraca wszystkie elementy pasujące pasujące do selektora, że ​​damy mu.
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ę.
Pamiętaj, to jest ustawiony selektorów stylu.
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.
Więc zrobię szybki demo tutaj o tym, jak to działa.
Mamy więc nasze demo Jake Querrey wieku mu naszą stronę skonfigurować gdzie mam CDN włączone.
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.
Więc musimy tego skryptu tutaj i to musimy pewne treści do zabawy.
Więc będę trzymać H-1 S. J. Rdzeń demo.
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.
Więc koniec jest dla Newt.
Mój pięcioletni self ulubiona część utworu alfabetu zwierząt doda w innym jednym z moich ulubionych albumu Monkey.
A potem wreszcie sosna Martin.
A jeśli nigdy wcześniej nie widział kuna leśna są równie urocze i przerażające zwierzę.
Więc można zobaczyć tutaj całkiem urocze.
Ale jeśli spojrzeć na nich działania są szalone drapieżnikami i dość przerażające.
OK.
Tak więc niektóre z moich ulubionych zwierząt na liście będzie zapisać i otwórzmy to się teraz.
Upewnij się, że jesteśmy we właściwym katalogu.
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.
Więc pamiętaj znakiem dolara jest funkcją.
A jeśli po prostu wpisać znak dolara na jego własne bez nawiasów.
To tak jak ja wpisując wpisu bez nawiasów lub CON. log dot bez nawiasów naprawdę nie robić nic oprócz powiedz.
Tak, wiem o tym kodzie, ale faktycznie nie wykonuje go.
Zacznijmy od wyboru tylko H-1 na stronie, aby to zrobić.
Możemy użyć znak dolara i selektor s, aby wybrać tylko te, H H-1 i wciśnij enter.
Widać zwraca J queery demo H-1.
Tak też zauważyć, że jest w środku listy.
Tak więc w przeciwieństwie do selektora zapytań gdzie zwraca pierwszej instancji selektor znak dolara.
Zapytanie zwróci listę, nawet jeśli jest tylko jeden element, który jest rzeczywiście przydatne, a my zobaczymy, że w trochę.
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.
Możemy również wybrać ciało wpisując ciało i zrobić rzeczy trochę bardziej interesująca.
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.
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ć.
Mogę też powiedzieć, znacznik zakotwiczenia wewnątrz sojusznika.
Mógłbym też, jeśli naprawdę chciałem tylko powiedzieć znaczniki zakotwiczenia wewnątrz sojuszników, które zamiast woli.
Oraz w każdym przypadku do tej pory te są identyczne.
Ale jeśli mogę dodać inny znacznik zakotwiczenia tylko na dole strony dot com Google i odświeżyć.
A teraz robię moje tag znak dolara zakotwiczenia.
Mam oba znaczniki kontrolne.
Jeśli robię znak dolara UL z sojusznikiem z tagiem kotwicy wewnątrz, że to tylko daje mi ten znacznik zakotwiczenia.
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.
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.
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ć.
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.
Więc pozwól mi udowodnić, że.
Zróbmy to na H-1.
Więc wybierz znak dolara H-1 Dotsie SS Właśnie tak.
A potem, zamiast tutaj, zmieńmy kolor żółty być tak po prostu.
I wciśnij enter.
I widać, że zmienia się na żółty, który jest niesamowite.
Więc to zawsze dobrze jest pamiętać, jak można to zrobić bez j Querrey.
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.
I zmieńmy go na pomarańczowo.
I tam idziemy.
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.
Więc załóżmy, że chcę zmienić wiele stylów o tym H-1 Chciałem zmienić kolor i kolor tła i obramowania.
Co mogę zrobić, to zdefiniować moje style w obiekcie i przekazać obiekt w.
Więc nie mam po prostu zrobić ciąg Porter przecinkiem wartość dla Porter.
mogę zdefiniować obiekt z wielu właściwości wielu par wartości klucza i przekazać, że i wszystkie będą stosowane.
Więc zróbmy to teraz.
Zdefiniujmy nasze style i nie trzeba wprowadzać oddzielny obiekt.
Pokażę ci to.
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.
A jeśli trafiliśmy Wprowadź teraz mamy nasze style obiektów i znowu, że można nazwać cokolwiek.
I co wtedy zrobimy to wybierz H-1.
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.
Więc to zrobić bez zapytania j wymagałoby nam zrobić trzy oddzielne linie.
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.
Mam nadzieję, że widać już, że z zaledwie kilku linii.
J Zapytanie jest już okazały się być dość silny.
I chociaż możemy robić wszystko bez niego to zdecydowanie oszczędzało nam trochę czasu i uczynienie naszego kodu czyszczącego.
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.
Możemy wybrać wszystkie z nich lub wszystkich sojuszników i musimy tylko jedną linię, aby to zrobić.
Więc ja ci to pokazać.
Teraz zróbmy wszystkie kłamstwa.
Tak więc, aby to zrobić muszę wybrać sojuszników.
Więc tak po prostu.
I jeśli nacisnąć enter.
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.
Więc na pewno bardzo mocny.
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.
To faktycznie pozwoli im wszystkim niebieski i nawet nie trzeba ręcznie pętli poprzez jakbyśmy byłoby bez zapytania.
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.
Więc var sojusznicy równa udokumentować, że selektor kwerendy wszystkich przejść w sojusznika strun.
A potem muszę pętli.
Więc dla mnie jest równa zeru var wynosi mniej niż Elvises na długości ja plus plus.
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.
I można zobaczyć wszystkie one zmieni kolor na zielony.
Więc znowu to wykonalne bez zapytania, ale jest to znacznie więcej kodu.
Musimy je wyselekcjonować wszystko pierwsze, a nawet po prostu wybierając ich jest bolesna.
Jest to o wiele dłużej niż tylko znakiem dolara.
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ż.
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.
będę wykazywać jeszcze kilka przykładów tutaj.
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.
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.
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.
I dodamy w jakiejś przestrzeni, żeby pisać.
A pierwszą rzeczą, zrobimy to zmienić rozmiar czcionki na wszystkie z nich.
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.
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.
Te granice przerywane są zawsze wspaniałe.
A potem wreszcie dodać kolor tła tle.
I niech tylko uzupełnić nasz własny R. G. kolor.
Więc R. G. B.
I zrobimy naszą G.P.A. tak właściwie.
I pierwszy odczyt będzie zbyt.
89 czerwony 45 zielony 20 niebieski.
A następnie 0,5 Alpha, który jest zmętnienie lub przezroczystość kanału.
A jeśli trafiliśmy wprowadzić można zauważyć, że wszystkie te są stosowane jednocześnie.
Więc nasz rozmiar czcionki kurczą Mamy 10 pikseli.
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.
W porządku.
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.
To w zasadzie działa jak queery Slichter i queery selektora wszystkich razem wziętych.
I to jest znacznie krótszy i łatwiejszy do napisania składni.
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.
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.
Jeśli mam kolekcję elementów automatycznie pętle nad tym i stosuje Dotsie ocenić, na każdy jeden.
Więc to jest bardzo silny.
I dlatego tak na marginesie to dlaczego to zawsze zwraca tablicę tutaj.
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.
Tak będzie w pętli nad tym i po prostu zdarza się, że istnieje jedna pozycja tutaj.
Tak naprawdę nie ma pętli.
To po prostu idzie na raz.