Bu yazımızda jQuery’de zincirleme işlemlerinin (jQuery chaining) nasıl yapıldığını anlatacağım. jQuery’in zincirleme işlemlere olanak sağlamasıyla bir Html öğesine birden fazla jQuery fonksiyonunu uygulayabiliriz.
Şimdi zincirleme işlemleri nasıl yapabileceğimize bakalım.
jQuery’de Zincirleme İşlemler (jQuery Chaining)
⇒ İlk olarak üzerinde işlem yapacağımız Html öğesini seçmemiz gerekiyor.
jQuery’de seçiciler ile ilgili eksikleriniz varsa jQuery Seçiciler Nasıl Kullanılır? yazımı okuyabilirsiniz.
⇒ Html öğesini seçtikten sonra uygulamak istediğimiz fonksiyonları, aralarına nokta (.) koyarak arka arkaya yazıyoruz.
Peki zincirleme işlemlerini kullanmanın bir avantajı var mıdır? Varsa nedir?
Normalde uygulamak istediğimiz herbir fonksiyon için tekrar tekrar ilgili Html öğesini seçmemiz gerekecekti. Fakat uygulamak istediğimiz fonksiyonları zincirleme yöntemiyle uygularsak ilgili Html öğesini bir defa seçmiş olacağız.
Konunun daha iyi anlaşılabilmesi için uygulamamıza geçelim.
⇒ İlk olarak 1 button etiketi ve 1 div etiketi tanımlayalım.
⇒ Butona tıklandığında div etiketine sırasıyla şu fonksiyonları uygulayalım:
- animate()
- fadeOut()
- fadeIn()
- animate()
Html Kodları
|
1 2 3 4 5 |
<button id="chaining">Click</button> <div id="box">Hello World</div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
button { padding: 12px; margin-bottom: 15px; background-color: tomato; color: white; border: none; width: 200px; font-size: 22px; } #box { width: 200px; height: 180px; background-color: blueviolet; color: #fff; font-size: 22px; text-align: center; line-height: 180px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> $(document).ready(function() { $("#chaining").click(function() { $("#box") .animate({ width:'100%', fontSize:'80px', }) .fadeOut(2000) .fadeIn(2000) .animate({ width:'200px', fontSize:'22px' }); }); }); |
Kodlarınızı yazarken bu şekilde fonksiyonların aralarına nokta (.) koyarak dilediğiniz kadar fonksiyonu uygulayabilirsiniz.
Uygulamamızın son hali aşağıdaki gibi olacaktır. Click butonuna tıkladığınızda yazmış olduğumuz fonksiyonların arka arkaya uygulandığını görebilirsiniz.
Umarım “jQuery Zincirleme İşlemler (jQuery Chaining)” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery Callback Fonksiyonu Nedir? Nasıl Kullanılır?
Yeni bir yazımda görüşmek üzere.
){kind=link}