JQuery’e Giriş
Herkese merhaba, bu yazımda JQuery’den bahsedeceğim. jQuery bir JavaScript kütüphanesi olarak bilinir. 2006 yılına kadar çok fazla karmaşık JavaScript kütüphanesi kullanılıyormuş. John Resig ise jQuery’yi geliştirerek bu JavaScript kütüphanelerini daha sade ve anlaşılır bir hâle getirmiştir. Ardından web kullanıcılarının hizmetine sunmuştur. Birkaç sene içerisinde de jQuery tüm dünyada popüler olmuş.
HTML5 ve CSS3 desteği oldukça fazladır. Sebebi ise 100% uyumlu olması, boyut olarak küçük olması ve çok fonksiyonelli olmasıdır. Bugün birçok web sitesinin neredeyse tamamı JQuery kullanmaktadır. Kullandığı yerlerden kısaca bahsedecek olursam fotoğraf galerilerinde , tab menülerinde ve slaytlarda kullanılır. Nesnelere hareket kazandırarak görselliği ön plana çıkartmak için en kolay yoldur. Css ile yaptığımız statik siteleri, jquery yardımıyla bir adım ileri götürürüz; görsel açıdan zengin animasyonlu bir site haline getiririz.
Jquery’nin site ya da uygulama içerisinde sağladığı yararlar şunlardır;
1-) Nesne seçimlerini ve etkilenmelerini hızlandırır.
2-) Html içinde animasyon yapımını kolaylaştırır.
3-) Css ile birlikte kusursuz çalışır.
Jquery Kullanımı
JQuery kütüphanesini kullanabilmek için iki yöntem mevcuttur. İlk yöntem jQuery kütüphanesini kendi sitesinden indirip çalışma alanına eklemektir. Bunun için aşağıdaki kod satırını web sayfamızda “body” etiketleri arasında kullanmamız yeterli olacaktır.
|
1 2 3 |
<script src="jquery.js"></script> |
İkinci yöntem jQuery kütüphanesini indirmeye gerek kalmadan direkt CDN ile projenize entegre etmektir.
|
1 2 3 |
<script src="https://code.jquery.com/jquery-latest.min.js"</script> |
Bana kalırsa jquery kütüphanesini indirmek daha önemlidir. Çünkü internetsiz bir ortamda da çalışabilir. Ama CDN sadece internet varken çalışır.
Jquery ile Toplama-Çıkarma-Çarpma
Bu yazımda sizlerle beraber jquery kullanıp iki sayının toplamını, çıkarmasını ve çarpmasını gerçekleştireceğiz.
Öncelikle 2 sayı oluşturuyoruz ve bunlara bir “id” veriyoruz. Sonrasında toplama çıkarma ve çarpma adında 3 tane buton oluşturuyoruz.
|
1 2 3 4 5 6 7 8 |
<input type="text" id="s1"> <input type="text" id="s2"> <input type="text" id="sonuc"> <button id="topla">Topla</button> <button id="cikarma">Çıkarma</button> <button id="carpma">Çarpma</button> |
Çalışmamıza ya da projemize jquery kütüphanesini ekliyoruz. Ve javascript dosyamızı ekliyoruz.
|
1 2 3 4 |
<script src="js/jquery-1.11.1.min.js"></script> <script src="js/calisma.js"></script> |
Calisma.js klasöründe dolar sembolü ile jquery tanımlıyoruz ve bir tane anonim bir fonksiyon kullanıyoruz. Daha sonrasında toplama işleminin id’sine toplam adını verdiğim için “#topla” diyoruz. Ve tıklandığında anonim fonksiyon dedikten sonra sayı1 ve sayı2 number yani sayısal veriye çeviriyoruz. Sonrasında sonuç kısmında sayi1 ile sayi2 topluyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $("#topla").on("click",function(){ var sayi1= Number($("#s1").val()); var sayi2= Number($("#s2").val()); $("#sonuc").val(sayi1+sayi2); }); }); |
Aynı işlemi şimdi çıkarma için yapacağız.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $("#cikarma").on("click",function(){ var sayi1= Number($("#s1").val()); var sayi2= Number($("#s2").val()); $("#sonuc").val(sayi1-sayi2); }); }); |
Ve şimdi de çarpma işlemi için yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function() { $("#carpma").on("click",function(){ var sayi1= Number($("#s1").val()); var sayi2= Number($("#s2").val()); $("#sonuc").val(sayi1*sayi2); }); }); |
ve çalışmamız bitmiştir 🙂
Merhaba sayfamda dört tane aynı name e sahip label var . Bu labeller içinde değişik rakamlar mevcut. Bu rakamları sayfanın yüklenme aşamasında ayrı bir label a toplayıp yazdırmak istiyorum. Yardımcı olur musunuz?
İlginç bir konuda ufak bir yardımınıza ihtiyacım var. Mail ile geri dönüş yapma şansınız olur mu?
Rica ederiz
Paylaşım için teşekkürler