[Powered by Google Translate] [Seminar: jQuery] [Vipul Shekhawat, Harvard Universiteti] [Bu CS50 edir.] [CS50.TV] Evdə birlikdə aşağıdakı istəyirsinizsə, həqiqətən, online mənim slaydlar istifadə edə bilərsiniz Bu linki gedərək. Bu bit.ly. üzrə TjjRWj var Ayrıca, yalnız birbaşa URL bilərsiniz olan mənim adı olan cloud.cs50.net / ~ vshekhawat, edir və jQuery. Mən evdə seyr etdiyiniz əgər boyunca edin təşviq Burada olduğunu, əgər da, bu, olduqca interaktiv təqdimat çünki. 

Bu gün Beləliklə, mən jQuery söhbət etmək gidiyorum və ilk sual jQuery nədir? Bu il Mən sizə uşaqlar JavaScript əhatə deyil bilirik biz keçmiş illərdə olduğu kimi çox ayrıntı kimi. JavaScript, ilk növbədə, yalnız bir klient dili Siz hər bir istifadəçi maşın scripts və kodu çalıştırmak üçün istifadə edir. Belə ki, insanlar üçün web pages təmin edən server lakin siz onların maşın stuff edə bilərsiniz Sizin server hər 30 saniyə və ya belə bir şey üçün sorğu göndərmək üçün onların maşın xahiş edirik. JavaScript istifadə edə bilərsiniz. JQuery yalnız JavaScript üst daha çox funksionallığı təmin edir ki, sizin üçün əlavə stuff edir. Siz üst məzmunu da baxsaq, ki, siz bunu edirik ki, məhsullarının bəzi təsvir edir. Belə ki, ümumi, yanvar 2006-cı ildə yaradılmışdır. İlk Avqust 2005-ci ildə qəbul edilmişdir. Bu bir neçə il ətrafında olub və bu, həqiqətən, yeni Web 2.0 hərəkət hissəsi oldu ki, Internet, belə parlaq təşkil edir. Bu ən çox istifadə edilən JavaScript kitabxana var. Milyon 19,6 ərzində saytları istifadə olunur və istifadə hələ də artır builtwith.com görə, bu, yəqin ki, son bir il ərzində, yalnız davamlı kifayət qədər xətti artırılması olmuşdur. Üst 10 milyon saytları arasında hələ də var - Onlardan 40%-i hal-hazırda istifadə olunur. Facebook istifadə edir, digər web sites çox Hal-hazırda istifadə edin. Siz isterseniz, öz həmin statistika baxmaq olar. Bir təməl və 13 idarə heyəti üzvləri var, çünki siz bu legit deyə bilər müntəzəm əsasında işləyən 20 şəxsiyyət bir qrup ilə birlikdə. Belə ki, çox geniş istifadə, bir. Org URL onu xülya deyil, , digər heyəti üçün spin-halları var, belə ki, böyük deyil. 

Neden bu istifadə etməli? JQuery çox yüngül. Bu böyük bir fayl var deməkdir. Siz yükləyə bilərsiniz ki, minified faylı olan bütün ağ yer və şərhlər olmadan, və yalnız 32 kB var. Belə ki, yalnız web page daxil silkələmək üçün çox asandır və yalnız istifadə başlamaq üçün. Bu da çox səmərəli yazılı var, belə ki, bir çox almaq deyil - siz onu istifadə çox zaman Sizin veb aşağı yavaş deyil. Bu əvvəllər qeyri-mümkün idi ki, hər şeyi həyata imkan verir. Funksionallığı bəzi aspektləri var animasiyalar yaratmaq kimi, normal etmək çox çətin olardı. Amma jQuery onlar həqiqətən çox sadə istəyirik. Və nə üçün annoying ki, bəzi şeylər var JavaScript mümkün, bir Post sorğu göndərməklə kimi, lakin bir server sorğu göndərmək üçün, yazmaq kodu beş və ya altı və ya yeddi satır. İndi yalnız bir funksiyası zəng, kodun bir line edə bilərsiniz. Bu, həqiqətən, sizin bunu etdiyiniz məhsulları çox asanlaşdırır. Və bütün sərin uşaqlar istifadə olunur. Ki, mən mənə demək. Mənim son layihə keçən il olan, news.whrb.org edir radio stansiyası üçün ki, mən bu blog yaratdı bütün biz etdik ki, göstərir və onlar üçün MP3 faylları keçirilir. Siz keçmişdə göstərir vasitəsilə baxa bilərsiniz və bütün jQuery istifadə edərək həyata. Siz deyə bilərsiniz Çünki bütün bu animasiyalar, mahiyyətcə. Siz Belə ki, əgər - siz yeni bir yazı yaratmaq istəyirsinizsə, bu kiçik slideDowns görmək; ki, bütün jQuery istifadə edərək həyata. Bu fade - belə şeylər bu cür bütün jQuery istifadə edilir və davamlı site naviqasiya səhifə yeniden yoxdur. JQuery istifadə edilir ki, başqa bir sərin şey bu təqdim edir. Mən scrolldeck adlanan bu açıq mənbə şey kullanıyorum olan kimsə jQuery üst yazdı. Həqiqətən mənbə baxsaq, siz görə bilərsiniz Onlar bu dollar işareti istifadə edirsinizsə; dollar əlamətləri bir funksiyası jQuery funksiyanın demek üçün jQuery istifadə olunur. Belə ki, onlar jQuery üst bir banderol müəyyən edirik ki, bu kimi bir təqdimat etmək üçün imkan verir və siz burada onlar orijinal jQuery fayl daxil olmaqla, etdiyiniz görə bilərsiniz olan jQuery istifadə etmək istəyirsinizsə, siz daxil lazımdır nə öz saytlarında. 

