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

 

Select Option Değerine Göre Select Indexi Ayarlamak
$('#element option[value="aranan"]').attr("selected", "selected");
 
 
 
 
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());

 

Checkbox Seçimini Tersine Çevirmek İçin
$('#toggleButton').click(function() {
    // Checkbox durumunu tersine çevir
    $('#myCheckbox').prop('checked', function(i, val) {
        return !val; // Mevcut durumu tersine çevir
    });
});

 

 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üklendikten Sonra İş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
});

 

21,762 Okunma Henüz yorum yapılmamış 18/08/2018 13:33:35 21/10/2024 05:10:14

Yorumunuzu Ekleyin
Görsel Liste


JQuerye Giriş

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

34,116 okuma, 18/02/2014

JQuerye Giriş
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..

29,290 okuma, 31/10/2012

jQuery ve AJAX işlemleri
Jquery ve PHP Kullanarak Ajax ile Dinamik Select Örneği Oluşturmak

Bir select kutusu içerisindeki optionları ajax ile alıp yüklemek için yapmamız gerekenler.

23,259 okuma, 19/10/2024

Jquery ve PHP Kullanarak Ajax ile Dinamik Select Örneği Oluşturmak
Jquery ile Form İşlemleri

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

22,664 okuma, 17/10/2016

Jquery ile Form İşlemleri
jQuery ile Otomatik Tamamlayıcı

Uygulamada jQuery(Ajax), PHP ve MySQL kullanacağız.

20,370 okuma,

jQuery ile Otomatik Tamamlayıcı
JQuery Olayları (Events)

Bir nesenin tetiklenmesini sağlayan olay çeşitleri

19,863 okuma,

JQuery Olayları (Events)
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.

19,657 okuma, 08/11/2014

JQuery Nedir?
JQuery Özellik Şemaları

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

18,585 okuma, 03/12/2012

JQuery Özellik Şemaları
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.

16,324 okuma, 12/06/2015

jQuery Ajax File Upload
Control HTML5 Audio With Jquery

3,515 okuma, 31/12/2018

Control HTML5 Audio With Jquery
Jquery Object Yapısındaki Verilere Göre Form Valulerini Atamak

jQuery kullanarak bir formdaki alanlara, bir JavaScript nesnesindeki verilere göre değer atamak oldukça kolaydır. Nesnedeki verileri, formdaki ilgili input, select, textarea gibi alanlara eşleştirip atayabilirsiniz.

235 okuma, 21/10/2024

Jquery Object Yapısındaki Verilere Göre Form Valulerini Atamak
Yükleniyor...
Yükleniyor...