Okee.
Welkom terug.
Dus laten we beginnen met het schrijven van een stukje code.
En het eerste wat we gaan om te leren hoe dat te doen is hoe om elementen te selecteren.
Dus net als bij gewone dominante relatie of fonologie Ja, we nodig hebben om dingen te selecteren en vervolgens te manipuleren.
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.
Deze video zal vooral gericht zijn op de selectie van elementen met J Query voor twee hoofddoelstellingen hier.
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.
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.
Het dollarteken.
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.
Er zijn zo veel verschillende manieren van het selecteren van het dollarteken en Jay vraag zal ze allemaal te vervangen.
Het werkt in principe net als queries selector allemaal in dat geven we het een C Ss stijl selector.
En dan Jay-query geeft alle overeenkomende elementen die overeenkomen met de selector die wij geven.
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.
Vergeet niet dat dit wordt ingesteld stijl selectors.
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.
Dus ik zal snel een demo hier hoe dit in zijn werk te doen.
Dus hebben we onze Jake Querrey demo hem de leeftijd van onze pagina opgezet waar ik het CDN inbegrepen.
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.
Dus moeten we het script hier en toen we sommige content om mee te spelen nodig hebben.
Dus ik zal de H-1 S.J. houden kern demo.
Ik zal deze bondgenoten te veranderen om ze een beetje meer uniek dus ik zal het vullen met een aantal van mijn favoriete dieren.
Dus einde is voor Newt.
Mijn vijf jaar oude zelf het favoriete deel van het dier alfabet lied zal toevoegen in een andere één van mijn favorieten album Monkey.
En dan tot slot de pine martin.
En als je nog nooit de dennen hebt gezien marter ze zijn net zo schattig en angstaanjagende dier.
Zodat je kunt zien hier behoorlijk schattig.
Maar als je een kijkje nemen op hen in actie zijn ze gek roofdieren en best eng.
OK.
Dus sommige van mijn favoriete dieren in de lijst op te slaan en laten we dit open te stellen nu.
Zorg ervoor dat we in de juiste directory.
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.
Dus vergeet niet een dollarteken is een functie.
En als ik typ gewoon dollarteken op zijn eigen, zonder de haakjes.
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.
Ja ik weet over die code, maar het niet daadwerkelijk uitvoeren.
Laten we beginnen met de enige H-1 te selecteren op de pagina om dat te doen.
We kunnen dollarteken en de s-selector gebruiken om h te selecteren die slechts H-1 en we druk op enter.
Je kunt zien dat de J queery demo H-1 terug.
Dus ook merken dat het binnen van een lijst.
Dus in tegenstelling tot vraag selector, waar het geeft de eerste plaats het dollarteken selector voor.
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.
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.
We kunnen ook het lichaam te selecteren door het intikken van het lichaam en de dingen een beetje interessanter te maken.
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.
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.
Ik zou ook kunnen zeggen ankercode binnenkant van een bondgenoot.
Ik zou ook als ik echt wilde alleen het anker-tags binnenkant van bondgenoten die in plaats van een zal zeggen.
En in elk geval zover die identiek.
Maar als ik nog een anker tag toe te voegen aan de onderkant van de pagina Google dot com en ik vernieuwen.
En nu doe ik mijn anker dollarteken tag.
Ik krijg beide anchor-tags.
Als ik een dollarteken UL met een bondgenoot met een anker tag binnenkant van dat het geeft me alleen deze anchor tag.
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.
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.
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.
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.
Dus laat me te tonen dat.
Laten we het doen met de H-1.
Dus ik selecteer dollarteken H-1 Dotsie SS Net als dit.
En dan in plaats van hier laten we de kleur geel zomaar te zijn.
En ik druk op enter.
En je kunt zien verandert naar geel wat geweldig is.
Dus het is altijd goed om in gedachten te houden hoe je dit zou doen zonder j Querrey.
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.
En laten we veranderen naar oranje.
En daar gaan we.
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.
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.
Wat ik wel kan doen, is bepalen mijn stijlen in een object en pas een object in.
Dus ik denk niet moet gewoon doen een string Porter komma de waarde voor Porter.
Ik kan een object met meerdere eigenschappen meerdere belangrijke waarde paren definiëren en geschiedde dat in en ze zullen allemaal worden toegepast.
Dus laten we dat nu doen.
Laten we onze stijlen definiëren en we hoeven niet een afzonderlijk object te maken.
Ik zal je laten zien dat.
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.
En als we druk op Enter hebben we nu onze stijlen bezwaar op keer dat alles kan worden genoemd.
En wat we doen is het selecteren van de H-1.
Dus dollarteken H-1 weer gutsiest ons en we net voorbij in onze stijlen verzetten en al die stijlen worden toegepast.
Dus om dat te doen zonder j vragen ons zou vereisen tot drie afzonderlijke lijnen te doen.
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.
Hopelijk kun je nu al dat met slechts een paar regels te zien.
J Query is al bewezen vrij krachtig.
En terwijl we alles kunnen doen zonder dat het is zeker bespaart ons tijd en het maken van onze code schoner.
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.
We konden alle degenen of alle bondgenoten te kiezen en we hoeven alleen maar een regel om dat te doen.
Dus ik zal je dat laten zien.
Laten we nu maken alle leugens.
Zo te doen dat ik nodig om bondgenoten te selecteren.
Dus net als dat.
En als ik druk op enter.
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.
Dus zeker zeer krachtig.
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.
Het zal eigenlijk allemaal blauw te maken en we hebben niet eens handmatig doorlopen als we zouden zonder een query.
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.
Dus var bondgenoten gelijk document die vraag selector allemaal voorbij in de string bondgenoot.
En dan moet ik loop door.
Dus voor var ik gelijk aan nul is minder dan Elvises uitvoerig I plus plus.
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.
En je kunt ze zien allemaal veranderen naar groen.
Dus nogmaals, het is goed te doen zonder een vraag, maar het is aanzienlijk meer code.
We moeten ze alle eerste en zelfs alleen maar het selecteren van hen is pijnlijk te selecteren.
Dit is een stuk langer dan een dollarteken.
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.
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.
Ik zal een paar voorbeelden te tonen.
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.
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.
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.
En we zullen voegen in wat ruimte hier om te typen.
En het eerste wat we zullen doen is de lettergrootte van elk van hen.
Dus NCSA als de lettergrootte is lettergrootte Dasch grootte of de hoogte en grootte in javascript en J-query moeten we camel case gebruiken.
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.
Die streeplijnen grenzen zijn altijd prachtig.
En dan tot slot toe te voegen op de achtergrond kleur achtergrond.
En laten we gewoon onze eigen R.G. kleur.
Dus R.G. B.
En we zullen onze G.P.A. doen werkelijk.
En de eerste te lezen zal ook.
89 rood 45 groen 20 blauw.
En dan 0.5 Alpha dat de ondoorzichtigheid of transparantie kanaal.
En als we druk op enter kun je zien dat al die worden toegepast in een keer.
Dus onze lettergrootte krimpen We hebben 10 pixels.
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.
Okee.
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.
Het werkt in principe net als queery Slichter en queery selector allemaal gecombineerd.
En het is een veel kortere en gemakkelijker te schrijven syntax.
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.
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.
Als ik een collectie van elementen die het lussen automatisch meer dan dat en is van toepassing Dotsie beoordelen in elk één.
Dus het is extreem krachtig.
En dat is de reden waarom als een kanttekening dat is waarom het altijd een array hier.
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.
Dus het zal lus over dit en het gebeurt gewoon dat er hier één punt.
het doet dus niet echt lus.
Het gaat iets meer dan één keer.