Ki toxunan necə quraşdıra bilərəm? Siz, fayl jQuery.com və yükləmək bilərsiniz bir web directory üçün əlavə və daxildir. Belə ki, yalnız üst, HTML fayl rəhbəri tag ilə Sizin əsas HTML fayl, yalnız kodu ki, xətti istifadə etdiyiniz jQuery hansı versiyası üçün düzgün versiya ilə. Siz jQuery.com gedərək onu yükləyə bilərsiniz "download jQuery" düyməsini basın və siz onu var. Vəssalam. Və faktiki olaraq, biz bu kimi görünür nə bir göz bilər. Burada download basın varsa, jQuery bu. Bu, sizin üçün bütün sehrli stuff ki, yalnız bir böyük JavaScript fayl var. Bu bütün oxunaqlı olmayan minified versiyası var. Siz həmçinin oxunaqlı olan, inkişaf versiyası baxmaq olar lakin hələ də çox, çox uzun. Bu orada heyəti bir çox var. Ayrıca Google-un ev sahibliyi versiyasını keçid edə bilərsiniz. Belə ki, yalnız üçün Google etibar imkan lazımdır. Onlar bütün dövrlərdə mövcud onun hər versiyası təmin edir. Beləliklə, siz yəqin ki, sizin üçün keçiriləcək Google etibar edə bilərsiniz. Və ya jQuery öz son versiyası keçid edə bilərsiniz. Onlar həmişə son versiyası yeniləndi olan bir URL var. Bu jQuery-son var ki, bir problem var hansı ki, əgər yenilənir jQuery və əvvəlki funksionallığı bəzi onlar retrograded ya deprecated olur ki, bu ola bilər - bu, artıq dəstək almaq deyil başlaya bilərsiniz. Siz version 1.8.2 istifadə edərək web yazmaq Belə ki, əgər vaxt versiyası 2.7 çıxır Əgər wrote funksiyaları bəzi artıq işləmir. Belə ki, 32 kB fayl yalnız download yaxşıdır web page qoyun və bu, əbədi işləmək lazımdır. 

Mən irəli getmək və jQuery faktiki funksiyaları haqqında danışmağa başlamaq üçün gidiyorum. Ilk şey selectors edir. Bu jQuery ilkin təmin düşdü edilib budur. Və baxmaq sənədlərin vurun Mən əhatə ediləcək alıram selectors üçün ətraflı sənədlər. Selectors arxasında ideyası bir səhifədə HTML elementləri seçə bilərsiniz ki,. Bir sayfada Elements kimlikleri və siniflər və onlara digər müəyyən aspektləri var. Da var - müxtəlif sifarişlərin they're. Onlar bir-birinə daxilində iç içə olduğunuz zaman bəzi. JQuery sahifada elementləri geri ki, sadə sorğu tikintisi imkan verir. Sonra, jQuery funksiyaları istifadə edərək bu elementlərin manipulyasiya edə bilər biz sonra almaq lazımdır manipulyasiya Bölüm edir. Siz HTML, CSS dəyişdirmək, dəyişə bilərsiniz siz də diri və müəyyən hadisələr haqqında aktivləşdirmək funksiyaları əlavə edə bilərsiniz. Bir şey tıklayan əgər Belə ki, məsələn, siz nə bir şey istəyirəm Siz jQuery həmçinin istifadə edə bilərsiniz. Və elementləri seçmək üçün yollar bir çox var. Onların əksəriyyəti, mən istifadə heç vaxt sonra, lakin əsas də var olan olduqca vacibdir. Bu element dəyişdiricinin, məsələn, əgər siz yalnız bir şey seçilməsi edirik ki, bir div var - Mən, həqiqətən, bu slayd təqdimat üçün açıq kodu. Belə ki, məsələn, burada ilk slide var. Burada biz bir div var. Biz əslində səhifədəki bütün divs seçsəniz, yalnız bizə bu faylı mövcud olan bütün divs bir sıra verəcəyik. Bu ID selector müəyyən bir şəxsiyyət vəsiqəsi ilə bir şey seçmənizə imkan verir. Bu, misal üçün, bu şey ID "nə" var Belə ki, əgər və biz # hansı əvəzinə bəzi ID ilə bu idi əgər, yalnız bir element var ki, saytın ki element ki, bir sıra qayıtmaq olardı. Biz də malik selectors bu şəkildə birləşdirə bilər yalnız divs ki kimlikleri ilə hər şeyi seçin. Bəli belə. Yalnız bundan ID ki divs seçin. Sinif üçün yalnız bir dot istifadə, bu CSS eyni şey var. Övlad da çalışır; bəzi sinif varsa Məsələn, belə - və bu ərzində elementlərin iç-içə olmuşdur bəzi sinif və başqa bir səhifəyə keçid etmək anker tag var, linki almaq üçün bu sintaksis istifadə edə bilərsiniz. Siz, həmçinin, bir neçə şeyi seçə bilərsiniz; yalnız virgülle onları ayırmaq, Siz istədiyiniz hər hansı bir selector istifadə və bir sıra, bir dəfə onların hamısı seçin. Və sonra da seleksiyaçı yoxdur, belə ki, bütün divs seçə bilərsiniz xüsusi sinif yoxdur. Və yalnız bu seçim işləri necə bir giriş əldə etmək üçün yararlı bir yoldur. Mən ikinci bəzi konkret misallar bilərsiniz. 

Ətraflı selectors var - bu yalnız bir neçə misaldır. Var Bu onlarla, lakin bütün image tags seçin istəyirsinizsə, bir element, sonra yalnız edin: image. Siz, məsələn, hətta elementləri seçin istəyirsinizsə, onlardan 20 olduqda, siz, 0, 2, 4, 6 və s seçin istəyirəm hətta, ya da edə bilərsiniz: siz tək. Bu yalançı selectors var, onlar həqiqətən hesablamaq o deməkdir ki, hər element deyil, yalnız gedir və bütün bunların seçilməsi çox. Siz həmçinin bilər - hər bir element də özellikleri ola bilər. Belə ki, məsələn, class = mərkəzi də bir əlamətdir. Bu anker tag üçün href, mətn istinad, həmçinin əlamətdir. Bu, həqiqətən, general var - Beləliklə, siz xüsusi bir səhifə və ya yalnız links bir şey seçə bilərsiniz. Siz istədiyiniz hər hansı bir atributu ilə bir şey seçə bilərsiniz. Və sonra, həmçinin, atribut ehtiva edir. Siz, məsələn, bütün giriş elementləri seçin istəyirdi ki, onların adı kimi söz "pass" var Bir sahifada giriş mətn bloku varsa ki siz seçin bilər bir yol olardı ki, "parol", deyirlər. Və daha çox var. Siz irəli getmək və sənədlərin baxmaq olar və işləyir necə xüsusi misallar görürük. 

