[Powered by Google Translate] [Seminar: jQuery]
[Vipul Shekhawat, Harvard University]
[Dit is CS50.] [CS50.TV]
Als je na mee thuis, kun je eigenlijk online toegang tot mijn dia
door naar deze link.
Het is TjjRWj, op bit.ly.
U kunt ook gewoon naar de URL rechtstreeks,
dat is cloud.cs50.net / ~ vshekhawat, dat is mijn naam,
en jQuery.
Ik beveel u aanmoedigen om te volgen langs als je kijken thuis,
en als je hier bent, ook, want dit is een mooie interactieve presentatie.
>> Dus vandaag ga ik het hebben over jQuery, en de eerste vraag is,
Wat is jQuery?
Dit jaar, ik weet dat jullie niet hebben behandeld JavaScript
zo gedetailleerd als we in de afgelopen jaren.
JavaScript is, allereerst, maar een client-side taal
dat u gebruikt om scripts en code uit te voeren op de computer van elke gebruiker.
Dus je hebt een server die webpagina's biedt aan mensen,
maar je zou willen dingen doen op hun machine,
vragen hun machine om aanvragen te doen aan je server elke 30 seconden of iets dergelijks.
U kunt dat doen met behulp van JavaScript.
JQuery biedt gewoon meer functionaliteit bovenop JavaScript
dat doet extra spullen voor je.
Als je kijkt naar de inhoud op de top,
dat sommige van de dingen die je in staat bent te doen beschrijft.
Dus over het algemeen, is het gemaakt in januari 2006.
Het werd eerst opgevat in augustus 2005.
Het is al een paar jaar, en het is echt een deel van de nieuwe Web 2.0-beweging
dat is gemaakt op het internet zo glanzend.
Het is de meest gebruikte JavaScript-bibliotheek.
Meer dan 19,6 miljoen websites gebruiken het, en het gebruik neemt nog steeds toe
volgens builtwith.com, die, blijkbaar, in het afgelopen jaar,
is net voortdurend toe vrij lineair.
Onder de hoogste 10 miljoen sites, is er nog steeds -
ongeveer 40% van hen op dit moment gebruikt het.
Facebook maakt gebruik van het, veel andere websites gebruiken momenteel.
U kunt kijken naar de statistieken op uw eigen, als je wilt.
En je kon het is legit vertellen omdat het een stichting en 13 bestuursleden,
samen met een team van 20 mensen die werken op het op een regelmatige basis.
Dus het is heel veel gebruikt, het heeft een. Org URL, het is chique,
het heeft spin-offs voor andere dingen, dus het is een big deal.
>> Waarom zou je het gebruiken? JQuery is zeer licht van gewicht.
Dat betekent dat het niet een enorme file. U kunt downloaden
het minified bestand, dat is zonder alle witruimte en commentaren, en het is slechts 32 kB.
Dus het is makkelijk om gewoon gooien op uw webpagina
en gewoon te gaan gebruiken.
Het is ook zeer efficiënt geschreven, zodat het niet nemen veel van -
het niet vertragen uw website veel wanneer je het gebruikt.
Het laat je dingen doen die voorheen onhaalbaar waren implementeren.
Er zijn bepaalde aspecten van de functionaliteit,
zoals het maken van animaties, die normaal zou heel, heel moeilijk om te doen.
Maar in jQuery ze zijn eigenlijk heel simpel.
En er zijn een aantal dingen die zijn vervelend te doen,
mogelijk in JavaScript, zoals het verzenden van een POST-aanvraag,
maar op een verzoek om een ​​server te sturen, moet je om te schrijven
vijf of zes of zeven regels code.
Nu kun je gewoon doen in een enkele regel code, in een enkele functie oproep.
Dat echt vereenvoudigt veel van de dingen die je doet.
En alle koel kind worden gebruikt. Bij deze, ik bedoel ik.
In mijn laatste project vorig jaar, dat is news.whrb.org,
dat is voor het radiostation, Ik heb deze blog
die al de shows die we hebben gedaan en de MP3-bestanden voor hen organiseert.
U kunt bladeren door het verleden laat zien,
en het is allemaal gedaan met behulp van jQuery. U kunt vertellen
door al deze animaties wezen.
Dus als je - als je het creëren van een nieuwe post,
zie je deze kleine slideDowns; dat alle gedaan met behulp van jQuery.
En dit fade - dus dat soort dingen wordt allemaal gedaan met behulp van jQuery,
en je hoeft niet constant herlaad de pagina om de site te navigeren.
Een ander cool ding dat is gemaakt met behulp van jQuery is deze presentatie.
Ik gebruik deze open source ding genaamd scrolldeck,
die schreef iemand op de top van jQuery.
Als je daadwerkelijk kijken naar de bron, kunt u zien dat
ze met behulp van deze dollarteken; dollartekens
worden in jQuery aan te geven dat een functie is een functie jQuery.
Dus ze definiëren van een wrapper op de top van jQuery
die u toelaat om een ​​presentatie te maken als dit,
en je kunt zien dat hier zijn ze inclusief de originele jQuery-bestand,
dat is wat je zult moeten zijn als wilt jQuery gebruiken
in uw eigen websites.
>> Raken op dat, hoe installeer je deze?
U kunt gewoon naar jQuery.com en download het bestand,
toevoegen aan een web directory en dit opnemen.
Dus gewoon op de top, in het hoofd-tag van uw HTML-bestand
van uw belangrijkste HTML-bestand, gewoon die regel code
met de juiste versie voor welke versie van jQuery u gebruikt.
U kunt deze downloaden door naar jQuery.com,
klik "download jQuery," en je hebt het. Dat is het.
En eigenlijk, kunnen we een blik op wat het lijkt te nemen.
Als je op downloaden hier klikt, jQuery is dit.
Het is gewoon een grote JavaScript-bestand dat alle magische dingen voor je doet.
Dit is de minified versie, die niet leesbaar helemaal.
U kunt ook kijken naar de ontwikkeling van versie, die leesbaar is
maar nog steeds zeer, zeer lang.
Het is een heleboel dingen daar.
U kunt ook een koppeling naar Google gehoste versie van het.
Dus dat zal u toestaan ​​om alleen vertrouwen op Google om daarin te voorzien.
Ze bieden elke versie ervan, te allen tijde beschikbaar.
Dus je kunt waarschijnlijk vertrouwen op Google om het te hosten voor u.
Of u kunt koppelen aan eigen laatste versie van jQuery.
Ze hebben een URL die altijd bijgewerkt naar de nieuwste versie.
Het is jQuery-laatste, en er is een probleem met dat,
namelijk dat indien de bijgewerkte jQuery en enkele vorige functie
ze hadden wordt geretrogradeerde of afgekeurd,
het kan niet - het kan gaan om niet meer raken ondersteund.
Dus als je schrijft een website met behulp van versie 1.8.2,
tegen de tijd dat versie 2.7 uit komt
een aantal van de functies die u schreef niet meer werken.
Dus het is beter om gewoon de 32 kB bestand te downloaden,
zet het op uw webpagina, en het zal altijd werken.
>> Ik ga om te gaan en beginnen te praten over de werkelijke functionaliteit van jQuery.
Het eerste ding is selectors. Dit is wat jQuery aanvankelijk werd opgevat te bieden.
En je kunt op de documentatie om te kijken naar
de gedetailleerde documentatie voor de selecteurs Ik ga worden met betrekking tot.
Het idee achter selectors is dat je HTML-elementen op een pagina kunt selecteren.
Elementen op een pagina hebben IDs en klassen en andere identificerende aspecten voor hen.
Er is ook - ze zijn in verschillende volgordes.
Enkele keer dat ze genest in elkaar.
JQuery kun je eenvoudige vragen die elementen uit de pagina te halen construeren.
Dan kunt u deze elementen met behulp van jQuery functies te manipuleren,
dat is het deel manipulatie zullen we later op terug.
U kunt de HTML, wijzigt de CSS, veranderen
U kunt ook animeren en functies die activeren op bepaalde gebeurtenissen toe te voegen.
Dus, bijvoorbeeld, als er iets is geklikt, je wilt er iets gebeurt,
kun je dat met behulp van jQuery als goed doen.
En er zijn een groot aantal manieren om elementen te selecteren.
De meeste van hen heb ik nog nooit gebruikt, maar er zijn de basismaatregelen,
die zijn vrij belangrijk.
Het element selector, bijvoorbeeld, als je net iets te selecteren
dat is een div - Ik heb eigenlijk de code geopend voor deze diapresentatie.
Dus, bijvoorbeeld, hier is de eerste dia.
Hier hebben we een div. Als we eigenlijk selecteert alle divs op de pagina,
het zal alleen maar geven ons een array van alle divs die in dit bestand bestaat.
De ID-selector kunt u alles met een bepaalde ID te selecteren.
Dus als dit, bijvoorbeeld, dit ding heeft de ID "wat,"
en als we deden dit met # wat in plaats van een identiteitsbewijs,
het zou gewoon terug een array die een enkel element heeft en dat is dat element van de pagina.
We kunnen ook op deze manier te combineren selectors door het hebben
selecteert u alleen dingen met ID's die divs zijn.
Dus ja. Selecteer alleen divs dat die ID hebben.
Voor klasse die u gewoon gebruik maken van een punt, het is hetzelfde als CSS.
Afstammeling werkt ook, dus als je wat klasse
en het is genest elementen in - dus bijvoorbeeld
is er enige klasse en het heeft een anker-tag om te linken naar een andere pagina,
U kunt deze syntaxis gebruiken om de koppeling te halen.
U kunt ook meerdere dingen tegelijk selecteren, gewoon ze te scheiden door komma's,
gebruik geen selector u wilt, en je zult ze allemaal tegelijk selecteren, in een enkele array.
En dan is er ook de niet selector, dus je kunt alle divs selecteren
die niet beschikken over een aantal specifieke klasse.
En dat is gewoon een handige manier om een ​​indruk te krijgen van hoe deze selectie werkt.
Ik zal wat concrete voorbeelden in een seconde tonen.
>> Geavanceerde selectors zijn - dit zijn slechts een paar voorbeelden.
Er zijn tientallen van deze, maar als je wilt alle afbeeldingstags selecteren
binnen een element, dan moet je gewoon doen: afbeelding.
Als u wilt het zelfs elementen te selecteren, bijvoorbeeld als er 20 van hen,
u wilt selecteren 0, 2, 4, 6 en zo verder,
je doet: zelfs, of u kunt dit ook doen: vreemd.
Dit zijn pseudo selectors, waardoor ze feitelijk berekenen
elk ander element in plaats van alleen te gaan en ze allemaal te selecteren.
U kunt ook - elk element kunnen ook specifieke attributen.
Dus bijvoorbeeld class = centrum een ​​attribuut.
Voor deze anchor tag, href, hypertextverwijzing, is een attribuut ook.
Het is echt het algemeen - dus je kunt iets dat links naar een bepaalde pagina of u selecteert.
U kunt alles selecteren met alle attributen die u wilt.
En dan ook bevat attribuut.
Als je, bijvoorbeeld, wilde alle invoer elementen selecteren
dat het woord "pass" hebben als de naam van hen,
Als een pagina heeft een tekstinvoer blok
dat heet "wachtwoord" dat een manier waarop je zou kunnen kiezen dat zou zijn.
En er zijn nog veel meer. Je kunt je gang gaan en kijken naar de documentatie
en zie specifieke voorbeelden van hoe het werkt.
>> Het volgende ding is DOM manipulatie.
Na het selecteren we elementen, zullen we willen eigenlijk doen dingen met hen.
Tot dusver hebben we niet gekeken naar dat helemaal niet, maar als je kijkt naar de documentatie,
er is echt veel dat we kunnen doen.
Op dit punt, gaan we elementen op deze presentatie te selecteren
en manipuleren ze met behulp van jQuery.
Omdat deze wordt geïmplementeerd met behulp van jQuery, hebben we toegang tot de jQuery bibliotheek,
en we kunnen deze functies te gebruiken binnen deze code.
Een nuttig ding dat je misschien niet weten is de console.
En Google Chrome is wat ik gebruik. U kunt op alt commando J
of alt controle J om de console te openen.
In Firefox ik denk dat het bevel shift K of control shift K.
In Safari heb je om te gaan enkele instellingen te wijzigen.
Er is een link als je wilt om het te doen, maar ik raad je aan Chrome of Firefox.
Dus laten we het openstellen van de console, het is hier beneden.
Het laat je eigenlijk gewoon doen wat je wilt.
Dus je kunt gewoon typen in scheppen een variabele genaamd x,
x = 5, laten we eens kijken wat x + 2 is.
U kunt zelfs zoiets als CS doen + laten we zien, x + 45, die zullen worden CS50.
U kunt gewoon doen wat typische JavaScript spullen.
Maar je kunt ook jQuery doen hier.
>> Dus laten we eens kijken naar dit eerste aspect hier.
We gaan een variabele genaamd HTML, dat is een string te creëren.
Het heeft een paragraaf tag erin, dat sommige nieuwe tekst heet.
Dus we hebben deze HTML, is het aantal nieuwe tekst, in paragraaf tags.
Nu we eigenlijk willen toevoegen aan de pagina.
Ik stel het op, zodat de HTML voor deze paragraaf, deze titel hier, is append ID.
Als we kiezen append ID en vervolgens toevoegen aan het
de HTML variabele Ik heb zojuist,
Het zal die HTML toe te voegen aan het einde, vlak nadat deze paragraaf tag.
Dus als we dat doen - we gekozen deze paragraaf,
en we hebben de append functie met HTML variabele ik net toegevoegd genaamd,
Het zal die nieuwe tekst toe te voegen daar op de pagina.
We kunnen ook vooraf gaan, waardoor het zal gaan voordat aan het begin van dat element.
Dus er is een aantal nieuwe tekst aan het begin en na afloop.
Ik kan gaan en vernieuwen om zich te ontdoen van dit spul heb ik net gedaan.
Maar dat is een voorbeeld van hoe je de prepend kunt gebruiken en voeg methoden
om dingen op de pagina te manipuleren, voeg wat HTML.
>> U kunt ook lessen veranderen.
Terug in deze stijl bestand, heb ik dit gemaakt voor de win-klasse
die tekst kleur rood, wat achtergrond kleur, en een tekst schaduw heeft.
Het ziet er afschuwelijk, maar ik kan eigenlijk -
deze paragraaf komt overeen met klasse-id.
Dus ik kan de klasse voor de overwinning toe te voegen.
Ik kan deze uitvoeren in de console,
en dat zal toevoegen die klasse, en nu ziet het er afschuwelijk, zoals verwacht.
De CSS wordt automatisch toegepast op de klassen die je -
als er CSS voor een klas, het automatisch wordt toegepast
als je de klasse van een element te wijzigen.
Dan kunnen we gewoon verwijderen met behulp verwijderen klasse.
Dus als je een aantal vooraf gedefinieerde klassen, zoals rood of gemarkeerd,
en dan wil je die van toepassing zijn op onderdelen,
je hoeft niet alle CSS styling elke keer doen.
Je kunt gewoon voeg de klas om een ​​element, en dan zal het automatisch worden -
het zal automatisch geschikt is voor die klasse kijken.
We kunnen ook dingen verwijderen, dus ik ga alle divs selecteren
op de pagina en verwijder ze.
Wat is dat eruit komt te zien?
Het zal lijken alsof er niets, dus er is eigenlijk niets meer over.
Mijn presentatie is verdwenen.
Ik kan verfrissen en breng het terug, gelukkig,
want het is maar een keer lopen,
maar dat is een voorbeeld van het verwijderen, als je wilt een element van de pagina volledig te vernietigen.
>> U kunt ook overschrijven, en ik ga al de paragraaf-tags te selecteren op de pagina
en ga naar binnen laten en vervangen wat tekst die ze in zich hebben
met alleen het woord 'testen. "
Als u dit doet, zult u elke paragraaf te vervangen op de pagina met deze testen.
Yep. Ze zijn allemaal vervangen door testen.
Dus dat is een voorbeeld van de toegang tot de tekst en overschrijven.
U kunt ook informatie opvragen, en dit is echt cool voor invoervelden.
Als u een invoerveld dat mensen aan het typen spullen in,
mensen aan het typen bent spullen erin,
Hier de ingang, een ingang tag met een soort tekst selecteren we.
In dit geval, is er maar een invoerveld in de hele presentatie,
dus we zullen gewoon selecteren van de eerste, en vervolgens de val functie vragen wij het.
Dat geeft de waarde, en voor een input box,
de waarde is gewoon wat er ook gebeurt te zijn binnen het.
Dus als we dit doen, het is gewoon retourneert de tekenreeks spul.
En als we noemen het weer na het schrijven van meer spullen, verandert het in meer spullen.
Dat is een geweldige manier om toegang te krijgen tot onderdelen van een input box, en dan controleren,
is dit een geldig e-mailadres, is dit een geldige datum, bijvoorbeeld.
Je kunt gewoon halen spullen direct als mensen typen,
en dan controleren of deze geldig is, stuur het terug naar een server, doe wat je wilt met het.
En dat is hoe je toegang tot wat er in die dozen.
>> U kunt ook CSS direct wijzigen, dus in plaats van het toevoegen van
een klasse die een aantal vooraf gedefinieerde eigenschappen heeft,
je kunt gewoon toevoegen wat CSS je iets wilt.
Dus laten we select lichaam, dat is de hele presentatie,
en de kleur is de eigenschap die bepaalt wat de kleuren van de tekst is.
Als we het te veranderen in rood, wordt alle tekst in de pagina om te slaan naar rood.
We kunnen iets doen als achtergrond kleur blauw,
daar gaan we, het is prachtig.
U kunt alles wat je wilt met dit te doen.
Met behulp van de CSS-eigenschap, kan je echt veranderen hoe iets eruit ziet op elk gewenst moment.
Het volgende wat is effect.
Effecten zijn in principe hetzelfde als een wijziging van de CSS,
maar ze eigenlijk bieden wat extra animatie aan.
Dus in plaats van enkel het tonen of verbergen van iets of het veranderen van de kleur,
je kunt eigenlijk maakt het geanimeerd.
Hier is de documentatie, als je wilt een kijkje nemen op de uitgebreide documentatie voor.
Maar ik ga de voornaamste dekken.
Er zijn de show en hide eigenschappen.
Tonen / verbergen ID daadwerkelijk overeenkomt met deze hele doos,
dus als ik het verbergen, het zal gewoon verdwijnen.
En ik kan het weer laten zien als ik wil om het te maken terug te komen.
En het is terug. Het maakte eigenlijk niet verdwijnen,
Ik heb eigenlijk niet het te verwijderen uit de pagina, ik stel de eigenschap CSS van zicht naar verborgen
dus je kunt het niet meer zien.
Er is ook schuiven op en naar beneden glijden, die u toelaat om dit effect te hebben.
Het glijdt te verdwijnen, en daarna verdwijnt
u kunt het naar beneden schuiven om het terug te komen. En nu is het terug.
Er is ook dit fade-effect, die - fade ID correspondeert met dit vak.
Als ik fade het uit, dan zal langzaam verdwijnen.
Ik kan ook vervagen het in, en het zal terugkomen.
U kunt dit ook doen vervagen om, die specifiek is voor de fade-functie.
U kunt het vervagen tot een specifieke dekking die u wilt.
Dus als je het langzaam vervagen tot 0,5, het zal de helft zichtbaar worden.
Ik kan het gaan om 0,1, en terug naar 1 om opnieuw het volledig zichtbaar te maken.
Dat is gewoon een animatie die je kunt doen.
>> Er zijn ook de toggle effecten.
Dus ik ga naar de toggle-ID, wat overeenkomt met dit vak te selecteren,
en op die div je toggle kunt noemen, als het zichtbare onzichtbaar zal worden,
als het onzichtbaar is zal het weer zichtbaar worden.
Dus ik deze toggle functie twee keer gebeld, de eerste was
hetzelfde als huid, het tweede gesprek was hetzelfde als een show.
En u kunt dit ook doen met een fade toggle,
die het zelfde ding, behalve dat het eigenlijk vervaagt doet.
En hetzelfde met de glijbaan schakelen.
Er zijn geketend effecten als goed, wat betekent
Als u een element selecteren en gewoon bellen een heleboel animatie methoden op het,
als je wilde om uit te faden, schuif omlaag,
en vervolgens verbergen en vervolgens verdwijnen in, zal het hen te doen op een rij.
Dus verdween, kwam terug - om wat voor reden, heeft de huid niet gebeuren.
Laten we proberen het uit. Ja, dus het vervaagde en toen gleed weg.
En er zijn nog veel meer. U kunt de animatie-functie gebruiken
om uw eigen animaties te maken, dat is vrij complex,
maar het biedt u oneindig veel uitbreidingsmogelijkheden.
U kunt elke vorm van animatie die u wilt maken.
U kunt ook de wachtrij gebruiken om de rij staan ​​meerdere animaties tegelijk.
Dus als je iets om te vliegen over de pagina wilt,
glijbaan vanaf de rechterbovenhoek naar de linkeronderhoek, kunt u dat doen,
en gewoon een heleboel acties gaan de een na de ander.
>> Het volgende wat we gaan praten over gebeurtenissen.
Evenementen toelaten - tot nu toe, hebben we net te typen dingen in de console
en dat is een manier om dit te realiseren,
maar op een echte pagina, gaat u niet in staat zijn om
maakt de gebruiker soort dingen in de console.
U wilt dingen automatisch gebeuren.
Daarvoor moet u op gebeurtenissen die te activeren op sommige bepaalde gebeurtenis happening gebruiken.
U kunt de documentatie voor de volledige details.
Dus laten we eens kijken. We willen het vak tonen of verbergen,
maar nu doet deze knop niets doen omdat ik nog niet implementeren.
Ik ga om te gaan naar de eigenlijke HTML-pagina.
Hier is de glijbaan. Er is een div voor de dia.
Het heeft de klasse van de schuif.
Er is de tekst. Nu, er is deze doos en de doos knop.
Hoe zouden we eigenlijk maken deze verdwijnen?
Allereerst, laten we schrijven een functie die maakt het vak ID verdwijnen.
Dit is de syntaxis voor functie neer, laten we noemen het hideTheBox gewoon.
Het bevat geen argumenten te nemen, omdat er geen argumenten worden genomen.
We kunnen het vak ID te selecteren.
Dus met behulp van de jQuery selecteert, kunnen wij doos ID selecteert,
en dan gewoon laten verdwijnen.
Laten we het fade-out.
Als we liepen deze functie in de eigenlijke console,
We konden deze functie te definiëren; kunnen we hideTheBox noemen, en het werkt.
Maar we willen dat het gebeurt wanneer de knop daadwerkelijk wordt ingedrukt.
Om dat te doen, moeten we een evenement te gebruiken.
Om een ​​evenement te binden aan een aantal specifieke toets of een bepaalde actie gebeurt,
moeten we het element dat het evenement zal leiden selecteren -
of dat zal de gebeurtenis triggeren, sorry.
>> Dus in de eerste plaats, selecteren we de doos knop ID
want dat is de knop, en nu, voor die toets,
wij willen een animatie te maken wanneer het klikte.
Dus er is deze klik functie.
Het stelt u in staat om een ​​andere functie te binden.
Deze functie heeft een andere functie als argument
we kunnen passeren in de hideTheBox functie,
en wanneer op deze knop wordt geklikt, wordt die functie automatisch uit te voeren.
Dus dit zal werken als we dit redden, zal ik vernieuwen,
en - een seconde, het spijt me.
Laat ik dit oplossen heel snel.
Oke. Er gaan we dan. Dus nu de doos verdwijnt als we op de knop.
We kunnen ook veranderen deze tot slechts fadeToggle,
verander het enkel om de doos te verbergen of weer te geven,
en dit zal ook te werken, als we vernieuwen.
We kunnen het te verbergen, kunnen we ook laten zien, en dat zal blijven werken.
Een ander ding dat we kunnen doen is, weten we eigenlijk niet moeten dit hideTheBox functie te definiëren
voordat we noemen de klik-functie.
Dus in plaats van het definiëren van de functie en het roepen hideTheBox,
we alleen maar gaan om het te bellen als dit ding wordt geklikt.
Dus we kunnen definiëren anoniem in hier,
dat is een kenmerk dat JavaScript heeft.
U kunt een functie definiëren; normaal, zouden we zeggen functie hideTheBox
met argumenten, maar in plaats daarvan, kunnen we alleen maar zeggen functioneren zonder argumenten,
start de accolade om de functie te definiëren,
dichtbij dat accolade, en dan gewoon definiëren de functie in hier,
binnen de eerste haakjes en de laatste haakjes
die overeenkomen met de argumenten van de klik-functie.
Dus we passeren in deze functie, kunnen we deze lijn van code hier kopiëren,
en dat zal precies hetzelfde doen.
En nu we dit niet willekeurig fadeTheBox functie hebben
dat zit rond zonder duidelijke reden.
De functie werd gedefinieerd anoniem, is het niet een naam hebben.
Het zal alleen uitgevoerd worden wanneer we klikken op de doos knop.
Zo verfrissend eens meer, nog een keer, en je kunt zien dat het nog werkt.
En dat is hoe je evenementen te creëren.
>> Er zijn veel verschillende gebeurtenissen die we kunnen gebruiken.
Ik ga terug overschakelen naar het gebruik van de console om gewoon laten zien hoe deze werken.
De ID's voor elk van deze met elkaar overeenkomen box.
Dus dit vak is klik ID, dit is de sleutel ID, en dit is de muis ID.
Een ding is dat er deze actie functie; plaats van te typen het uit elke keer,
Ik heb eigenlijk ging door en gedefinieerd deze actie functie neer hier.
Het doet hetzelfde als de hideTheBox functie.
Het wordt dit vak en ofwel verdwijnt het uit of vervaagt in het stopcontact
En dat is waarom we in staat om het te gebruiken hier.
Dus als we op deze klik ID, we willen ervoor de doos verdwijnen of weer oplaait.
Het is hetzelfde als de knop die we hadden in de laatste dia.
Nu na noemen we dat, kunnen we klikken op deze en de doos zal verdwijnen,
klik dan op het weer en de box zal verschijnen.
Dat is vrij simpel. Dubbelklik doet hetzelfde,
behalve het vereist een dubbelklik.
Dus als je erop klikt een keer en klik erop weer niets zal gebeuren,
maar als je dubbel klikt snel, zal het verdwijnen.
Als je dubbel klikt nogmaals, het zal terugkomen.
Dus dat is vrij eenvoudig.
Invoer van het toetsenbord is een beetje raar, ik denk niet dat het echt werkt in dit voorbeeld
omdat de sleutel omlaag, omhoog en druk op de toets en andere kernactiviteiten
Activeer niet uit wat je het element binden aan.
Bijvoorbeeld, zelfs als ik gebonden toets ingedrukt om het lichaam of iets anders volledig,
dan zou het toch te activeren, ongeacht - het is niet specifiek.
Ik hoef niet te klikken op deze en druk op een toets om het even wat verdwijnen.
Het zou ongeacht wat element Ik ben momenteel inch worden geactiveerd
Zodat deze niet echt werken in dit voorbeeld
omdat het me niet herkennen als het invoeren van input in de invoer van het toetsenbord div.
>> Maar als je kijkt naar de muis acties,
de eerste is zweven, en het kan een aantal van deze met behulp van CSS te doen.
Als je CSS gebruiken, kunt u deze maken zodat als je zweven over iets,
dan is zijn stijl verandert.
Maar met behulp van jQuery kun je de stijlen van andere dingen ook veranderen.
Dus, bijvoorbeeld, gaan we tot actie bellen als we zweven over deze div.
Dat betekent dat als we zweven over het, dan is het vak verdwijnt.
Als we trekken er op uit, zal het vak weer.
Als we dit noemen en zweven over het, doet de doos verdwijnt,
en zodra we gaan weg, het komt terug.
Als we deze hover functie bellen op de muis-ID,
wat overeenkomt met dit vak, dan als we zweven over het vak,
dan is de doos ook daadwerkelijk verdwijnen - het is zijn funky nu, maar -
als we trekken er op uit, het zal weer verschijnen. Nu is het terug voor een of andere reden.
De muis invoeren en muis bewegen functies zijn enigszins vergelijkbaar, maar iets anders.
Muis voer alleen geactiveerd wanneer de muis het vak, zoals verwacht.
Dus als je te verplaatsen in het, het zal verdwijnen.
Maar het zal niet opnieuw als je verder weg, dan moet je terug gaan naar het voor het om terug te komen.
Er is ook de muisbeweging functie, die wordt geactiveerd
wanneer de muis is ook aanwezig in het vak.
Dus het zal gewoon blijven gaan, vervagen in en uit.
En het is eigenlijk logging - het lijkt alsof het is gewoon vervagen in en uit,
maar het is eigenlijk houtkap veel meer acties dan dit,
dus als je verder weg het zal gewoon doorgaan omdat het aangemeld als duizend van hen.
Misschien niet de duizend. Misschien vijf.
Het registreert meer dan dat.
Het punt is, alle muisacties het, er zijn veel van hen.
U kunt lezen over de anderen, maar ze zijn allemaal iets anders,
en je kunt kiezen welke u nodig hebt
voor welk specifiek doel je probeert te doen.
>> Het volgende wat ik ga om te praten over is AJAX.
AJAX, ik weet dat we niet dekken JavaScript in zo veel diepte van dit jaar,
dus ik ga gewoon over AJAX te praten in het algemeen voor een minuut.
AJAX staat voor Asynchronous JavaScript and XML.
Het is in principe, bijvoorbeeld wanneer je op Facebook en het duwt u een melding,
dat komt omdat AJAX actief is op uw browser.
Om de paar seconden uw web browser is eigenlijk
gaan naar de servers van Facebook, hen te vragen, heb je iets nieuws hebt voor mij,
en dan komt het naar u terug.
Hiermee kunt u aanvragen naar een server
zonder daadwerkelijk naar de pagina te laden.
Dus normaal gesproken, als je net met behulp van PHP en een database
moet je de pagina vernieuwen voordat u nieuwe gegevens kunt krijgen van de server.
Maar met behulp van AJAX, kunt u trekken voor die nieuwe informatie voortdurend,
of trek voor het wanneer u op een knop of iets dergelijks.
Dus dit stelt ons in staat om aanvragen te doen zonder de pagina te herladen,
en we kunnen gebruik maken van ofwel GET of POST verzoeken.
>> GET verzoeken zijn, bijvoorbeeld als je naar Google.com
en doe q = testen. Dat geeft hen een query te testen.
En dat is een GET-aanvraag omdat het passeren in die parameters in de URL zelf.
Een POST-aanvraag is alsof je ze sturen via de post.
Het is alsof je hem in een brief en het schip af voor hen,
maar ze eigenlijk niet zien van de inhoud. Ze zijn niet zichtbaar in de URL.
U kunt niet rechtstreeks typ het in, je moet het bijna stiekem sturen.
Het is in een post.
Maar met behulp van jQuery, kunt u doen GET en POST verzoeken
veel gemakkelijker dan je normaal zou kunnen gebruikt gewoon webbrowser.
U kunt API's opvragen met behulp van GET-verzoeken, en je kunt ook controleren of aanmeldingsgegevens.
Op de volgende pagina, maakte ik deze, die vraagt: "Wat eten we?"
met behulp van de Harvard eten API, dus laten we trekken die omhoog.
Dit is slechts een voorbeeld van hoe je jQuery kunt gebruiken om een ​​GET-aanvraag doen om een ​​API
en weer informatie krijgen van het.
Dus we willen het menu te zien voor vandaag,
en we willen zien wat er voor de lunch.
Hier is de URL naar een GET-aanvraag in jQuery te creëren.
u gebruik maken van de $. krijgen functie.
Het eerste argument is de URL, dus precies wat je bevragen.
Dan is het volgende argument is een functie die wordt uitgevoerd wanneer de GET-verzoek is voltooid.
Dus je af te sturen enkele aanvraag naar de server, wachten om terug te komen.
Als het terug komt, je gaat om wat actie te ondernemen met de gegevens die terug is van de server.
Laten we verder gaan en coderen dit ook.
Ik wist niet coderen dit ook niet, op doel.
Hier is de TODO. Allereerst, laten we gebruik maken van de gebeurtenis bindend
zodat wanneer deze knop wordt ingedrukt, sturen we uit een GET-aanvraag.
En toen dat GET-verzoek terug met een aantal gegevens,
we gaan om het te schrijven in deze maaltijd info ID div.
Allereerst, laten we selecteert u de knop voedsel ID.
Als het klikt, willen we dat het iets te doen.
Laten we het gewoon een anonieme fuction, zoals voorheen.
Kunnen wikkelen die accolades,
en wanneer deze knop wordt ingedrukt, willen we een GET-aanvraag sturen
om te controleren wat er voor de lunch.
Om dat te doen, kunnen we gewoon typen in $. Krijgen.
Dit is een jQuery functie, met behulp van het dollarteken.
Het duurt een paar argumenten. De eerste is de URL,
de tweede is de callback functie, de functie die heet
wanneer dat verzoek daadwerkelijk terugkeert.
Laten we eerst de opbouw van de URL.
We kunnen het krijgen van de API die David schreef.
Hier gaat, kunnen we zien dat het food.cs50.net/api/1.3/menus,
en dan moet je gewoon passeren in de namen van de parameters die u wilt.
Dus parameter 1 is de waarde 1.
Het ziet eruit als standaard datum, startdatum, standaard op vandaag
Als je niets, en de einddatum ook standaard in te voeren
tot vandaag de dag als je niets in te voeren.
Dat is wat we willen. We willen gewoon de gegevens voor vandaag te krijgen.
>> We willen het formaat te zijn in JSON.
Dat is gewoon willekeurig, je kunt elke vorm die je wilt gebruiken.
U kunt CSV gebruiken, maar JSON is JavaScript Object Notation.
Het is heel gemakkelijk om JavaScript te begrijpen wat het betekent,
en we kunnen het makkelijker op die manier uit te printen.
Dus laten we daarom vragen in JSON, en laten we verzoek lunch.
Dus maaltijd = lunch. Gewoon om te schrijven dat de URL, gaan we terug hier.
Er is menu's. De eerste parameter is de uitgang = JSON
want dat is wat we willen, en u te scheiden van de parameters met een 'en.'
De tweede parameter is - weet ik niet meer.
Maaltijd. En we willen maaltijd = lunchen.
U kunt deze URL testen door te typen in je browser en ga het.
Het geeft je wat output. Het is gewoon een heleboel dingen die voor de lunch.
Het is in deze lelijke formaat. We willen het op onze pagina afdrukken in een betere indeling.
Dus de URL juist is, nu moeten we er gewoon een functie te schrijven
om terug te bellen als het verzoek succesvol is.
Deze functie zal daadwerkelijk een argument. Het zal data.
De data is wat terugkomt uit de GET-verzoek na de GET-verzoek is gedaan.
We kunnen de accolades doen, hier schrijven we de anonieme functie
die wordt uitgevoerd, met behulp van die gegevens toen we terug krijgen van de informatie.
Dus data, wanneer we getypt in deze URL,
dit is wat de gegevens gaat uitzien. Het gaat om deze enorme string.
Maar de goede zaak is, JavaScript kan het ontleden met behulp van de JSON.parse functie.
Dus laten we een nieuwe variabele parse data genoemd.
En parse data is een array van objecten.
Elk object bevat informatie, zoals - nou, laten we eens een kijkje.
Het heeft een datum, een maaltijd, categorie, recept, al die andere dingen.
Dus laten we gewoon uitprinten de naam voor elk een.
Laten we itereren over de hele reeks van dingen die we terug van het,
en gewoon uitprinten een ieder - afdruk van de naam van een ieder.
Dit is een lus.
>> JavaScript heeft dit nuttig syntax, waar u een variabele en loop over een array kunt maken,
en var i is gewoon de iterator, dus in plaats van te moeten doen var i = 0,
i minder dan de lengte was, i + +, kunt u gewoon doen var i in ontleed gegevens.
In dit voorbeeld wordt ontleed data (i) komen overeen met de element
van de matrix, het werkelijke object.
En we willen de naam uit te halen.
Dus laten we gewoon doen naam.
En het laatste ding is, we gaan een aantal jQuery opnieuw te hebben.
Daadwerkelijk toe te voegen aan de div, deze maaltijd info div dat is momenteel leeg.
Dus laten we selecteren dat.
We zullen jQuery en selecteer maaltijd info div id of maaltijd info ID gebruiken, sorry.
We willen toevoegen aan deze.
Als we dat testen, bijvoorbeeld, het zou gewoon overschrijven het elke keer weer.
Dus we kunnen gewoon voeg dit.
Het huidige element in de array, zullen we de naam uit te halen,
en wij zullen het toevoegen aan het eind van de maaltijd info ID div.
En dan gewoon om het er schoner,
we zullen ook voegen een regeleinde dus het is niet allemaal op een lijn.
Dus als alles goed gaat, zou dat goed zijn -
Allereerst, wanneer op deze knop wordt geklikt,
Het zal uit een GET-aanvraag te sturen naar deze URL.
Wanneer de gegevens komt terug van het, het zal het ontleden,
zet hem in JSON, lus over de hele reeks vertegenwoordigen die gegevens,
en dan voeg je de naam en een regeleinde
aan elke regel in deze maaltijd info ID die voorheen leeg was.
Dus terug naar deze pagina, zullen we vernieuwen,
klik, te weten - het werkt niet. Dat is jammer.
En dit is waar debuggen komt inch
Index.html lijn 1.
Dat is interessant.
Oke, goed, in plaats van te besteden tijd om dit te doen, ik ga gewoon
trek het gedaan bestand dat ik heb, dat is de voltooide versie.
Ik weet niet zeker wat het verschil is, maar we kunnen gewoon te openen in plaats van dit op.
En we gaan naar de AJAX, en dit moet correct werken.
Dat is wat vandaag de dag was voor de lunch,
in willekeurige volgorde, met aanhalingstekens eromheen, dus het is niet het mooiste.
Maar, natuurlijk, als je dit aan het doen waren voor een afstudeerproject,
je zou het er beter uitzien.
Maar dat is slechts een simpel voorbeeld van hoe u de GET-verzoek doen.
En als we kijken naar de eigenlijke code, veronderstel ik, ik ben er vrij zeker van
het is nog steeds vrijwel hetzelfde.
Oh, ik vergat om het te converteren naar een string, dat is het.
Nee, het is nog steeds niet werkt. Hoe dan ook, hier is de werkelijke voltooide code
voor wat dit zou moeten uitzien,
en hij doet hetzelfde als wat ik net geïmplementeerd.
Wanneer u op de knop klikt, gebruikt het GET JSON om de gegevens automatisch te ontleden.
Het neemt de gegevens terug uit het en doorloopt de hele reeks
en prenten uit de - wat er voor de lunch vandaag, de naam ervan,
en voegt een regeleinde na elke regel.
Dat is hoe je de GET-functie gebruiken.
>> U kunt ook gebruik maken van POST, waar ik geen tijd hadden
te schrijven van een voorbeeld voor, maar we kunnen kijken naar de documentatie.
Als je kijkt naar jquery.post,
je kunt zien dat het bijna hetzelfde.
Je hebt een URL, maar in plaats van parameters doorgeven met behulp van -
net zetten ze in de string van de URL zelf,
je moet passeren in deze variabele data
dat is eigenlijk een array, een woordenboek dat de kaarten op waarden.
U passeert dat in, en die stuurt ze in het gebruik van een POST.
En zodra je dat hebt, dan kun je een succes functie hebben
die wordt uitgevoerd wanneer de data terugkomt.
Anders is het precies hetzelfde. Dus met behulp van POST,
wilt u misschien POST gebruiken, bijvoorbeeld als u een invulformulier
je laat mensen inbreng wachtwoorden in, en stuur die wachtwoorden af
om uw back-end script, in te checken in de database of die gebruiker geldig is of niet.
U kunt dat doen alles met behulp van jQuery in plaats van naar de pagina helemaal te vernieuwen.
Dat is hoe ik in de blog die ik liet je eerder geïmplementeerd.
Als we naar het einde portaal-en uitloggen, uitloggen,
Uitloggen werkt niet.
Nou, laat me gewoon openen in een nieuw venster.
Hier is er een wachtwoord, en ik was van plan te typen in iets willekeurigs.
Het werkt niet, maar je kunt zien dat we niet
daadwerkelijk naar de pagina helemaal te vernieuwen.
De code, als je wilt kijken,
is allemaal beschikbaar in hier.
Dus de code schreef ik vorig jaar ergens.
Zoals je hier kunt zien, we verzenden van een POST-aanvraag.
Ik heb een bestand met de naam login.php in de back-end,
die controleert of het wachtwoord geldig is.
De parameters die we passeren in zijn wachtwoord, toegewezen aan
de input die is in dit invoerveld moment.
En wanneer de data terugkomt, we controleren.
Als de gegevens onjuist is, dan zeggen we verkeerd wachtwoord, schuif naar beneden,
en gewoon laten verdwijnen daarna.
Anders, laden we de admin pagina.
En dit alles is geschied met behulp van JSON.
In dit veel regels code, kunt u gewoon doorgeven van de gegevens aan de back-end,
controleren of het correct is, controleer dan of u ingelogd correct,
en eigenlijk reageren, heroriëntering van de persoon naar de juiste pagina
of niet te laten inloggen en hen te vertellen dat ze hadden een verkeerd wachtwoord.
Dus dat is een voorbeeld van hoe je jQuery POST kon gebruiken
een POST-aanvraag sturen naar uw back-end,
controleren of iemand ingelogd correct.
>> Oke, dus dat is al de voorbeelden die ik had, en al de dingen die ik wilde dekken.
Dat zijn de belangrijkste dingen die jQuery kun je doen:
selecteert elementen, wijzig ze met behulp van DOM manipulatie,
U kunt effecten toevoegen, activeert dingen op bepaalde gebeurtenissen,
en doen ook AJAX verzoeken zeer naadloos en gemakkelijk.
Dus bedankt voor het komen of het kijken,
en als je vragen hebt, laat het me weten. Yeah?
[Student] Terug naar toen je liet zien, je JSON had na de POST-aanvraag tussen aanhalingstekens,
en ik vroeg me af wat dat deed.
>> Ja, dat zie ik. De vraag was dat, in het voorbeeld dat ik net liet zien,
was er het woord JSON tussen aanhalingstekens rond het -
Ik zal gewoon trek het weer - rond de POST-functie.
Ik ben gewoon omhoog te trekken om te laten zien.
Dus hier is dit POST-aanvraag, en er is een JSON tussen aanhalingstekens.
Die net bepaalt wat we verwachten de uitgang te zijn.
Dus als we passeren in JSON als de verwachte data type,
het is niet een vereiste, maar als we het passeren,
vervolgens de gegevens automatisch worden ontleed als JSON.
Zodat we niet hoeven te de JSON parse functie aan te roepen op het,
het zal gewoon automatisch gebeuren.
En als je een blik op de documentatie voor POST nemen,
er is dit data type variabele, het type gegevens verwacht van de server.
Dit standaard op een intelligente gok dat kan verkeerd zijn,
dus je kunt het spatie verlaten, maar het is gewoon de aard van de gegevens
in de codering die u gebruikt, of het nu JSON of XML of iets anders.
>> Andere vragen?
Oke. Als u nog andere vragen, voel je vrij om me te mailen
bij vshekhawat@college.harvard.edu,
en de dia's en de code moet online beschikbaar zijn vrij snel.
Veel succes met je laatste projecten, hoop dat je jQuery gebruiken.
[CS50.TV]