Jquery ipuçları

jQuery’i artık neredeyse her projemde kullanıyorum. Aklıma gelen ve not aldığım ipuçlarını burada yazdım. Sizinde aklınıza gelen olursa yorum kısmında katkıda bulunabilirsiniz. Ayrıca kaynaklar kısmındaki linklerde de daha fazlası var

1- jQuery kütüphanemizi Google’da host etmek: google bize jQuery kütüphanesini kendi hostu üzerinden yüklememizi sağlıyor. Bu bize ön belleğe alınana dosyanın daha hızlı yüklenmesini sağlar.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
	//isler burada
 });
</script>

Bu sayede jquery kütüphanesini her projeye eklerken kopyala yapıştır ile de uğraşmak zorunda kalmıyoruz. İstediğimiz her yerde jQuery kullanma imkanıda veriyor bize bu kod.

2- jquery kısaltması: jquery kodlarımzı yazarken bazen 

$(document).ready(function (){});

aklımıza gelmeye bilir

$(function (){});

bu daha kolay ve akılda kalıcı bence

3- fare üzerinde iken ve üzerinden gittiğinde

$("li").hover(
function () {
  // fare üzerinde iken bunu yap
},
function () {
  // fare kaçınca bunu yap
}
);

4- not seçicisi: Bir seri elemana yaptırdığımız bir işi aradan bir tane elemanın yapmasını istiyorsak bu seçiciyi uygulayabiliriz.

$('ul#sekme li a').not("ul li#diger a").click(function(){
    // yapılacak işler
});

Yukarıdaki kodlamada biz sekmelere bir tanım yapıyoruz ama en son sekmeye tıklayınca bu işlemin yapılmasını istemiyoruz. Bu iş için biçilmiş kaftan :not seçicisi

5- siblings seçicisi liste ve benzeri aynı seviyedeki elemanlar üzerinde etkileşimli erişim sağlayan güzel bir seçici. Daha önce http://www.fatihhayrioglu.com/jquery-ile-basit-sekme-yapimi/ anlatırken kullanmıştım.

$(this).parent('li').addClass('sekmeSecili').siblings().removeClass('sekmeSecili');

Bu kodda da görüldüğü gibi tıklanan sekmeye sekmeSecili sınıfı atıyoruz diğer sekmelerde aynı sınıf varsa onları kaldırıyoruz.

6- HTML içine jQuery den eleman eklemek:

var ekleBunu = $('<div></div>');
ekleBunu.attr("id","yeniKatman").appendTo("body");

7- Bir elemanın varlığını kontrol etmek

if ($("#someDiv").length) {
  // eğer varsa bunu yap
}

8- Kolay kullanılan tarayıcıyı yakalama

$.browser.safari
$.browser.msie
$.browser.mozilla

tarayıcı sürümünü yakalamak için

if ($.browser.msie && $.browser.version <= 7 ) 

Kaynaklar

• http://www.ajaxlines.com/ajax/stuff/article/_reasons_why_you_should_let_google_host_jquery_for_you.php
• http://stackoverflow.com/questions/182630/jquery-tips-and-tricks
• http://docs.jquery.com/Events/hover
• http://docs.jquery.com/Selectors/not
• http://jquery-tr.blogspot.com/search/label/tips

İlgili Yazılar:

• jQuery ile Basit Sekme Yapımı
• jQuery ve mootools birlikte kullanmak
• Lightbox seçimi