Bahsettiğimiz gibi, jQuery bir "seç ve yap" kitaplığı olarak düşünülebilir. Biraz seçim yapmaktan bahsettik, şimdi bazı şeyler hakkında konuşalım. Bu modelin temelde şuna benzediğini unutmayın:
// Select something! $(".something") // Do something! .hide();Daha teorik örneklerle çalışmak yerine, doğrudan gerçek hayattan bir şeye geçiyoruz. Bu Kalemi Drew Barontini tarafından bulduk ve çatalladık.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Kalem Kredi Kartı Formuna bakın
Örneğimizde, kredi kartı formunu varsayılan olarak gizledik. Ardından, kredi kartı formunu yukarı kaydırıp aşağı kaydırmak için tıklayabileceğiniz bir bağlantı oluşturduk. Biz seçmek , sonra bağlantıyı yapmak form üzerinde bir slideToggle. Seç ve yap!
Henüz olaylar hakkında pek konuşmadık, ancak bu jQuery'nin büyük bir parçası. Bir olay, fare tıklamaları, tuşlara basma, kaydırmalar vb. Gibi bir şeydir. "Seç ve yap" ın "yap" kısmı genellikle bir olaydan sonra olur. Merak etmeyin, bu seri bitmeden önce olaylar hakkında çok konuşacağız. Şimdilik, jQuery'deki olayları bağlamanın en iyi / standart yolunun on () olduğunu bilin. "Bu öğe veya öğe kümesi üzerinde bu olayı izleyin" anlamına gelen Bind.
Temel plan:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));Örneğimizde, bağlantı tam anlamıyla bir bağlantıydı.
geçiş yapmak
Karma bağlantıların varsayılan olarak herhangi bir tarayıcıda çalışma şekli, pencerenin karma bağlantıyla eşleşen kimliğe sahip öğeye kaydırılmasıdır. Bazen bu iyidir. Bu bağlantı ile bu öğe arasında anlamsal bir bağlantı oluşturmasını seviyorum. Dolayısıyla, herhangi bir JavaScript olmadan, bağlantı yine de esasen anlamlıdır (özellikle ona akıllıca bir başlık koyarsanız).
Ancak bazen, bu hash link jumping davranışı bir serseri olabilir. ÖnlemeDefault kullanarak JavaScript'te bunu engelleyebiliriz. Böyle:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Bunun hakkında daha fazla konuşacağız.
Elbette, jQuery'nin kendi dokümantasyonu, jQuery'nin (yöntemler) tüm "yap" yönleri için harika bir kaynaktır.
Bence bu "seç ve yap" ve olayların çok temel anlayışının JavaScript'te gerçekten bir anlayış dünyası açtığını düşünüyorum. Benim için yaptığını biliyorum. Bu ekran video kaydının sonunda, CSS Hilelerinin mevcut tasarımına bir göz atıyoruz ve bazı tıklama olaylarına tepki vermek ve kullanıcı arayüzünü değiştirmek için JavaScript'in açıkça kullanıldığını görüyoruz. Önceki demoda yaptığımıza çok benzer şeyler. Örneğin, tıkladığınız şeyler için aşağıdaki gibi aktif bir sınıf belirlemek:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen d6f7161a5931397b4f24195a315d52f3'e bakın