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


Yükleniyor...
    Yükleniyor...