YZM 3215 İleri Web Programlama

Transkript

1 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

2 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

3 jquery DOM val() $(selektör).val() HTML elemanının value özelliğini elde etmek veya değiştirmek için kullanılır.

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. 4

5 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

6 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

7 jquery DOM val() devam ÖRNEK 2: İki adet 10 adet giriş olsaydı ne yapardık? Tek tek toplama işlemi mi yapardık? 7

8 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

9 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

10 jquery DOM attr() devam ÖRNEK 3: HTML sayfasındaki resim elemanının width ve height özelliklerini değiştirelim. 10

11 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

12 jquery append() ÖRNEK 4: append() komutunu kullanarak soldaki HTML sayfasında sağdaki çıktıyı oluşturun. 12

13 jquery append() devam ÖRNEK 4: append() komutunu kullanarak soldaki HTML sayfasında sağdaki çıktıyı oluşturun. 13

14 jquery after() ve before() ÖRNEK 5: after() ve before() komutlarını kullanarak aşağıdaki gibi resmin öncesine ve sonrasına metin ekleyelim. 14

15 jquery after() ve before() ÖRNEK 5: after() ve before() komutlarını kullanarak aşağıdaki gibi resmin öncesine ve sonrasına metin ekleyelim. 15

16 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

17 jquery remove() ÖRNEK 6: remove() fonksiyonu kullanarak sınıfı kırmızı olan tüm elemanları silelim. 17

18 jquery remove() devam ÖRNEK 6: remove() fonksiyonu kullanarak sınıfı kırmızı olan tüm elemanları silelim. 18

19 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

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. 20

21 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

22 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

23 jquery Style İşlemleri css() ÖRNEK 8: 23

24 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

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 2 tane <p> elemanı bulunmaktadır. 25

26 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

27 jquery Animasyon (devam ) ÖRNEK 10: jquery Animasyon ve callback örneği. 27

28 Yararlanılan Kaynaklar Ders Notları, Yrd. Doç. Dr. Yuriy Mishchenko 28

29 İYİ ÇALIŞMALAR Yrd. Doç. Dr. Deniz KILINÇ 29