Növbəti şey DOM manipulyasiya edir. Biz elementləri seçin sonra, biz, həqiqətən, onlara məhsulları etmək istəyəcək. Bu günə qədər biz bütün o baxdı, ancaq siz sənədlərin nəzər salsaq, Biz nə edə bilər ki, bir çox həqiqətən var. Bu nöqtədə, biz bu təqdimat elementləri seçin olacaq və onlara jQuery istifadə manipulyasiya. Bu jQuery istifadə edərək həyata keçirilir Çünki biz jQuery kitabxana giriş əldə və biz bu kodu çərçivəsində funksiyaları istifadə edə bilərsiniz. Haqqında bilmirəm bilər ki, bir faydalı şey konsol edir. Və Google Chrome mən istifadə edirəm nə. Siz alt komanda J basın bilərsiniz və ya alt nəzarət J konsol açılacaq. Firefox Mən bu əmri shift K və ya nəzarət shift K. edirəm Safari siz bəzi parametrləri dəyişdirmək getmək üçün var. Orada siz bunu istəyirsinizsə, bir link var, amma Chrome və ya Firefox əldə gəlir. Elə Konsol açmaq qoy, burada aşağı edir. Bu əsasən istədiyiniz bir şey, yalnız imkan verir. Belə ki, yalnız bir dəyişən adlanan x yarada edəbilərsiniz x = 5 x + 2 nə edək. Siz CS kimi bir şey də bilər + Baxaq, x CS50 olacaq + 45. Siz yalnız bəzi tipik JavaScript stuff edə bilərsiniz. Amma siz də burada jQuery edə bilərsiniz. 

Belə ki, burada bu ilk aspekti baxaq. Biz bir simli olan HTML adlı dəyişən yaratmaq olacaq. Bəzi yeni mətn deyirlər ki, bu paraqraf tag var. Beləliklə, biz bu HTML var, paraqraf tags bəzi yeni mətn var. İndi biz əslində səhifə əlavə etmək istəyirəm. Mən bu paraqraf üçün HTML, burada bu mövzu, əlavə ID edir ki, yaratmaq. Sonra əlavə ID seçin və əgər ona əlavə Mən yalnız yaradılmış HTML dəyişən, Doğru bu bəndin tag sonra sonunda HTML əlavə edəcək. Bunu etsəniz - biz, bu paraqraf seçilmiş və biz, yalnız əlavə HTML dəyişən ilə əlavə funksiyası adlanır sonra bu səhifə hüququ var ki, yeni mətn əlavə edəcəklər. Biz də ki element əvvəlinə əvvəl gedəcək deməkdir ki, başına edə bilərsiniz. Belə ki, əvvəlində və sonra bəzi yeni mətn var. Mən irəli getmək və mən yalnız etdiyiniz bu məhsulları xilas yenileyin bilər. Amma ki, siz başına istifadə edə bilərsiniz necə bir misal var və metodları əlavə sayfada məhsulları manipulyasiya, bəzi HTML əlavə edin. 

Siz həmçinin dərsləri dəyişə bilərsiniz. Geri bu stil fayl, mən qalibiyyət sinif üçün yaratdığınız ki, mətn rəngi qırmızı, bəzi fon rəngi, və mətn kölgə var. Bu çirkin görünür, lakin mən, həqiqətən bilər - bu bəndin sinif ID uyğundur. Mən qələbə üçün sinif əlavə edə bilərsiniz. Mən konsol bu həyata keçirə bilər və bu sinif əlavə, indi çirkin görünür, kimi gözlənilir. CSS avtomatik olaraq dərsləri sizə müraciət olur - bir sinif üçün CSS varsa, avtomatik olaraq tətbiq edilir bir element sinfində dəyişə bilər. Sonra biz yalnız aradan qaldırılması sinif istifadə edərək edə bilərsiniz. Əgər qırmızı və ya vurğulanan kimi bəzi əvvəlcədən təyin edilən dərsləri var Belə ki, əgər və sonra, elementləri həmin müraciət etmək istəyirəm hər zaman dizayn bütün CSS nə yoxdur. Siz yalnız bir element üçün sinif əlavə edə bilərsiniz, sonra avtomatik olaraq olacaq - avtomatik olaraq ki, sinfi üçün müvafiq görünür. Biz də hər şeyi edə bilərsiniz, belə Mən bütün divs seçmək üçün gedirəm səhifə və onların aradan qaldırılması. Kimi baxmaq nə gedir? Bu, heç bir şey kimi baxmaq olacaq, belə ki, sol heç bir şey həqiqətən var. Mənim təqdimat getdi. Mən xoşbəxtlikdən, yeniləyin və geri gətirə bilər yalnız bir dəfə çalışan, çünki, siz tamamilə səhifə off ünsürü yox etmək istəyirsinizsə, lakin ki, aradan qaldırılması nümunəsi var. 

Siz həmçinin üzerine bilər, və mən səhifədəki bütün paraqraf tags seçin gidiyorum və onların içərisində getmək və onlara malik hər hansı mətn əvəz yalnız sözü "test". Bunu varsa, bu test page hər paraqraf əvəz edəcəyik. Yep. Onlar bütün test ilə əvəz edirik. Belə ki, mətn daxil olmaq və onu yadda nümunəsi var. Siz həmçinin məlumat almaq bilər, və bu giriş qutuları üçün həqiqətən sərindir. Siz insanlar daxil stuff yazaraq bir giriş qutusuna varsa, insanlar ona stuff yazaraq, Burada giriş, mətn bir növü ilə hər hansı daxil tag seçin. Bu halda, bütün təqdimat yalnız bir giriş qutusuna var belə ki, biz yalnız birinci birini seçin lazımdır, sonra biz bu barədə Val funksiyası zəng edin. Ki, dəyəri qaytarır və giriş qutusuna üçün dəyəri bu, daxili olmaq olur nə kifayətdir. Bunu etsəniz, yalnız simli məhsulları qaytarır. Daha stuff yazdıqdan sonra yenidən zəng əgər, bu daha stuff çevrilir. Ki, yoxlamaq sonra giriş qutusuna elementləri daxil olmaq üçün bir böyük yol, və Bu düzgün e-mail, bu misal üçün, cari bir tarix deyil. Insanlar bu yazaraq kimi Siz, dərhal məhsulları qəbul edə bilərsiniz və sonra, bu, düzgün deyildir olmadığını yoxlamaq bir server geri göndərmək, siz ilə istədiyiniz bir şey edə. Və bu qutuları daxili ne daxil nasıl. 

