Nedir bu JQuery?
Javascript’le sayfalarca kod yazmaktan çok mu yoruldunuz.Hatta birnesneyi belirtirken bile çok mu uğraşıyonuz.Bu kadar uğraşmak istemiyorsanız JQuery tam da sizin için.Yani kısacası Javascript’le yazılacak sayfalarca kod yerine 10 satırlık kod yazabilirsiniz.Nasıl Çalışır?
JQuery’yi çalıştırmanız için gereken tek şey JQuery’nin son versiyonuna ait dosyayı indirmek.Buradan indirebilirsiniz.Başlangıç
JQuery’yi indirdik.Şimdi iş zamanı:
Evet yukarıda gördüğünüz gibi.İlk önce JQuery’yi içerdik ,daha sonra kodları yazmak üzere yeni bir javascript aralığı açtık.
Yukarıda bir ready fonksiyonu yazdık yani sayfa yüklendiğinde fonksiyonu.Bu fonksiyonu her zaman yazmanızı öneririm. Çünkü JQuery’nin dörtte üçünü kullanabilmek için bu fonksiyon kullanılmalıdır.Seçiciler(Selectors)
Javascript’te nasıl yapıyorduk bu işi;document.getElementById(”asd”);
ohoo daha çok yazılır böyle.Ama JQuery sağolsun şu şekilde yapabilirsiniz:$(”#asd”)
bu kadar mı?Evet arkadaşlar asd id’sine sahip nesnemizi böyle çağırıyoruz.Ayrıca:$(”.herhangi_bir_class”)
bu da “herhangi_bir_class” class’ına sahip nesnemizin tanımı.JQuery’de CSS
Arkadaşlar JQuery CSS alanında bize o kar büyük bir kolaylık sağlıyor ki.Yine Javascript le karşılaştırma yapalım.Javascript kodu:document.getElementById(”asd”).style.width = “25px”;document.getElementById(”asd”).style.height = “30px”;
JQuery kodu:$(”#asd”).css({“width” : “25px”,“height” : “30px”})
Gördüğünüz gibi yine çok kısa.Ayrıca virgül koyarak istediğiniz kadar css özelliği verebilirsinizNot:Son özellikten sonra virgül koymayınız.Eğer ben tek özellik belirleyeceğim diyorsanız:$(”#asd”).css(”width”,”25px”);
gibi kısa bir kullanımı da mevcut.JQuery’de Başlatıcılar
Bir aralar HTML taglarına onmouseover , onclick , onfocus gibi başlatıcılar yazardık.Bunlarda fonksiyon belirtip olaya göre fonksiyonu başlatırdık.Bana göre bu hem kod sayfamızın düzenini bozar hem de sayfamızın js kodlarında hangi fonksiyonların ne iş yaptığını anlamak için html taglarına bakmamız gerekir.Bunun yerine js sayfamızda yazsak çok daha güzel olur.İşte ready fonksiyonunu burda kullanmamız gerekecek.

gördüğünüz gibi ready fonksiyonunu yazdım ki sayfa yüklendiğinde “bunun üzerine gelindiğinde şunu yap” diyebilelim.Kodun açıklaması şu: “asd” id li nesnenin üzerine gelindiğinde bu nesnenin “margin-left” ini 170px yap.Yukarıda $(this) ibaresini görüyorsunuz.Bu belirteç fonksiyon nesnesini temsil eder.Burda “asd” id’li nesneyi temsil ediyor.Mouseover gibi birçok başlatıcı da mevcut.Bunlar:clickmouseovermouseoutfocusload (body tag’ı için geçerli)dblclickbluryani anlayacağınız html taglarında yazdıklarınızdan “on” u çıkarın ve yazın.Not : submit javascript’te formu gönder komutu olduğu için başlatıcı olarak kullanılamaz.JQuery’de Özel Efektler
Show ve Hide özel efekti
Evet.Şimdi javascript’in kısaltılmışı diyoruz.Bunun yanında hazır kalıplarıyla da meşurdur JQuery.Bunlara örnek olarak özel efektler verilebilir.

Yukarıdaki kodu açıklayalım.”asd” id li nesneye tıkladığımızda normal hızla show efektini gerçekleştirir.”asdasd” id li nesneye tıkladığımızda 1000 milisaniyede(1 sn) hide özel efektini gerçekleştirir.Buna benzer toggle vb. gibi özel efektler de mevcut.Daha fazla özel efekt için JQuery sitesine bakabilirsiniz.JQuery’de animate fonksiyonu
show,hide birer animasyon fonksiyonudur.Fakat bunlarda yapılan hareketlere biz karışmadık.Fakat animate fonksiyonu ile yapılan hareketleri bunların kaç saniyede yapıldığını biz ayarlayabiliriz.Bunun için css kullanacağız.İlk önce aşağıdaki kodları inceleyen:

Evet şimdi bu kodları açıklayalım."asd" id’sine sahip olan nesneyi tıkladığımızda "asd" id’li nesneyi animate fonksiyonu ile 3000 milisaniyede şu durumlara sok:_Genişliğini 200px_Yüksekliğini 300px_Sola uzaklığını 500px olarak ayarla.Bunu yaparken hepsini orantılı biçimde yap.Yani bu bize nesnenin bir animasyon gibi hareket etmesini sağlar.3000 milisaniye cinsindendir yani 3sn.Nesne 3sn.de hareketini tamamlar.Bunun yerine "slow" ya da "fast" yazabilirsiniz.JQuery nin en sevdiğim özelliği de budur zaten.Javascript olsa bir döngü yazacaksın, zamanlayıcı koyacaksın,her bir özelliği ayrı ayrı döngülere sokacaksın...Ohoo daha çok kod yazılır.Ama JQuery 2-3 satır kod.addClass ve removeClass
JQuery CSS alanında birçok kolaylıklar sunmakta bunlardan biri de nesneye class verme özelliğimizdir.