Konular

EBooklar

Jquery kullanırken yardımcı olacak bir kaç detay...

Jquery Kısa Teknikler

Hedef kodu içeren parent tagı almak için:

$(this).parent().get(0);

veya

$('#myId').closest('table');

Hedef kodun içerisindeki diger tagları bulmak için:

$("#diger_resimler li").bind('click', function(event) {
      alert($(this).find('img')[0].src);
 })

$(this).find('div').eq(0).html()
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );
$(Slider).find("li").css("display", "block");

  

$("#Sorular tr").click(function () {
     $(this).find('input:radio').attr('checked', true);
     $(this).css("background-color", "yellow");
});

 Birden fazla aynı özellikteki elemana erişmek için:

        <script type="text/javascript">
             $(document).ready(function() {
                   $(".kay").eq(0).hide("slow");
                });
        </script>
        <div class="kutular">
            <div class="kay" style="background-color: turquoise; display: block">1</div>
            <div class="kay" style="background-color: fuchsia">2</div>
            <div class="kay" style="background-color: crimson">3</div>
            <div class="kay" style="background-color: aqua">4</div>
        </div>

Birden fazla aynı özellikteki elemana erişmek için  başka bir yöntem :

$('#gezbar9 .orta_ort:eq(' + Index + ')').css('display', 'block');

 

var IDs = [];
       
$("button[id^=Cari]").each(function () {
      IDs.push(this.onclick);
});

each fonksiyonun kullanımı:

  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>

  $('li').each(function(index) {
    alert(index + ': ' + $(this).text());
  });
 

Tablonun her satırına özellik uygulayan farklı bir each

$("tr").not(':first').hover(
        function () {
            $(this).css("background", "yellow");
        },
        function () {
            $(this).css("background", "");
        }
    );

Her elemanı bulup eleman değerini diziye atıp, elemanlara click olayı eklemek için:  

var HarfKutulari  = [];
        $("#HarfKutulari input").each(function(){
           
            HarfKutulari.push($(this).val());
           
            $(this).click(function() {
                HarfiCevabaYaz($(this).val());
            });
        })

 

 Belirli bir CSS özelliğini almak için:

alert($(this).css('display'))

Birden Fazla Parametreli CSS Dizesi Yazmak İçin

$( this ).css({
    "background-color": "yellow",
    "font-weight": "bolder"
});

Form Elemanlarından name'i parca_listesi olan bir select nesnesindeki seçili option metnini, adı parca_ad olan form verisine aktarmak için:

$('[name=parca_ad]').val($('[name=parca_listesi] option:selected').html());

Bir Select içindeki Optionları silmek için

$(Hedef).children().remove();

 

Bir Select Elemanına Optionlar eklemek için

$(Hedef).append(new Option(value['text'], value['val']));

Select Option Elemanı Değerini almak için:

$("#Katagori option:selected").val()

Selectin İlk Elemanını seçmek için:

$("#Katagori").val($("#Katagori option:first").val());

 

Birden fazla radio'dan herhangi biri seçili mi bulmak için:

if(!$("input:radio[name='teslimat_sekli']").is(":checked")) {
      JQMesaj("Teslimat şekli seçmelisiniz");
}

//veya

alert($("input:radio[name='teslimat_sekli']:checked").val());

 

 Bir Resme Ait Klasör Yolunu Almak

var url = $(this).attr("src") // find tab's url
var locarray = url.split("/"); // split url by /
delete locarray[(locarray.length-1)]; // delete the text after the last /
var folder = locarray.join("/"); // rejoin the text
alert(folder);

Sürekli Animasyon

$(document).ready( function() {

        Tekrarla();
});

function Tekrarla() {

        var Parlaklik=$('#ust_bar').css("opacity");
        Parlaklik=Parlaklik>0.5?0.5:1;

        $('#ust_bar').animate({'opacity':Parlaklik}, 1500, 'linear', function() {  Tekrarla(); });

}