Siz həmçinin əvəzinə durub belə, CSS birbaşa dəyişə bilərsiniz bəzi əvvəlcədən təyin edilən xüsusiyyətləri var ki, bir sinif, yalnız bir şey istədiyiniz hər şeyi CSS əlavə edə bilərsiniz. Bütün təqdimat Yəni edək seçin bədən, və rəng mətn nə rəng müəyyən edən mülkiyyətidir. Biz qırmızı dəyişdirmək, bu səhifənin bütün mətn qırmızı çevriləcək. Biz, fon rəngi mavi kimi bir şey edə bilərsiniz orada getmək, bu gözəl. Siz bu ilə istədiyiniz bir şey edə bilərsiniz. CSS mülkiyyət istifadə edərək, siz həqiqətən bir şey hər zaman görünür necə dəyişə bilərsiniz. Növbəti şey effektləri edir. Effektləri, əsasən CSS değiştirmeyle eyni şey var lakin onlar, həqiqətən, bəzi əlavə animasiya təmin edir. Belə ki, əvəzinə yalnız rəng göstərən və ya gizlənmək bir şey və ya dəyişdirilməsi, həqiqətən animasiya edə bilərsiniz. Bunun üçün geniş sənədlərin nəzər istəyirsinizsə, buraya sənədlərin var. Amma əsas olanları əhatə gedirəm. Şou və dərisi xüsusiyyətləri var. ID əslində bu bütün qutusuna uyğun göstər / gizlət, Mən bunu gizlətmək əgər, belə ki, yalnız yox olacaq. Mən bunu geri gəlmək etmək istəyirsinizsə və mən yenə də göstərmək olar. Və geri. Bu, faktiki olaraq, yox idi Mən, həqiqətən, səhifə aradan qaldırılması etməyib, yalnız gizli görünürlüğünü və CSS mülkiyyət qurmaq belə ki, artıq görmək bilməz. Də var Slaydı və aşağı uçmaq var; bu təsir verir. Yox qədər slaydlar, və yox sonra siz onu geri gəlmək etmək üçün aşağı sürüşdürün bilər. Və indi geri. Fade ID Bu kutuyu uyğundur - bu fade təsiri də var. Mən bunu həyata fade, onda yavaş-yavaş yox olacaq. Mən də bu fade bilər, və geri gələcək. Siz həmçinin fade funksiyası xüsusi olan üçün fade edə bilərsiniz. Siz istədiyiniz hər hansı bir xüsusi qeyri-şəffaflıq üçün fade ola bilər. Siz .5 yavaş-yavaş o ölmək əgər Belə ki, yarısı görünən olmaq lazımdır. Mən bunu .1 getmək edə bilər və geri 1 daha tam görünür etmək. Yalnız siz edə bilərsiniz ki, bir animasiya var. 

Keçid effektləri var. Belə ki, bu qutusuna cavab verən keçid ID seçmək üçün gedirəm ki, div sizi keçid adlandırmaq olar; görünür əgər bu görünməz olacaq, o görünməz əgər yenidən görünən olacaq. Beləliklə, mən yalnız iki dəfə bu keçid funksiyası adlanır, birinci biri idi şəklində eyni şey, ikinci zəng şou kimi eyni şey idi. Və siz də bir fade keçid ilə bunu edə bilərsiniz hansı faktiki fades istisna olmaqla, eyni şey edir. Və slide ilə eyni şey dəyişə. Zəncirlənmiş təsiri də var, deməkdir bir element seçin və yalnız bu barədə animasiya üsulları bir dəstə zəng əgər, siz onu həyata fade istəyirdi, onda, aşağı sürüşdürün və sonra gizlətmək və sonra ölmək, bu, bir sıra onlara edəcəyik. Belə ki, yox, geri gəldi - nədənsə gizle olmadı. Nin cəhd edək. Bəli, belə ki, həyata solğun və sonra üz slid. Və çox daha çox var. Siz canlı funksiyasından istifadə edə bilərsiniz öz animasiyalar yaratmaq, bu, kifayət qədər mürəkkəb lakin bu sonsuz dartılma ilə təmin edir. Siz istədiyiniz animasiya hər cür edə bilərsiniz. Ayrıca zamanda birdən çox animasiyalar qədər növbə növbə istifadə edə bilərsiniz. Belə ki, səhifə üzrə uçmaq üçün bir şey istəyirsinizsə, alt sol üst sağ slide, siz edə bilərsiniz və yalnız bir-birinin ardınca davam tədbirlər bir dəstə var. 

