Jquery Dersleri 1

Jquery Dersleri Serisi 1 (Fonksiyonları Kavramak)

Selamlar, yazıma başlamadan önce bir durumu izah etmem gerekiyor. Bu yazıyı aslında sabah bitirmiştim fakat taslaklara kaydetmiştim. Yayınlamak için girdiğimde nedense silindiğini gördüm. Veritabanı içinden vs. yaptığım araştırmalar sonucunda yazıyı bulamadım ve ikinci defa yazıyorum. (her ders 10 konu olacaktı fakat bugün sadece jsfiddle dosyamdakileri aktaracağım.)

Jquery 1 (Fonksiyonları Kavramak)

Bir önceki konumda bu projeden bahsetmiştim. Ayrıca Jquery ve Javascript gibi konuların açıklamasını basit olarak nasıl kullanıldığını vs öğretmiştim. Şimdi hazırladığım birkaç metodu birinci ders olarak sizlere aktaracağım. Bu konuda bahsedeceğimiz konular;

  • Click Metodu
  • Fonksiyon işlemleri
  • CSS Metodu
  • Attr – Revomeattr Metotları
  • Hide – Show Metotları

(Aslında bu konu daha uzundu ama silindiği için ve bunlar hazır olduğu için günü de yazısız geçirmek istemiyorum şimdilik bunları anlatacağım.)

Öncelikle yazılardaki örnekleri takip etmek için bu sayfadan jsfiddle dosyama ulaşabilirsiniz.
.click(); Metodu: Tıklama yaptırma fonksiyonudur fakat, bir işlevi yerine getirmek için fonksiyon metodunu kullanıyoruz.

Fonksiyon İşlemleri: Örneğin click, hover gibi kullanımı da şöyle olmaktadır.

Şimdi örneklerimizle detaylı olarak açıklayalım.

.css(); Metodu: Nesnelerimize fonksiyonla (veya fonksiyonsuz) CSS özellikleri atar.

Div1 classlı divimize tıklayarak this (bu nesne olarak kullanılır “div1” yazsaydık da aynı anlamda olurdu.) nesnesini yani aynı divin arka plan rengini değiştirdik.

css metodunu süslü parantezler içine alarak, birden fazla özellik ekleyebiliriz.

.attr(); Metodu: Css’den farkını açıklamak biraz zor ama şöyle diyebiliriz. Örneğin nesne özelliklerini cssden değil de direk html koddan değiştiriyorsunuz. Bu durumda attr metodunu kullanmanız gereklidir.

Div2 nesnemize tıklayarak div2’nin içindeki resmin boyutunu 36px yaptık. (Css’den şöyle ayırabiliriz örneğin <a> etiketlerinde href=”jquery.com” özelliği css özelliği değildir. Html özelliğidir. Attr bu gibi özellikleri değiştirmeye yarar.)

.removeAttr(); Metodu: attr ile eklediğimiz özellikleri iptal eder.

Biraz önce div2 içindeki resmimizin boyutuyla oynamıştık. Şimdi duzelt classlı butonumuza basarak bu özelliği de-aktif edeceğiz.

.hide(); Metodu: Hide anlamındaki gibi gizleme işlemleri gerçekleştirir. Animasyonlu gizlemeyi vs. bir sonraki yazımızda göreceğiz.

yoket classlı butonumuza basarak div3’ü gizledik.

.show(); Metodu: Gizlediğimiz veya gizlenen nesneleri tekrar göstermeye yarar.

div3’ümüz gizlenmişti! Fakat şimdi getir classlı butonumuza basarak gizlenen divi geri çağırdık.

Jsfiddle dosyamı buraya da çektim fakat WordPress içinde nedense çalışmadı yine de kalsın 🙂

“Jquery Dersleri Serisi 1 (Fonksiyonları Kavramak)” üzerine 2 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir