1 00:00:00,110 --> 00:00:00,530 Okee. 2 00:00:00,530 --> 00:00:01,500 Welkom terug. 3 00:00:01,500 --> 00:00:03,350 Dus laten we beginnen met het schrijven van een stukje code. 4 00:00:03,480 --> 00:00:07,290 En het eerste wat we gaan om te leren hoe dat te doen is hoe om elementen te selecteren. 5 00:00:07,290 --> 00:00:13,310 Dus net als bij gewone dominante relatie of fonologie Ja, we nodig hebben om dingen te selecteren en vervolgens te manipuleren. 6 00:00:13,380 --> 00:00:18,300 Ik weet dat ik een beetje een record gebroken is er, maar het is een heel belangrijk proces te selecteren en vervolgens dingen te veranderen. 7 00:00:18,300 --> 00:00:24,230 Deze video zal vooral gericht zijn op de selectie van elementen met J Query voor twee hoofddoelstellingen hier. 8 00:00:24,390 --> 00:00:33,500 De eerste is te leren hoe om elementen met de dollarteken functie te selecteren en dan ook nog met behulp van de C beoordeeld methode om elementen te stylen. 9 00:00:33,630 --> 00:00:45,210 Dus we niet net select dingen gewoon print ze uit, maar om het meer visueel We zullen ze te selecteren en dan veranderen de achtergrondkleur en Jay-query kunnen we alles wat we willen met slechts één functie te selecteren maken. 10 00:00:45,570 --> 00:00:46,800 Het dollarteken. 11 00:00:46,920 --> 00:00:55,650 Dus in tegenstelling tot vanille J.S. waar we document dat element krijgen door het id-query selector vraag selector allemaal elementen van een klasse naam krijgen elementen op tag naam. 12 00:00:55,650 --> 00:01:00,840 Er zijn zo veel verschillende manieren van het selecteren van het dollarteken en Jay vraag zal ze allemaal te vervangen. 13 00:01:00,990 --> 00:01:07,230 Het werkt in principe net als queries selector allemaal in dat geven we het een C Ss stijl selector. 14 00:01:07,320 --> 00:01:12,370 En dan Jay-query geeft alle overeenkomende elementen die overeenkomen met de selector die wij geven. 15 00:01:12,720 --> 00:01:25,460 Dus ik heb hier een voorbeeld als we wilden alle van het beeld tags op de pagina het gewoon ziet er zo uit als we wilden alle elementen met de klasse van de schaal doen we dot schaal te selecteren. 16 00:01:25,620 --> 00:01:28,380 Vergeet niet dat dit wordt ingesteld stijl selectors. 17 00:01:28,380 --> 00:01:39,000 Dus voor een ID moeten we de boog naar Thorpe voor een klasse die de punt nodig en kunnen we ook wat meer geavanceerde dingen als dit de selectie van alle anchor-tags die de binnenkant van de lijst elementen. 18 00:01:39,360 --> 00:01:41,900 Dus ik zal snel een demo hier hoe dit in zijn werk te doen. 19 00:01:42,060 --> 00:01:47,750 Dus hebben we onze Jake Querrey demo hem de leeftijd van onze pagina opgezet waar ik het CDN inbegrepen. 20 00:01:48,300 --> 00:01:54,180 En het maakt niet uit of we de N-woord te gebruiken of als u de gedownloade kopie gebruiken, zal het op dezelfde manier werken. 21 00:01:54,180 --> 00:01:58,110 Dus moeten we het script hier en toen we sommige content om mee te spelen nodig hebben. 22 00:01:58,110 --> 00:02:00,410 Dus ik zal de H-1 S.J. houden kern demo. 23 00:02:00,510 --> 00:02:06,270 Ik zal deze bondgenoten te veranderen om ze een beetje meer uniek dus ik zal het vullen met een aantal van mijn favoriete dieren. 24 00:02:06,480 --> 00:02:08,260 Dus einde is voor Newt. 25 00:02:08,520 --> 00:02:15,510 Mijn vijf jaar oude zelf het favoriete deel van het dier alfabet lied zal toevoegen in een andere één van mijn favorieten album Monkey. 26 00:02:15,870 --> 00:02:19,050 En dan tot slot de pine martin. 27 00:02:19,680 --> 00:02:24,820 En als je nog nooit de dennen hebt gezien marter ze zijn net zo schattig en angstaanjagende dier. 28 00:02:24,950 --> 00:02:27,190 Zodat je kunt zien hier behoorlijk schattig. 29 00:02:28,060 --> 00:02:32,690 Maar als je een kijkje nemen op hen in actie zijn ze gek roofdieren en best eng. 30 00:02:33,000 --> 00:02:33,270 OK. 31 00:02:33,300 --> 00:02:38,770 Dus sommige van mijn favoriete dieren in de lijst op te slaan en laten we dit open te stellen nu. 32 00:02:39,720 --> 00:02:41,150 Zorg ervoor dat we in de juiste directory. 33 00:02:41,200 --> 00:02:53,620 Jay gedolven demo die elk Chimo en wat ik ga doen is te bewegen dit uit in een eigen venster en we zullen gewoon gaan in de console maken de lettergrootte een beetje groter en laten we gebruik maken van een query naar een aantal van deze dingen te selecteren. 34 00:02:53,640 --> 00:02:56,100 Dus vergeet niet een dollarteken is een functie. 35 00:02:56,520 --> 00:03:00,490 En als ik typ gewoon dollarteken op zijn eigen, zonder de haakjes. 36 00:03:00,720 --> 00:03:08,700 Dat is net als ik het typen alert zonder haakjes of con. dot log zonder de haakjes niet echt iets anders te vertellen me te doen. 37 00:03:08,940 --> 00:03:12,610 Ja ik weet over die code, maar het niet daadwerkelijk uitvoeren. 38 00:03:13,170 --> 00:03:16,860 Laten we beginnen met de enige H-1 te selecteren op de pagina om dat te doen. 39 00:03:16,860 --> 00:03:24,550 We kunnen dollarteken en de s-selector gebruiken om h te selecteren die slechts H-1 en we druk op enter. 40 00:03:24,600 --> 00:03:27,480 Je kunt zien dat de J queery demo H-1 terug. 41 00:03:27,630 --> 00:03:30,110 Dus ook merken dat het binnen van een lijst. 42 00:03:30,300 --> 00:03:36,480 Dus in tegenstelling tot vraag selector, waar het geeft de eerste plaats het dollarteken selector voor. 43 00:03:36,480 --> 00:03:43,310 Query zal een lijst terug te keren, zelfs als er maar één item dat is eigenlijk nuttig en we zullen zien dat in een klein beetje. 44 00:03:43,320 --> 00:03:53,150 Dus laten we proberen de selectie van alle bondgenoten nu zo dat we kunnen doen zoiets als Teken van de dollar bondgenoot en krijgen we drie bondgenoten net als dat. 45 00:03:53,490 --> 00:03:59,130 We kunnen ook het lichaam te selecteren door het intikken van het lichaam en de dingen een beetje interessanter te maken. 46 00:03:59,130 --> 00:04:20,430 Laten we teruggaan naar onze tijd e-mail en voeg in een I.D. Pine martin zullen wij het noemen schattig als de id en dan kunnen we ook op onze brulaap zal een A-label brulaap toe te voegen en het zal gewoon naar aap dot com en dit zal gewoon aap dot com. 47 00:04:20,730 --> 00:04:30,550 En als we vernieuwen als ik wil dat de link die ik zou dollarteken gebruiken selecteren en ik kon gewoon doen anchor tag en dat zal het aan mij. 48 00:04:30,600 --> 00:04:34,740 Ik zou ook kunnen zeggen ankercode binnenkant van een bondgenoot. 49 00:04:34,980 --> 00:04:40,770 Ik zou ook als ik echt wilde alleen het anker-tags binnenkant van bondgenoten die in plaats van een zal zeggen. 50 00:04:41,100 --> 00:04:43,990 En in elk geval zover die identiek. 51 00:04:44,160 --> 00:04:51,270 Maar als ik nog een anker tag toe te voegen aan de onderkant van de pagina Google dot com en ik vernieuwen. 52 00:04:51,810 --> 00:04:55,290 En nu doe ik mijn anker dollarteken tag. 53 00:04:55,290 --> 00:04:57,350 Ik krijg beide anchor-tags. 54 00:04:57,820 --> 00:05:05,820 Als ik een dollarteken UL met een bondgenoot met een anker tag binnenkant van dat het geeft me alleen deze anchor tag. 55 00:05:05,970 --> 00:05:27,890 Of ze kunnen hebben net ingekort om dit hier en daar gaan we naar het item met het idee selecteert schattig Het werkt net als queery selecteren of alle of query selector of C Ss voor die kwestie waar ik moet de Arctic of hekje Plus de ID naam schattig en dat geeft me de boommarter bondgenoot. 56 00:05:27,940 --> 00:05:33,660 Dus we hebben gezien hoe we selecteren en het is niet erg spannend alleen om dingen uit te drukken naar de console of gewoon om te zien ze hier terug. 57 00:05:33,670 --> 00:06:00,440 Maar ik wil eigenlijk doen is introduceren een methode die we gaan zien veel meer methoden in de komende paar video's, maar ik ga een tonen nu dat zal ons helpen om dingen te maken visuele en help ons de styling zodat veranderen methode heet Dotsie SS en de manier waarop het werkt is dat we typt u een selector dollarteken en enkele selector en dan kunnen we Dotsie SS op het einde van die toe te voegen en geef het in sommige eigenschappen en waarden te veranderen. 58 00:06:00,450 --> 00:06:11,220 Dus hier is een voorbeeld dat ik het selecteren van iets met het idee van speciale en dan ben ik rennen CSSA op en het veranderen van de grens met twee pixel stevige rood. 59 00:06:11,500 --> 00:06:13,190 Dus laat me te tonen dat. 60 00:06:13,300 --> 00:06:15,400 Laten we het doen met de H-1. 61 00:06:15,390 --> 00:06:21,390 Dus ik selecteer dollarteken H-1 Dotsie SS Net als dit. 62 00:06:21,610 --> 00:06:30,380 En dan in plaats van hier laten we de kleur geel zomaar te zijn. 63 00:06:30,630 --> 00:06:31,480 En ik druk op enter. 64 00:06:31,600 --> 00:06:34,980 En je kunt zien verandert naar geel wat geweldig is. 65 00:06:35,310 --> 00:06:39,420 Dus het is altijd goed om in gedachten te houden hoe je dit zou doen zonder j Querrey. 66 00:06:39,630 --> 00:06:54,840 Dus zouden we zoiets document dat krijgen doen en laten doen document vraag selector H-1 punt en B niet hebben dat C Ss dus we moeten dot dot stijl kleur is gelijk aan doen. 67 00:06:54,940 --> 00:06:56,700 En laten we veranderen naar oranje. 68 00:06:57,690 --> 00:06:58,400 En daar gaan we. 69 00:06:58,440 --> 00:07:06,300 We veranderden het naar oranje, maar deze lijn hier is eigenlijk een veel krachtiger en kan veel meer dan we kunnen doen met deze enkele lijn doen hier. 70 00:07:06,550 --> 00:07:14,100 Dus laten we aannemen dat ik wilde meerdere stijlen te veranderen over dit H-1 wilde ik de kleur en de achtergrondkleur en de grens veranderen. 71 00:07:14,110 --> 00:07:19,240 Wat ik wel kan doen, is bepalen mijn stijlen in een object en pas een object in. 72 00:07:19,480 --> 00:07:24,250 Dus ik denk niet moet gewoon doen een string Porter komma de waarde voor Porter. 73 00:07:24,550 --> 00:07:31,070 Ik kan een object met meerdere eigenschappen meerdere belangrijke waarde paren definiëren en geschiedde dat in en ze zullen allemaal worden toegepast. 74 00:07:31,360 --> 00:07:32,500 Dus laten we dat nu doen. 75 00:07:32,760 --> 00:07:37,080 Laten we onze stijlen definiëren en we hoeven niet een afzonderlijk object te maken. 76 00:07:37,120 --> 00:07:38,250 Ik zal je laten zien dat. 77 00:07:38,350 --> 00:07:56,340 En in plaats van hier zullen zeggen kleur moet zijn rode achtergrond moet roze zijn en we doen grens moet twee pixels stevige paars, net als dat. 78 00:07:56,740 --> 00:08:02,460 En als we druk op Enter hebben we nu onze stijlen bezwaar op keer dat alles kan worden genoemd. 79 00:08:02,740 --> 00:08:05,060 En wat we doen is het selecteren van de H-1. 80 00:08:05,310 --> 00:08:14,950 Dus dollarteken H-1 weer gutsiest ons en we net voorbij in onze stijlen verzetten en al die stijlen worden toegepast. 81 00:08:15,190 --> 00:08:19,720 Dus om dat te doen zonder j vragen ons zou vereisen tot drie afzonderlijke lijnen te doen. 82 00:08:19,750 --> 00:08:32,400 Je zou moeten document dat querist laat uw H-1 stijl donkere kleur is gelijk aan rood en vervolgens dot stijl dot achtergrond is gelijk aan roze en toen dat stijl die grens is gelijk aan twee pixel stevige paars doen. 83 00:08:32,710 --> 00:08:35,580 Hopelijk kun je nu al dat met slechts een paar regels te zien. 84 00:08:35,640 --> 00:08:38,240 J Query is al bewezen vrij krachtig. 85 00:08:38,520 --> 00:08:44,370 En terwijl we alles kunnen doen zonder dat het is zeker bespaart ons tijd en het maken van onze code schoner. 86 00:08:44,710 --> 00:08:58,160 Er is een ander kenmerk van de dot CSSA methode die maakt het nog nuttig dat ik nu zal laten zien wat we kunnen doen is eigenlijk stijl meerdere elementen tegelijk in plaats van alleen het selecteren van de eerste en maakt het geel. 87 00:08:58,260 --> 00:09:03,290 We konden alle degenen of alle bondgenoten te kiezen en we hoeven alleen maar een regel om dat te doen. 88 00:09:03,340 --> 00:09:04,110 Dus ik zal je dat laten zien. 89 00:09:04,110 --> 00:09:06,430 Laten we nu maken alle leugens. 90 00:09:06,970 --> 00:09:09,580 Zo te doen dat ik nodig om bondgenoten te selecteren. 91 00:09:09,730 --> 00:09:11,550 Dus net als dat. 92 00:09:11,550 --> 00:09:12,650 En als ik druk op enter. 93 00:09:12,780 --> 00:09:31,940 U zult zien dat het geeft me de drie bondgenoten en dan moet ik keten op C Ss en ik geef het een enkele eigenschap kleur en verander het blauw, net als dat te zijn en ik zal druk op enter en merk deze regel verandert alle drie bondgenoten. 94 00:09:32,350 --> 00:09:34,610 Dus zeker zeer krachtig. 95 00:09:34,650 --> 00:09:46,030 Alles wat we doen is kiezen met onze selector dollarteken bondgenoot en dat geeft ons drie bondgenoten en door het doen van Dotsie SS op een array hier van Alwis deze lijst van bondgenoten. 96 00:09:46,240 --> 00:09:52,320 Het zal eigenlijk allemaal blauw te maken en we hebben niet eens handmatig doorlopen als we zouden zonder een query. 97 00:09:52,360 --> 00:09:59,360 Dus alleen maar om u te vragen of ik wil ze allemaal te veranderen groene zonder vragen moet ik eerst om ze allemaal te selecteren zijn. 98 00:09:59,500 --> 00:10:06,570 Dus var bondgenoten gelijk document die vraag selector allemaal voorbij in de string bondgenoot. 99 00:10:06,790 --> 00:10:08,390 En dan moet ik loop door. 100 00:10:08,520 --> 00:10:15,350 Dus voor var ik gelijk aan nul is minder dan Elvises uitvoerig I plus plus. 101 00:10:16,260 --> 00:10:30,100 En dan in de lus moeten we bondgenoten heb ik die stijl die kleur gelijk en we zullen groene doen net als dat en we zullen druk op enter. 102 00:10:30,390 --> 00:10:32,850 En je kunt ze zien allemaal veranderen naar groen. 103 00:10:32,860 --> 00:10:36,800 Dus nogmaals, het is goed te doen zonder een vraag, maar het is aanzienlijk meer code. 104 00:10:36,900 --> 00:10:40,780 We moeten ze alle eerste en zelfs alleen maar het selecteren van hen is pijnlijk te selecteren. 105 00:10:40,770 --> 00:10:43,820 Dit is een stuk langer dan een dollarteken. 106 00:10:43,870 --> 00:10:53,450 En dan moeten we ook lus door handmatig met een lus of while loop en verander dan ieder afzonderlijk en dan zijn we klaar met een vraag hoor. 107 00:10:53,560 --> 00:11:02,900 Alles wat we moesten doen om terug naar blauw te veranderen is het selecteren van alle bondgenoten Dotsie SS en vervolgens doorgeven in ons eigendom, die blauwe kleur blauw. 108 00:11:03,420 --> 00:11:05,260 Ik zal een paar voorbeelden te tonen. 109 00:11:05,430 --> 00:11:20,970 Laten we alles selecteren ankertags net als dit een tag die C Ss en de lettergrootte groter dus lettergrootte zal maken en het zal 40 pixels en daar gaan we. 110 00:11:20,980 --> 00:11:31,140 We krijgen grote schakels Ik zal ook laten zien dat we kunnen definiëren een object vol van stijlen zoals we eerder deden en we kunnen gebruiken om stijl meerdere elementen niet zomaar één. 111 00:11:31,240 --> 00:11:44,890 Dus we alle leugens te selecteren en stylen ze samen en in plaats van alleen het doen van de SS en het passeren in een string als kleur die we zullen het een object te geven en net te definiëren op zijn plaats hier. 112 00:11:45,550 --> 00:11:47,920 En we zullen voegen in wat ruimte hier om te typen. 113 00:11:48,420 --> 00:11:52,340 En het eerste wat we zullen doen is de lettergrootte van elk van hen. 114 00:11:52,540 --> 00:12:01,300 Dus NCSA als de lettergrootte is lettergrootte Dasch grootte of de hoogte en grootte in javascript en J-query moeten we camel case gebruiken. 115 00:12:01,480 --> 00:12:21,140 Dus lettergrootte geen ruimte of geen dashboard maar we hoofdletters jaren lid dat is Kimbal zaak en we zullen ze 10 laten we nog 10 pixels en dan gaan we toe te voegen in een grens en deze zal drie pixel Dasht paars. 116 00:12:21,340 --> 00:12:23,610 Die streeplijnen grenzen zijn altijd prachtig. 117 00:12:23,980 --> 00:12:27,840 En dan tot slot toe te voegen op de achtergrond kleur achtergrond. 118 00:12:28,140 --> 00:12:30,490 En laten we gewoon onze eigen R.G. kleur. 119 00:12:30,660 --> 00:12:31,670 Dus R.G. B. 120 00:12:31,710 --> 00:12:33,540 En we zullen onze G.P.A. doen werkelijk. 121 00:12:33,690 --> 00:12:36,640 En de eerste te lezen zal ook. 122 00:12:37,070 --> 00:12:43,340 89 rood 45 groen 20 blauw. 123 00:12:43,480 --> 00:12:49,490 En dan 0.5 Alpha dat de ondoorzichtigheid of transparantie kanaal. 124 00:12:49,620 --> 00:12:54,490 En als we druk op enter kun je zien dat al die worden toegepast in een keer. 125 00:12:54,630 --> 00:12:58,110 Dus onze lettergrootte krimpen We hebben 10 pixels. 126 00:12:58,260 --> 00:13:13,060 We hebben deze prachtige randen rond de bondgenoten die drie pixels Dasht paars en dan hebben we de achtergrond kleur die is wat deze kleur bleek te zijn het ziet eruit als een soort van een lichte bruinachtige kleur. 127 00:13:13,090 --> 00:13:13,360 Okee. 128 00:13:13,360 --> 00:13:22,070 Dus hopelijk u kunt zien van die snelle demonstratie slechts twee verschillende dingen die we doen het selecteren met dollarteken en dat op zich is ongelooflijk krachtig. 129 00:13:22,090 --> 00:13:26,390 Het werkt in principe net als queery Slichter en queery selector allemaal gecombineerd. 130 00:13:26,640 --> 00:13:29,620 En het is een veel kortere en gemakkelijker te schrijven syntax. 131 00:13:29,910 --> 00:13:45,040 En dan is er de CSSA methode die is ook zeer krachtig, omdat we individuele eigenschappen kunnen veranderen, zoals we hier deden, maar we kunnen ook massas aanmelden CSSA eigenschappen zoals wij hier deden, waar we langs in een object vol van de belangrijkste waarde paren. 132 00:13:45,100 --> 00:14:03,830 Waarschijnlijk is het belangrijkste onderdeel van dit alles is dat wanneer ik een verzameling zoals alle bondgenoten te selecteren zoals ik hier heb ik niet hoeft te handmatig doorlopen en iets individueel zoals ik deed hier, waar we moesten lus toepassing door alle bondgenoten en de kleur één voor één met J query. 133 00:14:03,930 --> 00:14:12,990 Als ik een collectie van elementen die het lussen automatisch meer dan dat en is van toepassing Dotsie beoordelen in elk één. 134 00:14:12,990 --> 00:14:14,600 Dus het is extreem krachtig. 135 00:14:14,770 --> 00:14:19,770 En dat is de reden waarom als een kanttekening dat is waarom het altijd een array hier. 136 00:14:19,890 --> 00:14:28,370 Zelfs als ik heb slechts één element met de ID schattige het terugkeert het altijd in de lijst omdat alle logica achter de schermen houdt looping over die lijst. 137 00:14:28,470 --> 00:14:31,860 Dus het zal lus over dit en het gebeurt gewoon dat er hier één punt. 138 00:14:31,890 --> 00:14:33,030 het doet dus niet echt lus. 139 00:14:33,040 --> 00:14:34,540 Het gaat iets meer dan één keer.