Konular

Jquery Kısa Teknikler

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);

 

//3 parent yukarısı
$(this).parent().parent().parent().attr("class")

//parentsler içerisindeki herhangi bir classı seçmek
$(this).parents(".dropdown-menu").attr("class")

 

 

En Yakınlardaki taglardan birini seçmek için

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

 

Text'i DOM Yapsına Çevirip, İçerisinden Tag Arama  

HtmlKod='<iframe width="560" height="315" src="https://www.youtube.com/embed/Ex2hGNEqxks" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
//$(HtmlKod) Text DOM yapısına çevriliyor
Bulunan = $(HtmlKod).filter('iframe');
alert(Bulunan.attr("src"));

 

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");
});

 

 Iframe İçerisindeki bir Tag'ı okumak İçin

Veri = parseInt($("#Sonuclar").contents().find('.TamamlananTaramaNo:last').val());

 

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);
});
 
$("[name='yetki[]']").each(function (index) {

 });
 
 
 
 

each fonksiyonun kullanımı:

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

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

 

Dizi elemanarına aynı özelliği uygulamak, Resimleri ön yüklemek için:  

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();

 

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());

 

$("#Grup").prop("selectedIndex", 0);

 

Select'in Seçili Elemanın Aldığı Değeri Almak

$("#Grup").prop('selectedIndex')

 

iframe Kaynağından Herhangi Tag'a Ulaşmak

$('iframe[name=select_frame]').contents().find('#select_name').val();

 

Bir textareadaki değişikliği duymak için

$('#VideoKod').bind("keyup change focus", function() {
    YoutubeVideoId = URLDegisken("v", $("#VideoKod").val());
    $("#VideoResmi").attr("src", "http://img.youtube.com/vi/" + YoutubeVideoId + "/mqdefault.jpg");
    $("#YoutubeVideoId").val(YoutubeVideoId);
 });

 

Bir TextArea İçeriğinden Belirli Satırları Silmek İçin

var lines = $('textarea').val().split('n');
lines.splice(0, 1);
$('textarea').val(lines.join("n"));

 

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")

 

Elemana Ait Tüm Class'ı Silmek İçin

$("#Aktivasyon" + UyeNo).removeClass();

 

HTML Uzantılı bir Dosyayı  Sayfadaki Bir Elemana Yüklemek İçin

$('#some-menu').load('some-local-path/menu.html');

 

 HTML Uzantılı bir Dosyayı Bir Degiskene Yüklemek İçin

var $div = $('<div>');

$div.load('index.php #somediv', function(){
    // now $(this) contains #somediv
});

 

Yorumunuzu Ekleyin

JQuerye Giriş

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

33,311 Okunma 3 Yorum 07/07/2011 18:40:09 18/02/2014 22:11:40

jQuery ve AJAX işlemleri

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..

28,153 Okunma Henüz yorum yapılmamış 31/10/2012 02:07:16 31/10/2012 02:07:04

Jquery ile Form İşlemleri

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

21,878 Okunma Henüz yorum yapılmamış 26/07/2011 12:12:10 17/10/2016 01:27:42

JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri

19,129 Okunma Henüz yorum yapılmamış 15/01/2014 20:55:49

JQuery Nedir?

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.

18,880 Okunma Henüz yorum yapılmamış 21/06/2011 23:58:55 08/11/2014 23:59:12

JQuery Özellik Şemaları

JQuery tüm özellikleriyle bu şemalarda saklı.

17,920 Okunma Henüz yorum yapılmamış 03/12/2012 02:27:58 03/12/2012 02:30:15

jQuery Ajax File Upload

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.

15,430 Okunma Henüz yorum yapılmamış 03/02/2015 16:45:48 12/06/2015 18:50:46

Yükleniyor...