Ajax Çağrısı

 function sy(SN, GrupNo){
        var GrupNo=GrupNo;
        $.ajax({
            type: "GET",
            url: "/fotograflar3_aj.php",
            data: { grp: GrupNo, sn: SN },
            dataType: "html",
            success: function (data) {
                $('#grup' + GrupNo).html(data);
                $('a.resim_alani').lightBox();
            }
        }).done(function() {
        });
       
    }

 

$.ajax({
   url: Url,
   type: "GET",
   data: {sn: parseInt(SayfaBilgisi[0]) + 1},
   beforeSend: function () {
       $('#KayarkenYukleniyor').removeClass('hidden');
   },
   complete: function () {
       $('#KayarkenYukleniyor').addClass('hidden');
   },
   success: function (data) {
       $("#KayarkenYukle").append(data);
   },
   error: function () {
        YuklerkenYukleme = false;
   }
});

CSS Pozisyonunu değiştiren Örnek

    $(window).ready(function() {
        $("#logo").mouseover(function(){
            $(this).css({'background-position': '0px -48px'})
        })
        .mouseout(function(){
            $(this).css({'background-position': '0px 2px'})
        });
    });

Bir HTML Nesnesi oluşturmak için

CLOSE = $('<DIV>', {
        style: 'background-position:-35px -501px; width:22px; height:20px; cursor:pointer; float:right; margin:5px 25px 0 0;',
        class: 'genel',
        click: function() { alert("x");}
    }).appendTo(BASLIK);

Bir tablo satırından sonrasına yeni satırlar eklemek için

$("#" + id ).closest( "tr" ).after( ... );

 

$("#bir").after("<tr><td>xx</td></tr>");

 

Belirli bir konuma yeni HTML Nesneleri Eklemek İçin

$('tr#S').after('<tr><td></td><td>' + data + '</td></tr>');

Bir Nesneyi Yok Etmek İçin

$("#div1").remove();

 Bir Nesnenin Altındaki Nesneleri Yok Etmek İçin

$("#div1").empty();

 Ekranın veya Dökümanın Boyutunu almak İçin

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position
 

Herhangi bir HTML elemanın koordinatları

var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );

Bir HTML Elemanı Oluşturmak İçin

$( "<div/>", {
               style : "height:20px;",
               "class": "test",
               text: "Click me!",
               click: function() {
                         $( this ).toggleClass( "test" );
                      }
            }).appendTo( "body" );

Herhangi bir id ye ekranı kaydırmak için

$('html, body').animate({ scrollTop: $("#cse-search-box").offset().top }, 0);

Alt Eleman Sayısını Bulmak:

<div id="ozel">
    <ul>
            <li>29</li>
$("a").click(function(event){
   $("a.active").removeClass("active");
   $(this).addClass("active");
});
            <li>16</li>
            <li>5</li>
            <li>8</li>
            <li>10</li>
            <li>7</li>
    </ul>
</div>

   

$("#ozel li").length;
/*veya */
$("#ozel ul").children().length;
/*veya */
$("#ozel > ul > li").size()
/*veya */
$("#ozel > ul > li").length
/*veya*/
$("div#ozel ul li").length

 Parent Tagı Bulmak

$(this).closest("ul");
$(this).closest("ul").closest("div");

 Children Tagları Bulmak

$(this).children(".tab_icerik")

 Bir Elemanın class'ını Değiştirmek İçin 

$("a").click(function(event){
   $("a.active").removeClass("active");
   $(this).addClass("active");
});

Sayfa Yüklenirken İşlem Yapmak İçin:

$(document).ready(function() {
      //çalıştırılacak kodlar
});

Tıklanan Elemanın Sıra Numarasını Bulmak (Index no)

$("#IcerikNolar li").mouseover(function(){
                   
    Tiklanan=$(this).index();
                   
    $("#Icerikler li").eq(Tiklanan).fadeIn("slow");

});

Sayfanın En Üstüne Yumuşak Gidiş

$("html, body").animate({ scrollTop: 0 }, "slow");