Biz haqqında danışmaq olacaq növbəti şey hadisələr deyil. Hadisələr icazə - bu günə qədər biz yalnız konsol daxil şeylər yazaraq olduğunuz ki, bu baş etmək üçün bir yoldur lakin faktiki səhifə, siz etmək fikrində deyilik konsol daxil Yuzerin tipi şeyi edir. Siz şeyi avtomatik olaraq baş istəyirəm. Bunun üçün, bəzi müəyyən hadisə baş haqqında aktivləşdirmək hadisələr istifadə etmək lazımdır. Siz tam ətraflı məlumat üçün sənədlərin kontrol edə bilərsiniz. Elə görək. Biz qutusu gizlətmək və ya göstərmək istəyirəm Mən hələ onu həyata etməyib, çünki hazırda bu düyməni bir şey deyil. Mən faktiki HTML sayfasına getmək üçün gedirəm. Burada slide var. Slayd bir div var. Bu slayd sinif var. Mətn var. İndi bu qutu və qutusu düyməsini var. Biz həqiqətən bu yox etmək olar? İlk növbədə, ən qutusu ID yox edir bir funksiya yazmaq imkan verir. Bu funtion üçün sintaksis deyil, bu yalnız hideTheBox zəng edək. Alınacaq dəlillər yoxdur, çünki heç bir arqument daşımır. Biz qutusu ID seçə bilərsiniz. Seçin jQuery istifadə edərək, biz qutusu ID seçə bilərsiniz və sonra yalnız yox etmək. Edək ki, həyata fade edir. Biz, faktiki konsolda bu funksiya qaçdı edin biz bu funksiya müəyyən edə bilər, biz hideTheBox zəng edə bilərsiniz, və işləyir. Amma biz düyməsini həqiqətən bərk zaman bu baş istəyirəm. Bunu etmək üçün, biz bir hadisə istifadə etmək lazımdır. Xüsusi 'düyməsinə və ya bəzi hərəkət baş verənlərə bir hadisə lər, biz hadisə tetikleyecek element seçin - və ya üzr, hadisə tetikler. 

Bütün Belə ki, ilk ən qutusu düyməsini ID seçin qoy çünki ki düyməsinə üçün, indi düyməsini var və biz onu tıklayan zamanı bir animasiya yaratmaq istəyirik. Beləliklə, bu klik funksiyası var. Bu ona bir funksiyası lər imkan verir. Bu funksiya bir arqument kimi bir funksiyası edir biz hideTheBox funksiyası keçə bilər və bu düyməsinə tıklandığında zaman ki, funksiyası avtomatik icra edəcək. Beləliklə, bu, biz bu saxlamaq, mən yenilenir olacaq işləyəcək və - bir ikinci, üzgünüm. Məni həqiqətən tez bu düzeltmek edək. OK. Orada biz gedin. Biz düyməsini basın zaman artıq qutusu yoxa. Biz də yalnız fadeToggle bu dəyişə bilərsiniz qutusu gizlətmək və ya göstərmək üçün yalnız dəyişdirmək, biz yenileyin və əgər bu da çox işləyəcək. Biz bunu gizlədə bilərsiniz, biz də onu göstərmək olar ki, bu iş davam edəcək. Biz nə edə başqa bir şey deyil, biz, həqiqətən, bu hideTheBox funksiyası müəyyən yoxdur biz basın funksiyası zəng əvvəl. Belə ki, əvəzinə funksiyası müəyyənləşdirilməsi və hideTheBox zəng, biz yalnız bu şey tıklandığında əgər zəng etmək olacaq. Beləliklə, biz, burada bu anonim müəyyən edə bilərsiniz hansı JavaScript olan bir xüsusiyyətdir. Siz funksiyası müəyyən edə bilər; adətən, biz funksiyası hideTheBox deyərdim dəlilləri ilə, lakin əvəzinə, biz yalnız, arqumentləri heç bir funksiyası demək olar , funksiyası müəyyən etmək buruq brace başlamaq ki, buruq burğu bağlayın və sonra yalnız burada funksiyası müəyyən ilk parantez və son mötərizə daxilində ki, klik funksiyasının arqumentləri uyğundur. Biz bu funksiya keçən edirik Beləliklə, biz burada kodu bu xətti kopyalayabilirsiniz, ki, tam olaraq eyni şey edəcəyik. İndi biz bu təsadüfi fadeTheBox funksiyası yoxdur ki, heç bir aydın səbəb ətrafında oturan olunur. Funksiyası anonim müəyyən edilmişdir, bir adı yoxdur. Biz qutusu düyməsini basın zaman yalnız icra edəcək. Belə ki, sərinləşdirici bir daha, bir dəfə daha, siz hələ də işləyir ki, görürük. Və siz hadisələr yarada bilərsiniz. 

Biz istifadə edə bilərsiniz ki, müxtəlif tədbirlər var. Mən necə bu iş sizə göstərmək üçün konsol istifadə edərək, geri dönmek üçün gedirəm. Bu hər biri üçün şəxsiyyətlərini hər qutusu uyğundur. Bu kutuyu basın ID Yəni, bu əsas ID edir və bu bir siçan ID edir. Daha çox, hər zaman həyata yazaraq; Bir şey daha bu fəaliyyət funksiyası var ki, Mən, həqiqətən, irəli getdi və burada fəaliyyət funksiyası aşağı müəyyən edilmişdir. Bu hideTheBox funksiyası eyni şey yoxdur. Bu qutusu və fades həyata və ya daxil fades ya olur Biz bura onu istifadə edirik Buna görə də var. Biz bu klik ID basın əgər Beləliklə, biz qutusu yox və ya yeniden etmək istəyirəm. Biz son slayd idi ki, düyməsinə kimi eyni şey var. Ki, zəng İndi sonra, biz bu vurun və qutuya yox sonra yenidən basın və qutusu yeniden olacaq. Ki, olduqca sadə. Cüt basın, eyni şey yoxdur başqa bir cüt klik tələb edir. Siz bir dəfə basın və yenidən basın Belə bir şey baş verəcək lakin siz ikiqat tez basın, əgər yox olacaq. Əgər cüt yenidən basın varsa, geri gələcək. Belə ki, olduqca sadə. Keyboard giriş qəribə növ, mən bunu həqiqətən bu nümunə işləyir düşünmürəm çünki aşağı düyməsini düyməsini yuxarı və əsas mətbuat və digər əsas tədbirlər sizə məcburidir nə element olursa olsun aktivləşdirin. Məsələn, mən orqan və ya tamamilə başqa bir şey aşağı düyməsini bağlı, hətta o, hələ heç bir məsələ aktivləşdirmək ki, - bu, xüsusi deyil. Mən bu tıklayarak olmalıdır və heç bir şey yox etmək üçün bir düyməsini basın yoxdur. Bu asılı olmayaraq foruma hazırda Ben Ne element aktiv olacaq Belə ki, bu əslində bu nümunə işləmir çünki klaviatura giriş div daxil daxil olaraq məni tanımır. 

