JQuery Chaining Method Kullanımı
Hepinize merhaba dostlarım 😊. Yoğun geçen bir haftanın ardından gelen mutlu ve huzurlu bir pazar günü geldi çattı ve sizlere yeni bir konu daha anlatmak için ve "Bilgi bilgidir yetet ki kap" sözünü hayat felsefesi yapmış kişi olarak tekrar karşınızdayım 😊. Yalnız bu yazımda bir önceki yazım olan "Laravel Migration Oluşturma" (okumayan dostlarım buradan ulaşabilirler) konusunda model konusunu anlatacaktım. Ama sürekli aynı konuda makale yazmak istemediğim için bu yazımda Javascript kategorisinde bir konuyu anlatmak istedim. Hepinizin merak ettiği soruyu seziyorum
Hocam bu yazıda hangi konuyu göreceğiz ki ? Merak etmedik değil doğrusu 😅
şeklinde sorular aklınızda dönüp dolaşıyor 😊. Bu yazımızda dostlarım JQuery Chain Method kullanımını göreceğiz. O halde sözümüzü daha fazla uzatmadan başlayalım 😉
JQuery Chain Method Nedir ?
.png)
Eveeeet dostlarım 😊. Artık konumuza girişimizi yapmış bulunmaktayız. Şimdi hiç kendinizi kasmayın arkanıza yaslanın konuyu anlatıyorum. Chaining methodlara bakacak olduğumuzda dostlarım bizim kodlama kısmında örnek veriyorum bir event yakaladığımızda üzerinde işlem yapacağımız elementi geri döndürerek hızlı bir şekilde üzerinde değişiklik yapmamıza yarıyor. Şimdi siz diyorsunuzdur
E hocam bunu biz ayrı satırlarda da yapıyorduk 😊. Bu yöntem biraz daha pratik geldi
Aynen öyle dostlarım. Özellikle farklı kütüphanelerle çalışacağımız zamanlarda onu incelerseniz geliştiricilerin hemen hemen zincirleme method kullandığını çok rahat bir şekilde görebilirsiniz 😊. Gelin sözü daha fazla uzatmadan biz de 2 adet ufak bir uygulama yapalım. Kemerlerinizi bağladıysanız o zaman uçuşa geçebiliriz 😊
1. Uygulama
Öncelikle dostlarım uygulamamız üzerinde bir adet buton ve bir adet de input olacak. İnput içerisine veri girilmeden butona basılınca alert verecek. Eğer içi dolu ise bunu bir "p" elementinin içerisine aktaracak. Daha sonra da bu elemente belirli özellikler tanımlanacak 😊. O halde sözü daha fazla uzatmadan hemen kodlamaya geçelim. Öncelikle üzerinde çalışacağımız bir index.html dosyası oluşturalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery Chain Method Kullanımı | MFSoftware Blog</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
.paragrafCss{
color: blue;
}
.normalCss{
color: red;
}
</style>
</head>
<body>
<input type="text" class="isScan">
<button type="button" class="isButton">Tıklayıver Çekirgem :)</button>
<p class="myText normalCss">Ne yazdın acaba :)</p>
<script>
$(".isButton").click(function () {
var data = $(".isScan").val();
if (data != ""){
$(".myText").html(data).css("fontsize","50px").slideUp(500).slideDown(500).removeClass("normalCss").addClass("paragrafCss");
}else{
alert("Lütfen input içeriğini boş bırakmayınız");
}
});
</script>
</body>
</html>şeklinde kodlamalarımızı yazdık dostlarım 😊. Input içerisine veri veri girmeden butona basınca ekranımıza "Lütfen input içeriğini boş bırakmayınız" şeklinde yazılar gelecek. Ama yok biz bunun yerine değer girdiğimiz zaman p elementinin içerisi ve rengi değişecek hatta ek olarak yukarı aşağı bir animasyon geçişi olacaktır 😊. Bu uygulamayı anladığımıza göre artık gelelim diğer bir uygulamamıza
2. Uygulama
Bu uygulamamıza bakacak olursak dostlarım bir önceki uygulamamıza nazaran biraz daha basit olacak 😊. İnput içerisine yazdığımız yazıyı bize tersten verecek. O halde sözü daha fazla uzatmadan hemen kodlama kısmına geçişimizi yapalım. Önceki dosyamız index.html idi. Bu dosyamızın adı da index.html2 olsun
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JQuery Chain Method Kullanımı | MFSoftware Blog</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" class="isScan">
<button type="button" class="isButton">Tıklayıver Çekirgem :)</button>
<p class="myText ">Sonuç: <font class="metin"></font></p>
<script>
$(".isButton").click(function () {
var data = $(".isScan").val();
if (data != ""){
var data = data.split("").reverse().join("");
$(".metin").html(data);
}else{
alert("Lütfen boş içerik yazmayın");
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Bu uygulamada ise input kısmına örneğin "MFSoftware Blog" yazdığınızda bunun karşılığı olarak bize "golB erawtfoSFM" olarak ekran çıktısı verecektir 😊. Bütün işlemler bu kadar
Eveeet dostlarım 😊. Bu yazımda sizlere "Jquery Chain Method Kullanımı" konusunu elimden geldiğince, dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Eksik veya hatalı bir anlatım yapmış isem benimle iletişime geçmekten çekinmeyin 😊. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Bu kısımda sizlerden yapmanızı istediğim tek şey "İstikrarlı ve Azimli Olmanız, Bolca Pratik Yapmanız" olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Yazdığımız örnekleri projeler sayfasında sizlere rar olarak vereceğim bunu da belirteyim şimdiden dostlarım 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer