Jquery Notları

Giriş

Uzun yıllar önce javascript te hazırlanmış client-side javascript kodlarını hayranlıkla izlemişsinizdir. Tabi o zamanlar javascript te kod yazmanın geliştirme yapmanın da zorluğunu farkettiğinizi tahmin edebiliyorum.

Ta ki jquery gibi javascript kütüphanelerinin ortaya çıkmasına kadar.

Artık web siteleri daha kullanıcı dostu, pratik ve yazılımcı tarafından süratle hazırlanabiliyor.

Ben de bir kaç yıl evvel jquery sevenler kervanına katıldım. Gerçekten beğenilir ve işlevsel siteleri süratle hazırlamak artık mümkün .

Jquery ye başlamak ama nasıl, yardımcı olmak adına bir miktar katkım olsun istiyorum.

Herkese Sevgiler

Faruk Öztaş, İstanbul, 2012, Mayıs

JQuery Öğrenmeye Başlamak

Jquery kütüphanesinden bahsetmiştik : bu kütüphaneyi jquery.com isimli siteden indirebilirsiniz.

Jquery kütüphanesini aşağıdaki linkten de güncel hali ile indirebilirsiniz.

Jquery Library Download

Jquery yi sayfanıza referans olarak eklemek bu işe başlangıç noktanız olacaktır.

Basit Bir Örnek

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Tıklarsan kaybolacağım :)</p>
</body>
</html>

$(document).ready() nedir ?

$(document).ready() Jquery öğrenirken ilk öğrenilmesi gerekenlerin başındadır. Eğer eğer bir tetiklenen event in sayfanızda harekete geçmesini istiyorsanız onu $(document).ready() içersinden çağırmanız gereklidir.

DOM yüklenir yüklenmez $(document).ready() içersindeki her şey yüklenecektir.

JavaScript:

    $(document).ready(function() {
        ....
        // Gerekli eventleri buraya yerleştirin.
....
    });

$(document).ready() nin bir çok avantajı mevcut : En önemlisi de sayfa içersine event kodlarını yerleştirmek zorunda değilsiniz. Bir script dosyası ile ayrı bir dosyada bunları oluşturabilirsiniz. Bu sayede içerik ile kodu ayırabilirsiniz.

Selectors (Seçiciler)

JQuery nin en hayranlık uyandıran kısımlarından biri de Selector formatları : CSS tabanlı selector ler hız, esneklik, pratiklik sağlıyor.

$("*") seçimi ile tablodaki tüm elemanları seçebilirsiniz.

$("p") seçimi ile tüm paragrafları

$(".aclass") seçimi ile "aclass" isimli class özelliğini taşıyan tüm elemanları seçebilirsiniz.

ya da id si "btnGit" olan bir elemanı seçmek isterseniz :

$("#btnGit") ifadesini kullanabilirsiniz.

Not : Seçiciler konusuna daha detaylı bir şekilde döneceğiz.

Seçtik peki sonra ? Jquery basit örnekler...

Jquery ile seçilen elemanlar ile yine jquery kütüphanesinde bulunan komutlar ile işlemler yapabiliriz.

$("#txtBelge").val("Var") , komut ile txtBelge id si olan bir metin kutusuna (textbox) Var metnini yazdırabiliriz.

$(".Kirmizi").css("color","red") , Komutu ile "Kirmizi" sınıfındaki tüm paragrafların kırmızı renkte yazılmasını
sağlayabiliriz.

$("#all").hide() , komutu ile "all" isimli (id) tüm elemanları gizleyebiliriz.

$("input:text").css("font-size","10px"), komutu ile tüm metin kutularının font değerini belirleyebiliriz.

Jquery de kullanılan belli başlı komutlardan bazılarına aşağıda değinelim :

val ; seçili eleman(ların) değerlerini değiştirir/gösterir
$("p.okul").text("Deneme") ; okul sınıfındaki paragrafa Deneme metnini yerleştirir.

css ; seçili elemanlara CSS stil uygular ya da CSS class değiştirir/gösterir.

$("txtAdres").css("color","black") ; txtAdres metin kutusunun rengini siyah olarak değiştirir.

html ; seçili html elemanına html içerik yerleştirir/gösterir
$("p.Italik").html("</br>") ; italik sınıfındaki tüm paragraflara </br> elemanını yerleştirir.

show , seçili elemanı gösterir.

$("p").show() ; tüm paragrafları gösterir.

hide, seçiliş elemanı gizler.

$("p").hide ; tüm paragrafları gizler

JQuery Olaylar (Events)

JQuery Olaylar (Events)

JQuery ile bir html elemanına kolaylıkla bir ya da daha fazla event i hızla yükleyebiliriz.

$('#btnGuncelle').click(function () {
      alert("Güncelleme başladı !");
   });

$('#txtAdres').change(function () {
      alert("Adres değişikliği yapıldı !");
});

$('#txtTelefon').focus(function () {
      alert("Telefon bilgisini şehir kodu ile başında sıfır olmadan giriniz !");
});

Not : JQuery Olaylar (Events) konusuna daha detaylı bir şekilde döneceğiz.