Amma siçan hərəkətləri nəzər salsaq, ilk hover edir və bu, CSS istifadə edərək, bu bəzi edə bilərsiniz. Siz CSS istifadə Əgər bir şey üzərində hover varsa, onu yarada sonra onun stil dəyişir. Amma jQuery istifadə edərək, digər şeylər üslub dəyişə bilərsiniz. Belə ki, məsələn, biz bu div üzərində hover əgər fəaliyyət zəng etmək olacaq. Yəni, biz artıq hover, onda qutusu yox olacaq deməkdir. Biz ondan üz hərəkət varsa, qutusu yeniden olacaq. Biz bu zəng və üzərində hover varsa, qutusu, yox yoxdur və tezliklə biz uzaq hərəkət kimi, geri gəlir. Biz siçan ID bu hover funksiyası zəng edərsə, biz qutusu üzərində hover əgər, sonra bu qutu uyğundur, sonra qutusu həqiqətən yox - bu, hazırda funky olan, lakin oldu - biz ondan üz hərəkət, əgər yeniden olacaq. Hal-hazırda o, nədənsə geri var. Siçan daxil edin və siçan hərəkət funksiyaları bir qədər oxşar, lakin bir qədər fərqlidir. Mouse siçan kimi gözlənilən qutusu, girdiyi zaman yalnız etkinleştirir daxil edin. Siz onu hərəkət əgər Belə ki, yox olacaq. Əgər üz hərəkət Lakin bu yeniden deyil, geri gəlmək üçün üçün üzərinə geri hərəkət etmək lazımdır. Aktivləşdirmək olan siçan hərəkət funksiyası da var siçan qutusuna hətta indiki zaman. Belə ki, yalnız və həyata solması, davam davam edəcəyik. Və faktiki giriş - bu həyata yalnız solması var kimi görünür və əslində, bu, daha çox tədbirlər giriş oldu belə ki, uzaqlaşmaq zaman yalnız onların min kimi daxil çünki davam edəcəyik. Bəlkə min. Bəlkə beş. Bu daha çox açar. Bu baxımdan, bütün siçan hərəkətləri, onların bir çox var. Siz digər olanları üzrə oxuya bilərsiniz, lakin onlar bütün bir qədər fərqlidir sizə lazım hansı bir və ala bilərsiniz xüsusi hansı məqsədlə nə çalışdığınız. 

Mən danışmaq gidiyorum növbəti şey AJAX edir. AJAX, mən bu il çox dərinliyi kimi JavaScript əhatə etməmişdir bilirik mən yalnız bir dəqiqə üçün ümumi AJAX haqqında danışmaq gedirəm. AJAX Asynchronous JavaScript and XML üçün dayanır. Bu, əsasən, misal üçün, Facebook etdiyiniz və zaman, bir bildiriş itme var AJAX web browser çalışan çünki var. Web browser həqiqətən var saniyə hər neçə onlardan xahiş, Facebookun serverlərində gedən, siz, mənim üçün yeni bir şey var və sonra geri gəlir. Bu bir server sorğu göndərmək üçün imkan verir həqiqətən yüklemek üçün olmadan. Belə ki, adətən, yalnız PHP və verilənlər bazası kullanıyorsanız, Siz server yeni məlumat əldə edə bilərsiniz önce səhifə yenilemek üçün var. Amma AJAX istifadə edərək, siz daim yeni məlumat üçün çəkmək olar Bir 'düyməsinə və ya bu kimi bir şey basın zaman və ya bunun üçün çəkin. , Bizə səhifə yeniden olmadan sorğu göndərmək üçün imkan verir belə və biz almaq və ya sorğu POÇT ya istifadə edə bilərsiniz. 

Sorğu sizə əgər Google.com, məsələn, olsun və q = test edin. Ki, onlara bir sorğu test verilməsi oldu. Bu URL özü həmin parametrləri keçən var, çünki bir GET tələbi var. Siz poçt vasitəsilə göndərilməsi əgər kimi POST sorğu edir. Bir məktubda onu qoymaq və onlara off gəmi kimi var lakin onlar həqiqətən məzmunu görmürəm. Onlar URL görünür deyilik. Siz birbaşa yazın bilməz; demək olar ki, gizli göndərmək lazımdır. Bu post var. Ancaq jQuery istifadə edərək, siz almaq və müraciətlər POÇT edə bilərsiniz daha asanlıqla adətən yalnız düz JavaScript istifadə edə bilər çox. Siz sorğu GET istifadə API sorğu edə bilər, və siz də giriş məlumat üçün kontrol edə bilərsiniz. Sonrakı sayfada, mən olan "nahar üçün nedir?" Soruşur, yaratmışdır Harvard qida API istifadə, belə ki, qoparmaq imkan verir. Bu bir API bir GET tələb etmək jQuery istifadə edə bilərsiniz necə yalnız bir nümunəsidir və bu geri məlumat almaq. Beləliklə, biz bu gün üçün menyu görmək istəyirik və biz nahar üçün nə görmək istəyirik. Burada jQuery bir GET sorğu yaratmaq üçün URL. Siz $ istifadə edin. funksiyası almaq. Birinci dəlil siz querying edirik belə dəqiq nə, URL-dir. Sonra növbəti dəlil almaq tələbi tam zaman həyata ki, bir funksiyası var. Belə ki, server bəzi sorğu göndərmək geri gəlmək üçün gözləyin. Geri gelir zaman server geri olan məlumatlar ilə bəzi fəaliyyət etmək olacaq. Nin davam və bu həmçinin kod edək. Mən məqsədilə, ya da bu kodu etməyib. Burada TODO var. İlk növbədə, bu tədbir məcburi istifadə edək Bu düyməni basdı zaman, biz bir GET sorğu göndərmək üçün. Və bəzi məlumatları ilə sorğu qaytarır zaman, biz bu yemək info ID div onu yazmaq olacaq. İlk növbədə, bu qida düyməsini ID seçin bildirin. Bu tıklayan zaman, biz bir şey etmək istəyirəm. Gəlin əvvəl kimi, anonim fuction edir. O buruq aşırma kesmek bilər, və bu düyməni basdı zaman, biz bir GET sorğu göndərmək istəyirəm nahar üçün nə yoxlamaq. Bunu etmək üçün, biz yalnız $ edəbilərsiniz. Almaq. Bu dollar işareti istifadə edərək, jQuery funksiyası var. Bu dəlillər bir neçə edir. Birincisi, 'dir İkinci bir callback funksiyası, deyirlər ki, funksiyası ki, sorğu həqiqətən qaytarır zaman. Ədalətli ilk URL inşa edək. Biz Davuda qədər yazdığı API onu əldə edə bilərsiniz. Burada Going, biz, bu food.cs50.net/api/1.3/menus olduğunu görə bilərsiniz və sonra yalnız istədiyiniz parametrləri adları keçir. Belə ki, Parametre 1 dəyər 1-dir. Bu standart tarix kimi görünür, bu gün tarixi, u mənim başlamaq bir şey, həmçinin bitiş tarixi yetirilməməsi girmezseniz bu gün bir şey daxil yoxdur. Ki, istədiyiniz nə deyil. Biz yalnız bu gün məlumat almaq istəyirəm. 

