Oké dus is het tijd voor onze eerste Jay queery de manier waarop deze werken uit te oefenen is dat ik ga u enkele voorbeelden in de leeftijd gezangboek geven divs sommige hebben klassen sommige hebben ideeën en ze zullen die nemen voor divs en zet ze in je eigen leeftijd HTML-bestand en je nodig hebt om Jay vraag correct onder aan jou hoe je het doet dat als je wilt naar een CDN te gebruiken of als u wilt om het te downloaden.
En dan zijn er nog vier snelle uitdagingen die ik wil dat je om te proberen met behulp van Jay Querrey en in het bijzonder het dollarteken te selecteren en Dot zie SS stijl.
Zodat de eerste.
Selecteer alle divs en geef ze een paarse achtergrond.
De volgende is selecteert de divs met klasse hoogtepunt en maken ze 200 pixels breed.
De derde is om de div met ID derde selecteren en geef het een oranje rand aan u hoe breed en welke stijl van de grens.
En dan is de bonus is om de eerste div alleen kiezen en verander het lettertype kleur roze te zijn.
Dus ga je gang geven dit een schot.
Je nodig hebt om een ​​video te plaatsen.
Maak een New Age HTML-bestand.
Inclusief een vraag en dan deze code kopiëren of typ het op jezelf en dan je nodig hebt om deze vier uitdagingen op te lossen.
Dus ga je gang post een video.
Ik kom terug in een paar seconden met de oplossing al.
Laten we doorgaan en typ een snelle oplossing voor dit.
Zoals altijd het eerste wat we moeten doen is ons telkens bestand.
Dus ik heb een nieuw bestand.
Ik riep het uit te oefenen dat html en ik zal het op te slaan en voeg vervolgens in mijn gewone h tim l standaardtekst en we zullen gewoon noemen J-query oefening in de titel en dan zal ik verder gaan en aan onze voorgerecht DML en ik 'll gewoon kopiëren in plaats van te typen.
OK dus hebben we de vier elementen.
Laten we nu eens gaan en voeg Jay Querrey.
Onthoud, wij hebben twee manieren om dat we het lokaal kan bevatten of we kunnen koppelen aan een CDN.
Dus ik zal zowel de eerste tonen.
Ik ben gewoon gaan om het bestand te kopiëren.
Dus ik moet versie hier te wijzigen gewoon c commando V. commando
Dus ik heb het nu in dezelfde map als mijn oefening die Simmo verouderen.
En dan zal ik hierheen te gaan en het eerste wat ik wil doen is het toevoegen van een script tag script en dan zal ik voeg de bron is gelijk aan en dan moet ik ervoor zorgen dat ik overeenkomen met die correct dat Jay dash van punt 1.4 mannen.
Ja.
Dus Jay queery dash naar een punt voor Dot mannen wijzen.
Jezus dat bewaren we en open het in onze browser en doen onze kleine test om te zien of het werkt.
Het lijkt erop dat het bestand gevonden.
Anders zou het ons een foutmelding geven en we kunnen altijd proberen iets als een dollarteken div te doen en te zien wat we krijgen.
En het werkt.
Het is de selectie van onze 4 divs.
We kunnen ook A-J vraagt ​​CDN.
En ik google alleen voor dat.
Jay quercetine en pak onze versie.
Dus we willen niet dat 3.0.
Ik weet zeker dat het werkt prima.
Maar dat is de nieuwste versie en het is nog steeds een alpha.
Dus er is waarschijnlijk een aantal bugs en sommige kwesties.
Dus om een ​​punt vier punt is de meest recente stabiele versie dan zullen we deze URL te kopiëren en dan zullen we een ander script tag toe te voegen en ik zal ze zowel hier te verlaten en gewoon commentaar één uit en reset de bron gelijk is aan dat jullie fout.
Dus of men werkt Ik zal de CDN te gebruiken omdat ik al aan u bewezen dat we allemaal de CDN te gebruiken.
Omdat ik al bewezen dat dit werkte voor diverse sake.
Dus we zullen slaan en vervolgens te vernieuwen en dubbel check heeft onze code nog steeds werken.
Ja, het is het vinden van dollartekens prima.
Het is aangesloten op J Qwerty.
Een punt dat ik wil maken is dat we onder andere J queery up top in het hoofd en we gebruiken het in onze scripts die we opschrijven in het lichaam.
En de reden waarom doen we dat niet vergeten dingen lading in de volgorde waarin ze verklaarde Dus willen we Arjay query om zeker te laden voordat we het gebruiken in plaats van een script.
Dus onze script dat we nodig hebben om te bepalen is waar we onze code zullen schrijven en we noemen het oefenen.
J s.
En dan moeten we dat bestand oefening die J ons en wij dat hier in dezelfde map zal zetten en wat we kunnen doen is een heel eenvoudige test om te zien of deze is aangesloten zowel voor onze h tim-bestand en de J-query maken als het in staat om te zien en gebruik maken van de J-query methode zullen we net zoiets als dit te doen.
Als J-query anders iets anders zal doen dus als er J vraag zullen we een query geladen anders zullen we waarschuwingen weten Jay Querrey droevig gezicht en op te slaan te waarschuwen.
En als we nu krijgen we frissen J-query geladen.
Dus dat vertelt ons twee dingen.
Men dit script wordt uitgevoerd oefening die Jezus is aangesloten en twee waren in staat om de Jay Querrey methoden te gebruiken.
Als we deden dit in omgekeerde volgorde al en ik zette Jay vraag nadat ik mijn oefening Jay Ja inbegrepen en ik op te slaan en te vernieuwen krijgen we een fout die ons vertelt J query wordt niet gedefinieerd, zodat u het belang van de orde dat we de dingen kunnen zien in.
Dus we willen altijd onze bibliotheken die onze code hangt af van de top in het hoofd op zijn minst willen we hen voor onze scripts die ze gebruiken te zetten.
Laten we terug gaan naar de opdracht en het eerste wat we moeten doen is juist onder Jay Querrey die we al hebben gedaan.
Next up moeten we alle divs te selecteren en geef ze een paarse achtergrond.
Dus we gaan en selecteer alle divs met behulp van dollarteken in plaats van aanhalingstekens.
Alles wat we moeten doen is kiezen div met CSSA.
Dus gewoon div dot C S S en we zullen ze paars te maken.
Dus kleur of achtergrond in dit geval is paars of we konden onze eigen R.G. hebben gebruikt B schaduw van paars.
En als je niet meer weet hoe we paars met RGV dan moet je om te gaan spelen R.G. werd een beetje meer.
Dus dat is de eerste die we kunnen besparen en controleer of dat werkte door verfrissend.
En we krijgen vier paars achtergronden.
OK.
Dus dat is dat.
Dat is de selectie van alle divs en hen een paarse achtergrond.
Ik kom net voeg een briefje hier en commentaar dat uit.
Next up willen we de divs met klasse gelijk is aan markeren en maken ze 200 pixels breed te selecteren.
Dus dat zal zeer op dezelfde manier, maar werken om de divs met klasse gelijk te selecteren om te benadrukken wat we moeten doen is het gebruik dollarteken weer.
En in plaats van div we kunnen dot highlight gebruiken en dan doen C Ss met en dat zal 200 bergtoppen.
Het is vermeldenswaard dat dit technisch selecteert alles wat een klasse van hoogtepunt heeft.
Als je wilt dat het expliciet te zijn en zeggen dat alleen de divs dat de klasse van hoogtepunt hebben konden we een anker tag of een paragraaf die ook die klasse dat we zouden deze selector te schrijven.
En dit is C S S dat alle divs met de klas van hoogtepunt zegt.
Maar in dit geval zal het een verschil maken.
Dus 200 pixels met vernieuwen en u kunt deze twee divs zien de klasse van hoogtepunt de tweede en de vierde div en ze hebben een met 200 pixels.
OK de volgende is de div met het idee van derde selecteren.
En om het een oranje rand, zodat de div met die Id dollarteken opnieuw te selecteren en in plaats van dot moeten we ons naar Thorpe.
En dan de naam van de ID die SS orde en het is aan ons.
Alles wat ik zei was de kleur is oranje.
Dus laten we een twee pixel stevige oranje rand en op te slaan en te vernieuwen en we hebben nu dat oranje rand daar.
Ik zal het een beetje groter te maken, zodat het beter in de screencast laat zien.
Daar gaan we.
En dat is ongeveer een derde div die de ID van het woord heeft.
Dus de laatste uitdaging die een bonus is om de eerste div alleen kiezen en verander de tekstkleur die de manier waarop de eerste div selecteert wordt met behulp van een CSSA pseudo selector roze.
Eerste type dus div colon eerste streepje van dash type dat je moet bekend zijn met van enkele van de CSSA selector video's zijn.
En dan zullen we gewoon maken het roze dat is de SS kleur roze en we slaan en te vernieuwen en je kunt zien dat de kleur is roze.
De andere optie die we hebben, is er eigenlijk een ingebouwde J-query snelkoppeling die net Colan eerste en dat werkt ook prima.
Een interessante opmerking is dat het gebruik van de dikke darm eerste is eigenlijk een beetje trager dan de eerste van het type, omdat eerste type is gebouwd om te zien te beoordelen is het een CSSA selector versus eerste is een J-query snelkoppeling.
Dus het is niet inheems C Ss het is gewoon ooit zo iets langzamer.
Dus ik zou de eerste van het type te gebruiken.
OK dus dat is het voor deze oefening in de komende paar video's.