Öncelikle Sayfamızın html kısmını yazalım.

  1. <h2>Kitaplar</h2>
  2. <dl>
  3.     <dt>Java ve Yazılım Tasarımı</dt>
  4.     <dd><span class="author">Altuğ B. ALTINTAŞ</span> <span class="price">39 TL</span></dd>
  5.     <dt>Yapay Sinir Ağları</dt>
  6.     <dd><span class="author">Prof.Dr. Ercan ÖZTEMEL</span> <span class="price">17 TL</span></dd>
  7.     <dt>Uygulamalı C Programlama  Dili</dt>
  8.     <dd><span class="author">Bora TUNÇER</span> <span class="price">25 TL</span></dd>
  9. </dl>

Şimdi de html etiketlerimize javascript’in JQuery kütüphanesi ile erişim sağlayalım.

  1. $('span.price').each(function() { //span etiketlerindeki price id'sini yakalıyor
  2. //ve bize bir for döngüsü şeklinde her bir etiketi fonksiyon halinde döndürüyor
  3.     var elm = $(this); //span etiketinin price id'sini elm değişkenine atıyor..
  4.     var price = parseFloat(elm.text()); // veri dönüşümünü pars ediyor
  5.     if (price < 20) { //eğer aldığım price değeri, 20 den küçükse
  6.         elm.addClass('low');  // bu etikete, low sınıfını ekle
  7.     }
  8.     else if (price > 30) { //değilse
  9.         elm.addClass('high');  // high sınıfını ekle
  10.     }
  11. });

Şimdi de CSS kısmını yazalım….

  1. h2 {margin: 5px 10px; font-weight: bold; font-size: 20px}
  2. dl {margin: 5px 10px;}
  3. dt {font-size: 18px}
  4. dd {margin-left: 8px}
  5.  
  6. .author {font-weight: bold}
  7. .price {font-style: italic}
  8. .price.high {color: #ff0000}
  9. .price.low {color: #00ff00}

Bu sayfadaki kodları ve örnekleri, kodcu.com ‘un düzenlediği webiner’den öğrenip, oradaki örnekler ile sizlerle paylaşmaya çalıştım… Eğer video anlatımını görmek istiyorsanız ;
http://www.kodcu.com/2011/10/jquery-webineri-tamamlandi-izleyebilirsiniz/



*** *** KANALIMIZA ABONE OLMAYI UNNUTMAYIN ** ***

*** *** KANALIMIZA ABONE OLMAYI UNNUTMAYIN *** ***