Biz format JSON olmaq istəyirəm. Yalnız ixtiyari var; siz istədiyiniz hər hansı formada istifadə edə bilərsiniz. Siz CSV istifadə edə bilərsiniz, ancaq JSON JavaScript Obyekt Notation edir. JavaScript nə deməkdir başa düşmək üçün çox asandır və biz daha asan yol onu çap edə bilərsiniz. Elə JSON bu tələb qoy və edək tələbi nahar. = Nahar yemək belə. Məhz URL yazmaq üçün, biz burada geri. Menyular var. Ilk parametri çıxış = JSON edir Çünki biz istəyirik nə var, və bir ilə parametrləri ayırmaq və. İkinci parametr deyil - Yadımda deyil. Yemək. Və biz yemək = nahar istəyirəm. Siz browser onu yazaraq və ona gedən bu URL test edə bilərsiniz. Bu bir çıxış edəcək. Bu, yalnız nahar üçün olan məhsullarının bir dəstə var. Bu çirkin format var. Biz daha yaxşı formatında səhifə üzərinə çap etmək istəyirik. URL doğru Beləliklə, indi yalnız bir funksiyası yazmaq lazımdır sorğu uğurlu zaman geri zəng etmək üçün. Bu funksiya həqiqətən mübahisə edəcək. Bu data olacaq. Məlumat almaq xahişi edilir sonra GET tələbi geri gəlir budur. Biz buruq aşırma edə bilərsiniz; burada biz anonim funksiya yazmaq ki, biz geri məlumat almaq zaman ki, data istifadə edərək, həyata keçirir. Data Belə ki, biz bu URL Yığdığınız zaman, Bu data kimi baxmaq neler edir. Bu böyük simli olacaq. Amma yaxşı bir şey, JavaScript JSON.parse funksiyası istifadə edərək, analiz edə bilərsiniz. Elə parse data adlı yeni bir dəyişən yaratmaq imkan verir. Və parse data obyektlərin bir sıra edir. Hər bir obyekt kimi məlumatlar ehtiva - Yaxşı, Bir nəzər salaq. Bu tarixi, yemək, kateqoriya, resept, bütün bu digər məhsulları var. Belə ki, ədalətli hər biri üçün ad çap edək. Biz bu geri almaq məhsullarının bütün array üzərində təkrarlamaq edək və yalnız hər bir çap - hər birinin adını yazdırın. Bu loop üçün bir. 

JavaScript, bir sıra ərzində dəyişən və loop yarada bu faydalı sintaksis var və var i, əvəzinə var i = 0 nə olan ki, yalnız iterator edir i uzunluğu az, i + +, yalnız ayrıştırılan data i var edə bilərsiniz. Bu nümunədə, ayrıştırılan data (i) cari element üçün uyğun olacaq serialın, faktiki obyekt. Və biz onun adını almaq istəyirəm. Belə ki, yalnız nə adı edək. Və son şey, yenə bəzi jQuery var olacaq edir. Əslində div, hazırda boş ki, bu yemək info div əlavə edin. Elə seçin bildirin. Biz jQuery seçin və yemək info div ID, və ya yemək info ID istifadə edəcəyik, sorry. Biz buna əlavə etmək istəyirəm. Biz test idi, məsələn, yalnız hər bir zaman üzerine olardı. Beləliklə, biz məhz bu əlavə edə bilərsiniz. Serialın cari element, biz onun adını almaq lazımdır və biz yemək info ID div sonunda onu əlavə edəcəyik. Və sonra yalnız, o, təmiz baxmaq üçün bir line bütün deyil buna görə də bir xətt fasilə əlavə edəcəyik. Bütün yaxşı gedir əgər Belə ki, yaxşı olmalıdır - ilk növbədə, bu düyməni tıklandığında zaman, bu URL üçün GET sorğu off göndərir. Məlumatlar ondan geri gəldikdə, onu analiz edəcəyik JSON, veri təmsil edən bütün dizi üzərində loop çevirmək və sonra adı və bir xətt fasilə əlavə əvvəllər boş olan bu yemək info ID hər xətti. Belə ki, bu səhifəyə geri gedir, biz yenileyin bilərsiniz, klik tapmaq - bu iş deyil. Talehsiz var. Ayıklama girer bu Index.html, line 1. Bu maraqlı deyil. Bütün sağ, yaxşı, bunu vaxt sərf daha çox, yalnız gidiyorum mən ki, görülən fayl qoparmaq olan başa versiyası. Mən fərq nə əmin deyiləm, lakin biz yalnız əvəzinə bu qədər aça bilər. Və biz AJAX getmək və bu düzgün işləməlidir. Ki, nahar üçün bu gün nə heç bir xüsusi qaydada, onun ətrafında quotes ilə, belə ki, prettiest deyil. Lakin, açıq-aydın, bir final layihə üçün bunu əgər, siz daha yaxşı baxmaq edəcək. Amma ki, siz GET tələbi necə bir sadə misal var. Biz faktiki kodu baxsaq, mən təxmin edirəm, mən olduqca əminəm hələ olduqca çox eyni. Oh, mən bir simli çevirmək unuttum ki, var. Xeyr, bu, hələ iş deyil. Asılı olmayaraq, burada faktiki başa kod bu kimi baxmaq lazımdır nə üçün, və mən yalnız həyata nə kimi eyni şey yoxdur. 'Düyməsinə basın zaman, JSON avtomatik məlumatların təhlil etmək üçün GET istifadə edir. Bu geri məlumatların edir və bütün array vasitəsilə loops və çap - nahar üçün bu gün nə olursa olsun, onun adı, və hər line sonra xətt fasilə appends. Ki, siz GET funksiyasından istifadə nasıl. 

