YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1
BÖLÜM - 3 jquery II. Bölüm Bu bölümde; Jquery II. Bölüm o DOM Okuma ve Yazma o DOM Güncelleme o Stil Güncelleme o Basit Animasyonlar o İleri Animasyonlar ile ilgili konular anlatılacaktır. 2
jquery DOM val() $(selektör).val() HTML elemanının value özelliğini elde etmek veya değiştirmek için kullanılır.
jquery DOM val() devam ÖRNEK 1: İki adet input elemanının değerlerini toplayıp 3. input elemanına yazınız. Girilen iki değerin de sayı olup olmadığı kontrol edilmelidir. 4
jquery DOM val() devam ÖRNEK 1: İki adet input elemanının değerlerini toplayıp 3. input elemanına yazınız. Girilen iki değerin de sayı olup olmadığı kontrol edilmelidir. Typecast: parseint() veya parsefloat() 5
jquery DOM val() devam ÖRNEK 2: İki adet 10 adet giriş olsaydı ne yapardık? Tek tek toplama işlemi mi yapardık? Döngü $("selektör").each(); 6
jquery DOM val() devam ÖRNEK 2: İki adet 10 adet giriş olsaydı ne yapardık? Tek tek toplama işlemi mi yapardık? 7
jquery DOM attr() HTML elemanlarının özelliklerine ulaşmak ve değerlerini değiştirmek için sıkça kullanılan fonksiyonlardan birisi de attr() olup, iki farklı kullanımı vardır: Tek özellik değiştirme: $("selektör").attr("isim", "deger"); Çoklu özellik değiştirme: $("selektör").attr({ "isim1": "deger1", "isim2": "deger2" }); 8
jquery DOM attr() devam ÖRNEK 3: HTML sayfasındaki resim elemanının width ve height özelliklerini aşağıdaki gibi değiştirelim. 9
jquery DOM attr() devam ÖRNEK 3: HTML sayfasındaki resim elemanının width ve height özelliklerini değiştirelim. 10
jquery DOM Güncelleme - Ekleme DOM ekleme komutları aşağıdaki gibidir: $(selektör).append(), elemanın sonuna yeni html ekle $(selektör).prepend(), elemanın başına yeni html ekle $(selektör).after(), elemanın sonrasına yeni html $(selektör).before(), elemanın öncesine yeni html ekle 11
jquery append() ÖRNEK 4: append() komutunu kullanarak soldaki HTML sayfasında sağdaki çıktıyı oluşturun. 12
jquery append() devam ÖRNEK 4: append() komutunu kullanarak soldaki HTML sayfasında sağdaki çıktıyı oluşturun. 13
jquery after() ve before() ÖRNEK 5: after() ve before() komutlarını kullanarak aşağıdaki gibi resmin öncesine ve sonrasına metin ekleyelim. 14
jquery after() ve before() ÖRNEK 5: after() ve before() komutlarını kullanarak aşağıdaki gibi resmin öncesine ve sonrasına metin ekleyelim. 15
jquery DOM Güncelleme - Silme DOM silme komutları aşağıdaki gibidir: $(selektör).remove(), elemanı sil $(selektör).empty(), elemanın çocuklarını sil $(selektör).remove(filtre), belirli elemanlar sil 16
jquery remove() ÖRNEK 6: remove() fonksiyonu kullanarak sınıfı kırmızı olan tüm elemanları silelim. 17
jquery remove() devam ÖRNEK 6: remove() fonksiyonu kullanarak sınıfı kırmızı olan tüm elemanları silelim. 18
jquery Style İşlemleri jquery ile stiller üzerinde aşağıdaki fonksiyonları kullanarak değişiklik yapılabilir: $(selektör).addclass(), elemanlara yeni sınıflar ekle $(selektör).removeclass(), elemanlardan belirli sınıflar sil $(selektör).css(), elemanın stili değiştir 19
jquery Style İşlemleri addclass() ÖRNEK 7: h1, h2 ve p elemanlarına mavi sınıfını, div elemanına önemli sınıfını ekleyen jquery kodunu yazalım. 20
jquery Style İşlemleri addclass() ÖRNEK 7: h1, h2 ve p elemanlarına mavi sınıfını, div elemanına önemli sınıfını ekleyen jquery kodunu yazalım. 21
jquery Style İşlemleri css() ÖRNEK 8: Aşağıdaki örnek HTML sayfasında ilk butona basıldığında ilk paragrafın arka plan rengi sarı yapılacak, ikinci butona basıldığında ise tüm paragrafların arka plan rengi gri olacak ve fontu %200 büyüyecek. Örnek: $("p").css("background-color", "yellow") 22
jquery Style İşlemleri css() ÖRNEK 8: 23
jquery Animasyon $(selektör).hide(hız,callback-fonksiyonu), sakla $(selektör).show(hız,callback-fonksiyonu), göster $(selektör).toggle(hız,callback-fonksiyonu), sakla/göster $(selektör).fadein(hız,callback-fonksiyonu) $(selektör).fadeout(hız,callback-fonksiyonu) $(selektör).fadetoggle(hız,callback-fonksiyonu) $(selektör).slidedown(hız,callback-fonksiyonu) $(selektör).slideup(hız,callback-fonksiyonu) $(selektör).slidetoggle(hız,callback-fonksiyonu) 24
jquery Animasyon (devam ) ÖRNEK 9: jquery nin desteklediği tüm toggle animasyon fonksiyonlarını aşağıdaki gibi bir HTML sayfası üzerinde test edelim. Sayfada 2 tane <p> elemanı bulunmaktadır. 25
jquery Animasyon (devam ) ÖRNEK 9: jquery nin desteklediği tüm toggle animasyon fonksiyonlarını aşağıdaki gibi bir HTML sayfası üzerinde test edelim. Sayfada tane <p> elemanı bulunmaktadır. 26
jquery Animasyon (devam ) ÖRNEK 10: jquery Animasyon ve callback örneği. 27
Yararlanılan Kaynaklar http://www.w3c.org http://www.w3schools.com/jquery Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko 28
İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ drdenizkilinc@gmail.com deniz.kilinc@cbu.edu.tr 29