Sayfadan Çıkarken "Emin misiniz" Uyarısı verdirmek

        $(window).on("beforeunload", function() {
            if (!KaydederekCikis) {
                return "Gerçekten sayfadan ayrılmak istiyor musunuz?"
            }
        });

CSS Parametrelerini Bir Fonksiyon Sonucunda Almak

$( "div.example" ).css( "width", function( index ) {
     return index * 50;
});

JQuery Nesnesine Yeni Bir Fonksiyon İlave Etmek İçin

jQuery.fn.center = function(parent, durationLength) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.animate({
        top: ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        left: ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
    }, {duration: durationLength, queue: false});
return this;
}
   

$('#growwer').show("scale",{},3000).center(false, 3000);
 

Toggle Kullanımı

$("p").toggle(
  function(){$("p").css({"color":"red"});},
  function(){$("p").css({"color":"blue"});},
  function(){$("p").css({"color":"green"});
});

 

$('#mydiv').toggleClass('class1 class2');

Bir Tuşu Kitlemek İçin

$('form input').keydown(function(event){
            if(event.keyCode == 13) {
              event.preventDefault();
              Ara();
            }
        });

 

Tuşları Dinlemek İçin

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

 

Tüm Tuş Dinlemelerini İptal Etmek İçin

$(document).unbind('keydown');

 

JSON

complete: function (response) {

    var DonenDegerler = JSON.parse(response.responseText);

    $("input[name=urun_no]").val(DonenDegerler.KayitNo);

}

 

Tarayıcının Mobil Modda Olup Olmadığını Anlamak İçin

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;      
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

 

Bir fonksiyona Bir Başka fonksiyonu Parametre gibi Yollamak İçin  

window.onload = function () {

        var func = function () { // NOTE: no "new"
                alert('1');
                alert('2');
                alert('3');
            }

        LoadHtml(func);

     }
   
    function LoadHtml(funcToExecute) {
        //load some async content
        funcToExecute(); // NOTE: parentheses
    }
}

 

Class'ın Varlığını Kontrol Etmek İçin

$(this).hasClass("dropdown-toggle")

 

 

Yorumunuzu Ekleyin


  • JQuerye Giriş
  • JQuerye Giriş ~ 26,199

    JQuery, Sihirli dolar ($)işağreti ve operasyonlar zinciridir. Aslında Javascript ve CSS bilginiz varsa çok hoşunuza gidebilir.


  • jQuery ve AJAX işlemleri
  • jQuery ve AJAX işlemleri ~ 18,502

    Bu yazıda jQuery kütüphanesi ile AJAX işlemlerinin nasıl yapıldığından bahsedeceğim. Prototype ve MooTools kütüphanelerini de kullanmış biri olarak size söyleyebilirim ki AJAX işlemlerinin en kolay ve esnek bir şekilde jQuery ile yapılabildiğini gördüm. Eminim ki yazının sonunda bu konuda bana hak vereceksiniz, çünkü gerçekten jQuery ile bir AJAX işlemi yapmak çok kolay..



  • Jquery ile Form İşlemleri
  • Jquery ile Form İşlemleri ~ 15,109

    Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.



  • JQuery Nedir?
  • JQuery Nedir? ~ 12,516

    Jquery, javascript ile hep yapmak isteyip, karışık JS programlama dili yüzünden bir türlü yapamadığınız kodlamayı çok kolay ve hızlıca yapmanızı sağlayan javascript kütüphanesidir.Diğer bir güzel yanı da jquery ile yazılan kodun tüm popüler tarayıcılarda sorunsuz çalışmasıdır, sizin kod üzerinde tarayıcı uyumluluğu çalışması yapamanıza gerek yoktur.




  • jQuery Ajax File Upload
  • jQuery Ajax File Upload ~ 7,462

    PHP ile dosya yükleme işlemi yaparken kullanıcılara Upload durumunun hangi aşamada olduğunu yüzdesel olarak veya bir progres bar ile göstermek elbette daha güzel olur.