Siz, həmçinin, zaman yox idi ki, POST istifadə edə bilərsiniz onun üçün bir nümunə qədər yazmaq, ancaq sənədlərə baxmaq olar. Siz jquery.post baxsaq Siz demək olar ki, eyni şey olduğunu görə bilərsiniz. Siz URL var, lakin əvəzinə istifadə parametrləri qəbul - yalnız URL özü üçün simli onlara verilməsi Bu data dəyişən keçməlidirlər ki, lüğət, əsasən bir sıra olduğunu dəyərlər xəritələr parametrləri. Siz ki, keçir və bir POST istifadə edərək, onları göndərir. Və sonra, sonra bir uğur funksiyası ola bilər ki, var məlumatların geri gəldiyi zaman ki, həyata keçirir. Əks halda, bu eyni deyil. Belə POST istifadə edərək, Əgər giriş forması Əgər, misal üçün, POST istifadə edə bilərsiniz siz onu insanların giriş parol bildirin, və həmin parol off göndərmək Sizin geri sonuna script üçün, ki, istifadəçi cari və ya olub-olmadığını bazası yoxlamaq. Siz edə bilərsiniz ki, bütün jQuery istifadə əvəzinə bütün səhifə yenilemek üçün var. Mən əvvəllər siz göstərdi ki, blog həyata bilərsiniz. Biz sonuna portal getmək və daxil varsa, oturumu Iş deyil çıxın. Yaxşı, mənə yalnız yeni pəncərədə onu açmaq bildirin. Burada bir parol və mən təsadüfi bir şey yazın gedirdi. Bu iş deyil, ancaq biz deyil ki bilərsiniz əslində bütün səhifə yenilemek üçün var. Kod, siz baxmaq istəyirsinizsə, Burada bütün mövcud deyil. Kodu Beləliklə, mən bir zaman ötən il yazdı. Buradan izləyə bilərsiniz kimi, biz POST sorğu göndərməklə edirik. Mən geri sonunda login.php adlı bir fayl var Loqin etibarlı əgər yoxlayır. Biz keçid parametrləri eşlenen parol var Hal-hazırda bu giriş qutusuna ki, girdi. Və data geri gəldiyi zaman, biz yoxlayın. Məlumatların yalan, onda biz yanlış parol demək, o, aşağı sürüşdürün və yalnız bundan sonra yox etmək. Əks halda, biz admin səhifə yük. Və bütün bu JSON istifadə edilmişdir. Kodu bir çox xətləri, siz yalnız geri sonuna olan məlumatlara keçə bilər bu doğru olub-olmadığını yoxlamaq, siz düzgün daxil yoxlamaq və əslində düzgün səhifə şəxs yönlendirme, bu cavab və ya onlara daxil imkan və onlar yanlış parol olduğunu izah deyil. Belə ki, jQuery POST istifadə edə bilər necə bir misal var geri sonuna POST sorğu göndərmək üçün kimsə düzgün daxil olsun yoxlanılması. 

Bütün sağ, mən bütün nümunələr, və mən əhatə istəyirdi, bütün heyəti var ki. Bu jQuery nə imkan verir ki, əsas şey: , elementləri seçin DOM manipulyasiya istifadə edərək, onları dəyişdirmək, siz effektləri əlavə edə bilərsiniz, müəyyən hadisələr şeyi aktivləşdirmək və də çox sorunsuz və asan AJAX sorğu yoxdur. Belə ki, gələn və ya izləmək üçün təşəkkür edirik Hər hansı bir sualınız varsa, və, yalnız Mənə bildirin. Bəli? [Tələbə] Geri Sizə göstərdiyim zaman, quotes ildə POST sorğu sonra JSON idi və mən yalnız nə merak ediyorum. >> Bəli, görürəm. Sualına, Məsələn mən yalnız göstərdi idi ki, ətrafında quotes söz JSON var idi - Mən yalnız daha qoparmaq lazımdır - POST funksiyası ətrafında. Mən yalnız göstərmək üçün onu çəkərək alıram. Belə ki, burada bu POST sorğu, və quotes bu JSON var. Bu yalnız biz çıxış olmaq bekliyorsanız nə müəyyən edir. Gözlədiyimiz data növü JSON keçmək Belə ki, əgər , bu, vacib deyil, lakin biz onu qəbul əgər sonra məlumatları avtomatik olaraq JSON as ayrıştırılan olunacaq. Beləliklə, biz, bu barədə JSON parse funksiyası zəng yoxdur yalnız avtomatik olaraq baş lazımdır. Və siz POST üçün sənədlərin nəzər halda, Bu data type dəyişən, server gözlənilən veri tipi var. Yanlış ola bilər ki, bir ağıllı tahmin üçün u mənim belə ki, boş bırakabilirsiniz, lakin bu məlumatların yalnız növü var Əgər bu JSON və ya XML var və ya başqa bir şey olsun, istifadə etdiyiniz kodlaşdırma edir. 

Başqa bir sualınız? Bütün hüquqlar. Başqa bir sualınız varsa, mənə e-poçt çekinmeyin vshekhawat@college.harvard.edu da, və slaydlar və kodu olduqca tezliklə online mövcud olmalıdır. Son layihələr Uğurlar, siz jQuery istifadə ümid edirik. [CS50.TV]