"Enter"a basıp içeriğe geçin

Pratik JQuery Dersleri 1

Biliyorsunuz günümüzün en populer web manipulasyon aracı jquery.

Her yerde web siteleri için çeşitli eklentiler slider , menu, grid vs. vs. görüyoruz.

Eğer iyi kullanırsanız web siteniz üstünde yapamayacağınız şey yok gibi. Zaten bu nedenle de google cdn hizmetine dahil edildi. Dünyanın en çok kullanılan js dosyası olan jquery.min.js dosyasına doğrudan google cdn hizmetinden erişebilirsiniz.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script> ( hangi versiyonu kullanmak istiyorsanız adres satırındaki 1.10.2 yerine o versiyonu yazabilirsiniz örn. 1.4.0 ya da 2.0.3)

Sitenizde jquery kullanacaksanız dosyayı kendi sunucunuzda tutmaya gerek yok. Dünyanın en hızlı sunucuzu zaten jquery yi size servis etmeye dünden razı. Hatta yakın dönemde google chrome un içinde doğrudan gelebilir. Onu da res://jquery:1.10.2 gibi bir şekilde kullanırsak şaşırmayalım.

 

Gelelim şimdi jquery ile ilgili birkaç pratik bilgiye. Bu bilgiler genel olarak koduna müdahale edemediğiniz durumları dışarıdan yapmaya yarayacaklar. Örneğin bir wordpress siteniz var ve koda karışmadan sayfaya müdahale etmek istiyorsunuz.

Herhangi bir nesneye tıklandığında birşey yaptırmak istiyorsunuz. Mesela logoya tıklandığında sitenin bir önceki sayfaya geri gitmesini istiyorsunuz

$(“.logo”).bind({
click: function() {
javascript:back(-1)
}});

yazarsanız kod içinde class=”logo” geçen yere tıklama özelliği ekler. click fonksiyonunun ne yapacağını da kodun içinde javascript:back(-1) yazarak belirledik. siz tabiyki tıklandığında başka birşey yapmasını da sağlayabilirsiniz.

 

Diğer örneğimiz de formlardaki nesneleri zorunlu hale getirmek

diyelim ki elinizde bir iletişim formu var ve siz cep telefonu zorunlu olsun istiyorsunuz.

<script type=”text/javascript”>
$(document).ready(function() {
$(“#cep_telefonu”).attr(“required”,”required”);
});
</script>

yukarıdaki kod ne yapar. id=”cep_telefonu” yazan form nesnesini zorunlu hale getirir. eğer nesnenizde bir id değeri yoksa class tanımlıysa kodun içindeki “#cep_telefonu” yerini  “.cep_telefonu” şeklinde düzeltirsiniz