Efenim yıllar yıllar önce basit bir kaç tag ile sadece yazılı bişeyler yayınlayıp paylaştığımız web ortamı artık gelişen ve yenilenen teknolojilerle gözlerimize de hitap etmekte. Çok değil 2-3 sene öncesine kadar web de kımıl kımıl oynayan bişeyler yapabilmek için tek alternatifimiz o zamanlar macromedia nın elinde olan Flash iken bu gün sadece basit bir js kütüphane dosyasını sitelelerimize ekleyerek istediğimiz efekti anında uygulayabiliyoruz. Bunun yanısıra- Boyut (En basit flash animasyonu 500kb yer tutarken en baba js kütüphanesi maksimum 100kb yer tutmaktadır)- Hız (E büyük başın büyük derdi olur a istinaden büyük boyutun hızı da göstergede büyük olur ayrıca flash da compress imkanıda yok ne export ederse onu kullanırsınız)- Kullanışlılık (Flash animasyon yaparken hem action script bilgisi hemde hayalgücü ve el becerisine ihtiyacınız varken js kütüphanelerinde sadece js dilini bilerek istediğiniz her türlü animasyonu yapabilirsiniz)- Seo (Google flash animasyonları görmez spiderlarının pekde umrunda olmazsınız ama js kütüphanelerini görür ayrıca SEO ile uğraşmazsınız (Not içine not: Flash da xml ile taklalar da atabilirsiniz o ayrı))gibi nedenlerden dolayı js kütüphanelerini tercih etmekteyiz. E makaleyi yazanın at koşturabilme izni olduğundan dolayı ben jquery kütüphanesini tavsiye etmekteyim peki sebep ?. Öncelikle kolaydır , yardım çabuk ve hızlı bulunur ve zevklidir.Peki buraya kadar anlaşıldı da benim sitede jquery kullanmama rağmen niye bu kadar yavaş çalışıyor diyorsanız bu makale tam size göre. Şimdi maddeler halinde neler yapmamız gerektiğine bi göz atalım1-) Seçimlerinizi #id ile yapınJquery de ($(‘#id’)). gibi bir id kullanımı class kullanımından çok daha hızlıdır. E javascript kütüphanelerinin aslında süslenmiş js kod parçacıkları olduğunu da bilerekten aslında yaptığımız işin DOM karşılığıda getElementById() budur unutmayın web de gördüğünüz herşey aslında DOM dur e oda başka bi yazıya inşallah.Bir örnek ile konuyu taçlandıralım

Traffic Light

  • Red
  • Yellow
  • Green


Efenim şu tip bir kod bloğunda trafic butonunu ne olduğun seçtirmek için şu tip bir kullanım yanlış olacaktır.var traffic_button = $(‘#content .button’);
Bunun yerine direk lekeye nufuz ederek şunu kullanmalısınızvar traffic_button = $(‘#traffic_button’);
Peki CeRBeR aynı id içerisinde çoklu seçim nasıl yaptıracaz diye soranlara ekvar traffic_lights = $(‘#traffic_light input’);
2-)Seçicilerden önce tag kullanmayınÖrnekle şey edelimvar content = $(‘div#content’);
Efenim burdaki yanlışlık öncelikle sayfadaki tüm divleri seçtikten sonra içlerinden content etiketli div i seçmekte bu da bize zaman kaybettirmektedir halbukivar traffic_light = $(‘#content #traffic_light’);
tipi bir seçim bize zamandan çok büyük tasarruf ettirecektir3-)Nesneleri bi kere seçtirinYine örnekle açıklayalım$(‘#traffic_light input.on).bind(‘click’, function(){…});$(‘#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);$(‘#traffic_light input.on).css(‘background-color’, ‘orange’);$(‘#traffic_light input.on).fadeIn(‘slow’);
Efendim görüldüğü üzere ha bire aynı şeyi seçtirerek bol bol zaman harcamışız fakat şu tip bir kullanımlavar $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…});$active_light.css(‘border’, ‘3px dashed yellow’);$active_light.css(‘background-color’, ‘orange’);$active_light.fadeIn(‘slow’);
$active_light değişkenine sadece bi kere seçicinin değerini vererek tekrar tekrar seçtirmekten kurtulmuş oluruz.Tabi bu maddeyi istediğimiz gibi genişletebiliriz örneğinvar $traffic_light = $(‘#traffic_light’),$active_light = $traffic_light.find(‘input.on’),$inactive_lights = $traffic_light.find(‘input.off’);
$traffic_light değişkenimiz şekilde görüşdüğü gibi sadece bir kere seçtirilmekte sonra etki ettiği alandaki elemanlara find komutu ile odaklanabilmekteyiz Detaylı bilgiyi http://docs.jquery.com/Traversing/find dende alabilirsinizMakalenin birinci bölümünü burada kesmeyi uygun görmekteyim üstünüze afiyet biraz nezle olmuşum da nane limon felan yapayım biraz iyileşirsem geri kalan yerlerinide yazacağıma söz veriyorumOlmazsa olmaz not : Kod kısımlarını buradan arakladım kendimde yazardım ama malum hastayım 🙂