BAZI KÜÇÜK AMA ÖNEMLİ JQUERY ÖZELLİKLERİ

Tutoriallerde genel özellikler verilse de büyük bir projeye girerken aslında bazı önemli noktaların atlandığını ya da çok hızlı geçildiğini anlarız. İşte bu yazı bu tür atlanan ya da hızlıca geçilen ama aynı zamanda önemli olan noktalara değinmek için tarafımdan hazırlandı. Hemen başlayıp madde madde sıralayalım.

Madde-1: Class name white space yani boşluk içeriyorsa selector içinde bu beyaz boşluklar nokta ile gösterilir.
Örnek:

<td class=btn btn-default>

ise bunu seçmek için btn btn arasındaki boşluk yerine nokta getirilerek mesela

$(".btn.btn-default").hide();
şeklinde yazılabilir.

Madde-2: Üzerine tıklanan text parçacığını (textin kendisini) almak için genelde $(this) kullanılsa da bunun işe yaramadığı bazı istisnai durumlarda event.target kullanılabilir:

var ttext=$(event.target).text();

Madde-3: JQUERY ile element seçmek bazen tam bir baş belası olabiliyor örneğin aynı class a sahip <tr> elementlerinden sadece üzerine tıkladığımızı seçmek istiyorsak ve diğerlerini buna dahil etmek istemiyorsak closest kullanmadan bunu yapmak tam bir baş belasıdır:
var trid = $(event.target).closest( "tr" ).attr('id');
ya da id yerine orada yazılı duran değeri almak için: var tdcontent = $( "tr" ).closest( "td" ).text();

Madde-4: Yukarıdaki trid değişkenini herhangi bir div içinde göstermek istiyorsak tırnak işareti olmadan doğrudan yazmalıyız ki string yerine trid için bulduğu değeri bulup div içine yazabilsin:

var trid = $(event.target).closest( "tr" ).attr('id');
$(".ajax-tid").html(trid).show();

Madde-5: <tr id="example"><td id="78">blabla</td></tr> şeklinde iç içe hem tr için hem de td için ayrı ayrı id değeri olduğunu ve kullanıcının tablo satırında herhangi bir yere tıkladığında "blabla" değerini çekmek istediğimizi düşünelim. Bu tür içiçe çift id lerin olduğu durumda idleri # kare koyarak arka arkaya yazarak değeri çekebiliriz:
var tdcontent=$("#example#78").text();

Madde-6: Yukarıdaki örnekte id leri bildiğimiz için işimiz kolaydı peki ya id leri bilmiyorsak ve kullanıcı tıkladığı anda o id leri almak istiyorsak ne yapmalıyız? Mesela tr elementinin example id sine sahipolduğunu bilelim ama bu tr elementi içinde pek çok td elementi olsun ve biz sadece bir tanesinin değerini çekmek isteyelim. Bu durumda kullanıcının hangi değere tıkladığını bulmak için önce tetiklenen olaydaki id değerini değişkene atarız burada bu değişkenin adı trid olsun:
var trid = $(event.target).closest( "tr" ).attr('id'); ve sonra bu değeri yukarıdakine benzer şekilde yerine koyarız:

var tdcontent=$("#example #"+trid).text();

NOT: Kafa karıştırıcı olmasın diye bir hatırlatma yapalım herhangi bir idye sahip div içeriğini almak için kullanacağımız örnek kod:

var id = $("#simple-msg").text(); olur. (div id= "simple-msg") yani başında kare olmalıdır. Bu basit özellik genellikle ilk kez proje yazanlar tarafından "hmm id kare miydi nokta mıydı?" diye birbirine karıştırılır o nedenle hatırlatmakta fayda var.

Madde-7: Diyelim ki yine tr ve td elementlerinin iç içe olduğu bir tablomuz var ve biz sadece üzerine tıklanan td elementinin renginin değişmesini ama bunun dışındaki bütün td elementlerinin renginin aynı kalmasını istiyoruz. Eğer class seçecek olursak aynı class a sahip bütün td elementleri herhangi bir td elementi üzerine tıklandığında boyanacaktır. id leri almak istesek bu kez de tr ve td lerin ayrı ayrı id lerinin olması sebebiyle bunu başarsak bile bizi farklı bir şekilde sınırlama riski bulunacaktır.Bu nedenle en basit çözüm önce bütün td elementlerini olmayan renge boyamak ardından sadece tıklanan "en yakın" yukarıda bahsettiğim "closest" elementin rengini istediğimiz renge boyamak olacaktır:

$(document).on("click", "td", function(e) {
 $("td" ).css('background-color', '');//do not change other td background colors
 $(event.target).closest( "td" ).css('background-color', '#ffb3b3');//change clicked td bg color
 });

Madde-8: POST ile veri göndermek için AJAX fonksyionu olarak şunu kullanmak bile yeterlidir:

$.ajax({
    type: 'POST',
    url: 'edit.php',
    data: {
        'trid': trid,
        'tdclass':tdclass,
        'tdcontent': tdcontent
    },
    success: function(msg){
       // alert('wow' + msg);
        $(".ajax-rsl").html('this.id' +msg);

    }

yukarıdaki kodu biraz daha geliştirerek ajax ile aynı anda farklı iki sayfaya da bilgi gönderip iki ayrı sonuç almanız da mümkündür ya da bu kodu iki defa yazıp bir olayın tetiklenmesine bağlı kılarak da aynı şeyi yapabilirsiniz.

Madde-9: Diyelim ki Ajax ile silme işleminden sonra elementi örneğin 2 saniye içinde kaldırmak için de şu kod yeterli olacaktır:

setTimeout(function(){
  $('#myModalDelete').modal('hide');
$('table#example tr#'+id).remove();

}, 2000);

2000 rakamı 2 saniyeyi gösterir.

Madde-10: Eğer bir sınıfa ait idler içinden yalnız birini seçeceksek sıralama önemli. Bu durumda önce id sonra sınıf belirtmemiz gerekir örneğin "btn btn-default" sınıfına sahip butonlardan 79 id ye sahip butonu seçmek için şu kod yeterli olur:
$("#79.btn.btn-default").hide();

Madde-11: Diyelim bütün butonları kullanıcıdan sakladınız ama tıklanan satırdaki butonu kullanıcıya göstereceksiniz bu satırın id sini yukarıda bahsettiğim şekilde almış olduğunuzu ve bu değişkene trid adını verdiğinizi kabul edelim ve butonun sınıfı da yine "btn btn-default" olsun . Bu durumda şu kodla kullanıcının tıkladığı satırın karşısında sakladığınız butonu kullanıcıya yeniden gösterebilirsiniz:
$('#' + trid+'.btn.btn-default').show();

Madde-12: içinde sözgelimi a b c değişkenlerini içerecek bir klasik uyarı için şu mini kod yeterlidir: alert(a+b+c);

Madde-13: each() fonksiyonunun pek de işe yaramadığı ve kaç defa döngü yapılacağı verisinin php ya da asp.net ten geldiği durumlarda sözgelimi x defa div elementi eklemek için for loop şu şekilde kullanılabilir:

var rowscount= parseInt($( "div.rowscount" ).text()); //phpden gelen veri rowscount divinin içinde olsun
for(var i = 0; i < rowscount/10; i++){ //veriyi for döngüsünün içinde aritmetik işlemden de geçirebilirsiniz
$( ".pagination" ).append( $( "<li><a href='#' id='1'></a></li>" ) );
$( "li" ).append($(i));
}