Merhaba sevgili e-bergi okuyucuları,

Öncelikle uzun bir aradan sonra tekrar ebergide yer almanın harika hissettirdiğini sölemek istiyorum. Bu ay jquery hakkında bir yazı yazmaya karar verdim. Umarım bu yazı, konuyu merak edenler, öğrenmek isteyenler için iyi bir kaynak olur.

Öncelikle jquery’i anlamadan önce javascript’i ve DOM(Document Object Model)’u anlamalıyız. Çünkü bu 2 kavram jquery için olmazsa olmazlardan. Önce DOM’dan başlayalım. DOM dendiğinde aklımıza platformdan ve işletim sisteminden bağımsız bir şekilde çalışan ve içeriği, tasarımı, yapıyı programların veya scriptlerin değiştirmesine olanak tanıyan bir yapı gelmelidir. Javascript ise kullanıcının bilgisayarında çalışan ve DOM yapısını da kullanarak web sitesi üzerinde değişiklikler yapabilen bir script dilidir. Javascriptin en büyük özelliklerinden birisi object-oriented oluşudur.

Şimdi jquery’i anlatmaya başlayabiliriz. Javascriptin yaygınlaşması ile birlikte birçok javascript kütüphaneleri yazıldı ve bu kütüphaneler kullanılarak da gayet başarılı işler yapılmaya başlandı. Geliştiriciler kısa zamanda, az kodla, verimli işler yapmak için jquery framework’u kullanmaya başladılar. Bu yazıda jquery’i öne çıkaran özelliklerine ve birkaç örneğe değineceğim fakat jquery ilginizi çeker ve daha detaylı bilgi almak isterseniz http://jquery.com/ adresinden de bilgi alabilirsiniz.

Öncelikle jquery’i kullanabilmek için onu projemize eklememiz gerekiyor. http://docs.jquery.com/Downloading_jQuery#Download_jQuery adresinden jquery için gerekli olan en güncel javascript dosyasını indirebilirsiniz (sıkıştırılmış ve sıkıştırılmamış olmak üzere 2 sürüm mevcut, eğer kodlarda değişiklik yapmayacaksanız sıkıştırılmış olanı kullanabilirsiniz). Peki projemize ekledik şimdi jquery’i nasıl kullanacağız ? İşte jquery’nin bu kadar çok geliştirici tarafından tercih edilmesindeki en büyük etkenlerden birisi az kodla çok işler yapmak. Mesela oluşturduğunuz web sitesindeki belli bir id’ye sahip tüm içeriğe bir class ataması yapmak istiyorsunuz.

$(‘#id’).addClass(“class”);

İşte bu kadar basit. Şimdi bu kodun syntax’ını inceleyelim. $(‘#id’) , kodun bu kısmı seçim işlemini yapıyor, # ile dökümandaki id’leri, id ile ise seçmek istediğimiz özel id tipini belirliyoruz. addClass() jquery ile birlikte gelen methodlardan bir tanesi ve class ataması yapabilmemizi sağlıyor.

$('#id').click(function() {
  $('#anotherid').toggle("slow"); 
 });

Biraz daha karmaşık gözüken bir kodu inceleyelim şimdi de. Bu sefer click() methodu ile tanışıyoruz, bu method argüman olarak bir fonksiyon alıyor ve seçilmiş olan element’e tıklandığında bu fonksiyonu çalıştırıyor. Bu kodda fonksiyonu kodun içinde tanımlıyoruz ve bu fonksiyon da yine bir başka jquery cümlesi içeriyor. Bu sefer kullandığımız method ise toggle(), bu method ile display özelliği none olan seçilmiş elementleri görünür kılabiliyor, görünür durumda olanları saklayabiliyoruz.

Toggle methodu argüman olarak yapılacak animasyonun hızını alıyor ve bu sayede görsel bakımdan istediğimiz animasyonu istediğimiz hızda ayarlayabiliyoruz.

Şu ana kadar anlattıklarımla sitenizi görsel anlamda çok fazla emek harcamadan süsleyebilir, sitenizin içeriğini dinamik bir hale getirebilirsiniz. Jquery ile ilgili daha fazla şeyler öğrenmek için http://jquery.com/ sitesini gezebilirsiniz. Bu yazıda jquery hakkında başlangıç için yeterli olacak bilgiler vermeye çalıştım, umarım yeterli olmuştur. Jquery’i sıkça kullanmanız dileğiyle..