1 00:00:00,260 --> 00:00:01,440 Tamam geri geleceğiz. 2 00:00:01,440 --> 00:00:06,330 Şimdiye dek, J Querrey ile elemanları nasıl seçebileceğimiz ve bunları nasıl manipüle edebileceğimiz hakkında 3 00:00:06,330 --> 00:00:06,810 konuştuk. 4 00:00:06,990 --> 00:00:11,790 Şimdi, J sorgusundaki olayların en büyük eksik parçasını tanıtacağız. 5 00:00:11,850 --> 00:00:13,700 O zaman vanilya J.'ye geri dön. S. Olay dinleyicileri eklediğimizde bir olay dinleyicisi adlı bir yöntem kullandık. 6 00:00:13,740 --> 00:00:17,780 Jay, olaylarla bir ilgisi olan yöntemleri olduğu ortaya çıktı. 7 00:00:18,150 --> 00:00:22,230 Bu yüzden olay bölümünü Jake'de açtım, burada olayları tıklayarak oraya gidebilecek. 8 00:00:22,350 --> 00:00:28,190 Böylece buraya kaydırdığımda kaç tane olduğunu görebilirsiniz. 9 00:00:28,260 --> 00:00:32,720 Coria olay yöntemleri bunlardan bir ton ile birlikte gelen chikor'tur. 10 00:00:32,810 --> 00:00:37,210 Bu yüzden, yapacağım şey, kullanabileceğiniz üç önemli şeyi vurgulamaktır. 11 00:00:37,230 --> 00:00:41,820 Bu üç yöntemin yüzde doksuzu, hızlı tuşa basıyor ve devam ediyor. 12 00:00:41,830 --> 00:00:49,190 Ve ben bu üçünün zamanın yüzde 99'unu kullanabileceğini söyledim. 13 00:00:49,650 --> 00:00:53,010 Aslında buradaki gibidir. 14 00:00:53,160 --> 00:00:55,950 Zamanın yüzde 99'unu kullanabilirsiniz. 15 00:00:55,950 --> 00:00:58,050 Bu yüzden önce tıklamayı ve 16 00:00:58,110 --> 00:01:03,000 tuşa basmayı göstereceğim, ancak asıl amacım yöntemin ne kadar müthiş olduğunu göstermek. 17 00:01:03,030 --> 00:01:04,600 Öyleyse başlayalım. 18 00:01:05,130 --> 00:01:06,450 Jay equerries hızlı yöntemi, 19 00:01:06,450 --> 00:01:12,030 tek bir öğeye veya bir öğe koleksiyonuna nasıl hızlı ve kolay bir şekilde bir tıklama dinleyicisi ekleyebildiğimizdir. 20 00:01:12,030 --> 00:01:14,620 Yani, bu davada iki örneğim var görebilirsiniz. 21 00:01:14,730 --> 00:01:18,210 Bir şey seçiyorum ve ardından bir tıklama ile bir tıklama dinleyicisi ekliyorum. 22 00:01:18,210 --> 00:01:22,070 Bu nedenle, yayınladığımız fikriyle bir şeyler seçiyoruz. 23 00:01:22,290 --> 00:01:26,070 Üzerine tıklayın ve sonra bir geri arama 24 00:01:26,100 --> 00:01:32,490 işlevi göndeririz ve bu geri arama işlevi, gönderme fikriyle bir şey tıklandığında çalıştırılacaktır. 25 00:01:32,490 --> 00:01:34,470 Ve bu bir kimlik olduğu için sayfada yalnızca bir tane var. 26 00:01:34,680 --> 00:01:37,400 Bu yüzden bir öğe tıklandığında bu kod çalıştırılır. 27 00:01:37,530 --> 00:01:40,920 Buraya bir göz atarsanız, 28 00:01:41,340 --> 00:01:46,290 sayfada olabilecek her düğmeyi seçtiğimi görebilirsiniz. 29 00:01:46,290 --> 00:01:46,650 10 düğme olabilir ve hepsine bir tıklama dinleyicisi ekliyorum. 30 00:01:46,650 --> 00:01:51,080 Dolayısıyla, bir düğmenin hızlı olması her zaman birisinin düğmeyi tıklaması için uyarır. 31 00:01:51,120 --> 00:01:55,800 Bu yüzden göstereyim. 32 00:01:55,830 --> 00:01:56,760 Şimdi bir CDN olarak dahil Jay queery ile basit bir HTL sayfası var. 33 00:01:56,750 --> 00:02:03,480 Ve ekleyeceğim, Jay sorgu olaylarını yapalım ve birkaç düğme ekleyeceğim. 34 00:02:03,750 --> 00:02:10,730 Demek istediğim ilk kişi beni düzeltmiyor. 35 00:02:11,370 --> 00:02:15,240 Ve sonra bir sonraki ciddiyetle bana mütalaa edecek. 36 00:02:16,020 --> 00:02:21,230 Ve sonuncusu bunun son uyarı olduğunu söyleyecektir. 37 00:02:21,390 --> 00:02:27,690 Bu yüzden kaydedip tarayıcıda açıp her zaman J'nin yüklü olup olmadığını kontrol edeceğiz. 38 00:02:28,080 --> 00:02:36,300 TAMAM. 39 00:02:38,320 --> 00:02:38,780 İyi görünüyor. 40 00:02:38,850 --> 00:02:40,040 Bu yüzden burada H-1'e hızlı bir dinleyici ekleyerek başlayacağız ve sayfada sadece bir tane var. 41 00:02:40,650 --> 00:02:46,110 Dolayısıyla sadece dolar işaretli ilkini seçmeliyiz. 42 00:02:46,110 --> 00:02:50,170 Yani bir tanesi bize doğru H-1 verir, bu da sadece bir tanesi ve daha sonra kaçıyoruz. 43 00:02:50,680 --> 00:02:55,610 Üzerine tıklamayın ve sonra o H-1'i 44 00:02:55,640 --> 00:03:02,220 tıkladığımızda çalıştırılacak bir geri arama fonksiyonunu iletmek zorundayız. 45 00:03:02,220 --> 00:03:03,670 Ardından, tıklama olay 46 00:03:03,690 --> 00:03:11,010 dinleyicisi kullanıyor ve bu H-1'e bir tıklama dinleyicisi ekliyor ve anonim bir işlevi görebiliriz; bu, 47 00:03:11,010 --> 00:03:18,540 anonim bir işlevi görüyor ancak yeni öğrenciler için biraz daha korkutucu ya da adlandırılmış bir işlev 48 00:03:18,600 --> 00:03:24,120 yazabiliyoruz ayrı olarak alabilir ve daha sonra bu işlevin adını buraya iletebilirsiniz. 49 00:03:24,120 --> 00:03:24,940 Ama dediğim gibi isimsiz işlevler daha yaygın. 50 00:03:25,260 --> 00:03:27,900 Yani yapmak istediğim, her birini doğru şekilde 51 00:03:28,200 --> 00:03:37,080 uyarmak ve buraya girmeyi vereceğim ve şimdi bu H-1'i tıklarsam H-1 bırakma işlemini gördüğümü göreceksin ve bu başka herhangi bir öğede olmaz. 52 00:03:37,130 --> 00:03:42,380 Unutmayın, burada hatırlıyorum çünkü H-1'im ekran boyunca ilerliyor, birinin 53 00:03:42,630 --> 00:03:48,990 boyutunu değiştirmek istersem ancak bir elementi tıkladığımda olur, CSSA'nın sorunu olur. 54 00:03:48,990 --> 00:03:54,990 Şimdi yapmak istediğim, bir öğe koleksiyonuna nasıl hızlı bir dinleyici ekleyebileceğimizi göstermek. 55 00:03:54,990 --> 00:04:00,020 Bu yüzden tüm düğmeleri burada seçeceğim. 56 00:04:00,150 --> 00:04:02,530 tekrar geri aramamızı sağlayabiliriz. 57 00:04:02,640 --> 00:04:12,630 Dolayısıyla bir dolar işareti düğmesi ve ardından tıklamamızı bu şekilde ekledik ve anonim bir işlevi 58 00:04:12,630 --> 00:04:14,050 Ve bu, 59 00:04:14,580 --> 00:04:24,420 herhangi bir düğme tıklandığında çalıştırılacak ve sadece bunun gibi bir uyarı düğmesi tıklatıp girişe basacağız. 60 00:04:24,420 --> 00:04:27,130 Ve şimdi bu düğmelerden herhangi birine tıklarsak düğmeye tıkladım düğmesini tıklattık düğmesini bırak. 61 00:04:27,630 --> 00:04:35,470 Bir düğme koleksiyonuna bir olay dinleyicisi eklemek için vanilya javascript'ini tekrar düşünün. 62 00:04:35,490 --> 00:04:41,150 Tüm sorgu seçici ile hepsini seçmek veya öğeleri etiket adına göre almak zorunda kalacak 63 00:04:41,190 --> 00:04:46,380 ve sonra hepsi için döngü için bir for döngüsü kullanmak zorunda kaldım ve 64 00:04:46,380 --> 00:04:51,240 daha sonra açık olan olay listenerini tek tek eklemek zorunda kaldım kamera ARKASI. 65 00:04:51,240 --> 00:04:54,780 Ancak tek yapmam gereken bu satırı yazmak ve bunun, benim için döngü 66 00:04:54,870 --> 00:04:59,700 sağlayacak olması, etkinlik yapan dinleyicileri tek tek ekleyecek, bu da öğrenme düğmesi tıklatılmaktan çok hayatını kolaylaştırıyor. 67 00:04:59,730 --> 00:05:05,660 Stili değiştirmek için, tıklanan düğmenin arka plan rengini değiştirmek istersem ne olurdu. 68 00:05:05,820 --> 00:05:10,940 Bu yüzden tekrar bir tıklama dinleyicisi eklemek gerekir. 69 00:05:11,430 --> 00:05:13,970 Ben sadece yukarı okum ve uyanık değil. 70 00:05:13,970 --> 00:05:16,780 Yapacağımız, arka plan rengini 71 00:05:17,040 --> 00:05:26,730 değiştirmek ve böylece C-nin arka planı olacak ve onu pembe olacak şekilde değiştireceğiz. 72 00:05:26,730 --> 00:05:30,290 Mesele ne Dotsie CSSA'yı vanilla javascript'le arıyor ve geri çağırıyoruz. 73 00:05:30,450 --> 00:05:36,090 Bunu kullanırız. 74 00:05:36,090 --> 00:05:37,360 Anahtar sözcük bu ve 75 00:05:37,380 --> 00:05:43,530 bu, tıklanan öğeye işaret ediyor ancak NJ sorgusu, yapmamız gereken şeyin işe yaramayacağı, bunun J Querrey sürümünü kullanmaktır. 76 00:05:43,530 --> 00:05:49,720 Bu her zaman biraz kafa karıştırıcı bir fikirdir. 77 00:05:49,950 --> 00:05:53,010 Sanırım Shakeri'nin yaptığı şeyin sade vanilya aldığı 78 00:05:53,010 --> 00:05:58,830 ve Jay sorgusuna kaydedildiği ve büyük J. olduğu anlamına geldiğini hatırlamaya yardımcı olduğunu düşünüyorum. A. G. sarılmak ve ona bazı özel özellikler ve yöntemler verir. 79 00:05:58,830 --> 00:06:03,830 Dolayısıyla, J 80 00:06:03,840 --> 00:06:10,680 sorgusu yöntemi olan CSSA nokta kullanmak istiyorsanız, bir J sorgusu nesnesinde çalıştırdığımızdan emin olmalıyız. 81 00:06:10,950 --> 00:06:12,660 Yani sadece yaşlı bu normal vanilya javascripti. 82 00:06:12,660 --> 00:06:17,560 Dolayısıyla onu saralım ve bunun J sorgu sürümü olduğunu söylemeliyiz. 83 00:06:17,670 --> 00:06:21,440 O halde bunu test edelim. 84 00:06:21,660 --> 00:06:23,190 Buraya girerek vurun 85 00:06:23,370 --> 00:06:30,630 ve şimdi o uyarıya sahip olduğumuz ilk düğmeyi tıklayın çünkü bu ilk tıklama dinleyicisinden asla kurtulmadık. 86 00:06:30,630 --> 00:06:32,460 Ardından, arka plan pembeye dönüşür ve bunu tıkladığım her birine gerçekleşeceğini görebilirsiniz. 87 00:06:32,880 --> 00:06:40,280 Bunun gibi bir şey de yapabiliriz. 88 00:06:40,440 --> 00:06:42,010 Bu yüzden yukarı okuna bastım ve sayfayı sadece pembe hale getirmek yerine yeniliyorum. 89 00:06:42,030 --> 00:06:47,610 Ayrıca bir günlük iptali yapabiliriz ve Walcott'un yetişkin kişisi tıklanan düğmenin metnini günlüğe kaydedebilir. 90 00:06:47,670 --> 00:06:55,540 Yani artı tıkladığınız gibi bir şey olur ve sonra bunu saklamak için bir değişken 91 00:06:55,650 --> 00:07:03,870 yapacağım; böylece değişken metin, bu nokta nokta işareti ile aynı olur ve bu metni oradan 92 00:07:04,560 --> 00:07:14,040 çıkarmak için sadece o kasodaki gibi metin yöntemini kullanmamız yeterlidir değişken adımız olan metni tıkladın ve gir. 93 00:07:14,460 --> 00:07:22,430 Ve şimdi, tıkladığın birini tıklarsam tıklama tıklamıyorsun. 94 00:07:22,920 --> 00:07:27,510 Bu son uyarı. 95 00:07:27,540 --> 00:07:28,890 Ve tıkladın. 96 00:07:29,460 --> 00:07:30,360 Cidden beni tıkınma. 97 00:07:30,420 --> 00:07:31,830 TAMAM. 98 00:07:32,190 --> 00:07:32,640 Gösterileceğim tek şey bu kadar. 99 00:07:32,670 --> 00:07:33,930 Tıklayın. 100 00:07:33,930 --> 00:07:34,650 Özetlemek gerekirse, H-1 için yaptığımız gibi aynı anda bir elemana bir dinleyici ekleyebiliriz. 101 00:07:34,650 --> 00:07:39,520 Veya bunu gerçekten yararlı hale gelen bir koleksiyona yapabiliriz. 102 00:07:39,780 --> 00:07:43,870 Ve son olarak, tıklanan öğeye atıfta bulunmak 103 00:07:43,890 --> 00:07:49,320 istersek, dolar işaretini J kuyruk sarmalayıcı olan J. kullanmamız gerekir. A. G. Vanilla versiyonu. 104 00:07:49,680 --> 00:07:53,670 Evet bu 105 00:07:53,690 --> 00:07:54,480