JQuery Notları

Nesneyi Seçmek

$("p")

Nesneleri Seçmek

$("p, a, div.burhan")

Örnek Metot Kullanımı

$("p, a, div.burhan, div#burhan").delay(2000).hide();

Gizleme (Hide) Efekti

$("nesne").hide();$("nesne").hide(2000); // 2sn'de gizle

Css Metodu ile css özelliği atamak

$("p").css("color","red");

Css Metodu ile birden fazla css özelliği atamak

$("div").css({ "background-color" : "#ccc", "color" : "blue"});

attr Metodu ile Nitelik Atamak

$("a").attr("href","https://burhn34.blogspot.com.tr/");

attr Metodu ile birden fazla nitelik atamak

$("img").attr({ "src" : "https://burhn34.blogspot.com.tr/2017/04/java-server-pages.html", "title" : "Burhan ARSLAN - Blog Sayfası"});

Birden Fazla Fonksiyon Oluşturma

$.burhan= {
   
   gonder: function(url){
      alert(url);
   },
   
   deneme: function(){
      alert("deneme");
   }
}

jQuery ile Tıklama Olayı

$("button#tikla").click(function(){
   $("div#burhan").hide(1000);
});

Trim Fonksiyonu Kullanımı

$("button#tikla2").click(function(){
   var deger = $("input[name=deger]").val();
   deger = $.trim(deger);
   if (!deger)
   {
      alert("boş bırakmayın!");
   }
});

Live Metodu Tek Olay Kullanımı

$("button").live("click", function(){
 $(this).after('<button>Banada Tıkla</button>')
});

Live Metodu Birden Fazla Olay Kullanımı

$("p").live({
   click: function(){
      $(this).after('<p>Tıkla</p>');
   },
   mouseover: function(){
      $(this).addClass("deneme");
   },
   mouseout: function(){
      $(this).removeClass("deneme");
   }
});

Append Metodu Kullanımı

$("a").click(function(){
   $("div#burhan").append("<div>Bu yeni div</div>");
});

Index Metodu Kullanımı – Basit Tab Yapısı

$("div.tab:not(:first)").hide();
$("ul li").click(function(){
   var index = $(this).index();
   $("div.tab").hide();
   $("div.tab:eq("+index+")").show();
});

Last Filtresi Kullanımı

$("div:last").css("color","red");

$.getJSON Fonksiyonu Kullanımı

$.getJSON("http://graph.facebook.com/brhn2354", function(veri){
   $("#sonuc").html('<strong>Kullanıcı Adı:</strong> ' + veri.username + ' \
   <strong>Link: </strong> <a href="' + veri.link + '">' + veri.link + '</a>');
});

Each Döngüsü Kullanımı

$("ul").each(function(){
    $("li:last a", this).css("color","green");
});

Remove Metodunun Kullanımı

$("button#btn1").click(function(){
   $("div.div1").remove();
});

Toggle Metodunun Kullanımı

$("button#btn2").click(function(){
   $("div.div2").toggle();
});

slideUp Metodunun Kullanımı

$("button#btn3").click(function(){
   $("div.div3").slideUp();
});

slideDown Metodunun Kullanımı

$("button#btn4").click(function(){
   $("div.div4").slideDown(1000); // 1snde göster
});

slideToggle Metodunun Kullanımı

$("button#btn5").click(function(){
   $("div.div5").slideToggle();
});

Hover Metodunun Kullanımı

$("div.hover").hover(function(){
   $("div.diger").hide();
}, function(){
   $("div.diger").show();
});

Size Metodu Kullanımı

var toplamLi = $("ul li").size();
alert(toplamLi);

fadeOut Metodunun Kullanımı

$("button.b1").click(function() {
   $("div.div1").fadeOut(1000);
});

fadeIn Metodunun Kullanımı

$("button.b2").click(function() {
   $("div.div2").fadeIn();
});

fadeToggle Metodunun Kullanımı

$("button.b3").click(function() {
   $("div.div3").fadeToggle();
});

fadeToggle Metodunun Kullanımı

$("button.b4").click(function() {
   $("div.div4").fadeTo(2000, 0.3);
});

:eq Filtresi Kullanımı

$("ul li:eq(2)").css("background-color","lightgreen");

eq Metodu Kullanımı

$("ul li").eq(4).css("background-color","lightblue");

Animate Metodu Kullanımı

$(".burhan")
.animate({ "width" : "100px",}, 1000)
.animate({ "height" : "100px",}, 1000)
.animate({ "marginLeft" : "300px",}, 2000)
.animate({ "marginTop" : "300px",}, 2000)
.animate({ "marginTop" : 0, "marginLeft" : 0}, 2000)
.animate({ "marginTop" : "300px",}, 2000)
.animate({ "marginTop" : 0, "marginLeft" : "300px"}, 2000)
.animate({ "marginLeft" : 0}, 2000);

parent Metodu Kullanımı

$("button").click(function(){
     $(this).parent().remove();
});

Serialize Metodu Kullanımı

$("button").click(function(e) {   var deger = $("form#form1").serialize();    alert(deger);});

hasClass Metodu Kullanımı

var sonuc = $("div").hasClass("burhan");
if (sonuc){
   alert("burhan divi bulunuyor..");
}

Change Metodu Kullanımı

$("input[name=avatar]").change(function(e) {
   alert("resim seçildi");
});

Html Metodu Kullanımı

$("button.b1").click(function(e) { var deger = $("#div1").html(); alert(deger); });

Text Metodu Kullanımı

$("button.b2").click(function(e) { var deger = $("#div2").text(); alert(deger); });

Val Metodu Kullanımı

$("button.b3").click(function(e) { var deger = $("input[name=deger]").val(); alert(deger); });

addClass Metodu Kullanımı

$("button.b4").click(function(e) { $("#div3").addClass("burhan");});

removeClass Metodu Kullanımı

$("button.b5").click(function(e) { $("#div4").removeClass("burhan");});

toggleClass Metodu Kullanımı

$("button.b6").click(function(e) { $("#div5").toggleClass("burhan");});

toggleClass Metodu Kullanımı

$("button.b7").click(function(e) { $("#div6").prepend("<button>Yeni Buton</button>");});

Focus Metodu Kullanımı

$("input[name=kelime]").focus();

Clone Metodu Kullanımı

var clone = $("#div").clone();
$("#div").after(clone);

Wrap Metodu Kullanımı

$(".deneme").wrap('<div class="burhan"></div>');

// toplam li sayısı
var toplamLi = $("ul#liste li").size();

// sayfa veri sayısı
var veriSayisi = 5;

// Sayfalamayı uygula
$("ul#liste li:gt(" + (veriSayisi - 1) + ")").hide();

// sayfa sayısı bulalım
var sayfaSayisi = Math.round(toplamLi / veriSayisi);

// sayıyı yuvarlayalım
// Sayfa linklerini ekleyelim
for (var i = 1; i <= sayfaSayisi; i++)
{
      $("#sayfalama").append('< a href="javascript:void(0)">' + i + '< /a>');
}

// İlk sayfaya aktif classı ekle
$("#sayfalama a:first").addClass("aktif");

// Sayfalama içindeki a'lardan birine tıklandığında
$("#sayfalama a").live("click", function(){
   // indis değerini al (1 fazlası şeklinde)
   var indis = $(this).index() + 1;
   // toplam gözüken veri sayısını bul
   var gt = veriSayisi * indis;
   // aktif class işlemleri
   $("#sayfalama a").removeClass("aktif");
   $(this).addClass("aktif");
   // listedeki tüm lileri gizle
   $("ul#liste li").hide();
   // for ile toplam gözüken veri sayısı - veriSayisi işlemi yap ve veriSayisi kadarını göster
   for (i = gt - veriSayisi; i < gt; i++)
   {
      $("ul#liste li:eq(" + i + ")").show();
   }
});

Next Metodu Kullanımı

$("input#input").next().hide();

Focusout Metodu Kullanımı

$("input#input").focus(function(){
   if ($(this).val() == 'Sitede Ara..')
   {
   $(this).val('');
   }
}).focusout(function(){
   if ($(this).val() == '')
   {
      $(this).val('Sitede Ara..');
   }
});

Dblclick Metodu Kullanımı

$("div.burhan").dblclick(function(){
   $(this).css("background","yellow");
});

:checked filtresi kullanımı

$("button").click(function(){
   var val = $("input[type=checkbox]:checked").val();
   if (val) alert("işleme devam edebilirsiniz..");
   else alert("kuralları kabul etmeniz gerekiyor!");
});

Width ve Height Metodları Kullanımı

/* Genişlik Değerini Alır */
var width = $("div.deneme").width();
alert(width);

/* Genişlik Değeri Atar */
$("div.deneme").width(500);

/* Yükseklik Değerini Alır */
var height = $("div.deneme").height();
alert(height);

/* Yükseklik Değeri Atar */
$("div.deneme").height(500);

Load Metodu Kullanımı

$("img#resim").load(function(){
   alert("Resim yüklendi!");
});

Error Metodu Kullanımı

$("img").error(function()
{
   $(this).attr("src","https://burhn34.blogspot.com.tr/images/burhan.jpg");});

One Metodu Kullanımı

$("button").one("click", function(){
   $("span").toggle();
});

Submit Metodu Kullanımı

$("#deneme").click(function(){
   $("form").submit(function(){
      var deger = $("input[name=deneme]").val();
      if (deger == '')
      {
         alert("değer boş");
         return false
      }
      return true;
   }).submit();
});

jQuery $.post / $.get Metodları Kullanımı;

Bu metodun yapısı şu şekildedir;

$.post(AJAX_URL, GONDERİLECEK_VERİLER, GELEN_VERİ, VERİ_TİPİ)

Buna göre dolduracak olursak;

$.post("ajax.php", {"isim":"burhan","soyisim":"arslan"},
   function(cevap)
   {
      alert(cevap);
   }
);

Ajax dosyamız ise şu şekilde olacak;

<?php

   $isim = $_POST["isim"];
   $soyisim = $_POST["soyisim"];
   
   echo $isim." ".$soyisim;

Dizi halinde değer göndermek için;

$.post("ajax.php", {"id[]", ["1","2","3","4","5","6"]},
   function(cevap)
   {
      alert(cevap);
   }
);

JSON çıktısı almak isteseydik, 4. parametre olarak (veri tipini) json yapmamız gerekirdi.. Yani;

$.post("ajax.php", {"isim":"burhan","soyisim":"arslan"}, function(cevap) {
   if (cevap.hata) {
      alert(cevap.hata);
   } else {
      alert(cevap.ok);
   }
}, "json");

Buna bağlı olarak ajax.php dosyası ise şöyle olmalıydı;

<?php

   $isim = $_POST["isim"];
   $soyisim = $_POST["soyisim"];
   
   if (!$isim || !$soyisim)
   {
      $array["hata"] = "Boş alan bırakmayın!";
   }
   else
   {
      $array["ok"] = $isim." ".$soyisim;
   }
   
   echo json_encode($array);

$.ajax Metodu Kullanımı;

$.ajax({
   // parametreler gelecek..
});

Girebileceğimiz belli başlı parametreler;
– url = Ajax dosyasının yolu
– type = Gönderim timi (post – get)
– data = Gönderilecek veriler
– dataType = Gelen içeriğin tipi
– success = Ajax isteği başarıyla tamamlanınca çalışır ve verileri alırız.
– error = Bir hata oluştuğunca bu parametre ile yakalayıp işlem yaparız.
– statusCode = Hata kodlarına göre işlem yapmamızı sağlar.
Daha fazlası için: http://api.jquery.com/jQuery.ajax/

Yardımcı Ajax Metodları;
– ajaxSetup() = Değişmeyecek ajax parametrelerini bu yardımcı metodda tanımladığımız taktirde, her ajax isteği için aynı şeyleri yazmamış oluruz..

$.ajaxSetup({
   type: "post",
   url: "ajax.php",
   dataType: "json"
});

– ajaxStart() = Ajax isteği başladığında çalışan metoddur.
– ajaxStop() = Ajax isteği bittiğinde çalışan metoddur.
– ajaxComplete() = Ajax isteği başarılı/başarısız tamamlandığında çalışan metoddur.
– ajaxSuccess() = Ajax isteği başarıyla tamamlandığında çalışan metoddur.
– ajaxError() = Ajax isteğinde hata olduğunda çalışan metoddur.

$("#loader").ajaxStart(function(){
   $(this).fadeIn(); // ajax isteği başlayınca göster
}).ajaxComplete(function(){
   $(this).fadeOut(); // ajax isteği bitince gizle
});

jQuery Stop Metodu Kullanımı

$("div.ac").click(function(){
   $("div.kutu").stop().slideToggle();
});

jQuery :contains Filtresi Kullanımı

$("ul.filtre li:contains('burhan')").css("color","green");

contains filtresi, büyük küçük harfe duyarsız olduğu için pek kullanışlı sayılmaz.. Ancak bunun çözümü basit bir fonksiyon ile hallediliyor, aşağıdaki örnek büyük küçük harfe duyarsız şekilde kullanılabilinir bir filtredir.

$.expr[':'].icontains = function(obj, index, meta, stack){
   return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0;
};

$("ul.filtre li:icontains('burhan')").css("color","green");

jQuery $.isNumeric Fonksiyonu Kullanımı

$("#btn").click(function(){
   var $sayi = $("input[name=sayi]").val();
   if ($.isNumeric($sayi))
   {
      alert("Girdiğiniz Sayı: " + $sayi);
   }
   else
   {
      alert("Bir sayı girmediniz!");
   }
   return false;
});

$.browser Nesnesi (jQuery 1.9 sürümü ile bu metod kalkmıştır.)
Bu nesne tarayıcı tipini ve versiyonunu elde etmemizi sağlar. Mevcut tarayıcı tipleri şunlardır;

– opera
– msie
– safari
– mozilla
– webkit

Örnek bir kullanımı ise şöyledir;

if ($.browser.opera)
{
   alert("Opera tarayıcısı ile giriş yaptınız..");
}

Versiyon öğrenmek için ise örnek kullanım;

alert($.browser.version);

$.contains Fonksiyonu
Bu fonksiyon 2 parametre alır.. Bu paremetrelerde html nesneleri olmalıdır.. İlk nesne içerisinde, 2. nesnenin olup olmadığının kontrolünü yapar.. Örnek bir kullanım;

var sonuc = $.contains($("div#tarayici")[0], $("strong")[0]);
if (sonuc) alert("Nesne bulunuyor!");
else alert("Nesne bulunamadı!");

Burada html nesnesine çevrilmesi için [0] ifadesini seçtiğimiz nesnenin sonuna ekliyoruz.

.resize() Metodu
Bu metod seçilen nesne yeniden boyutlandırıldığında bunu yakalayıp işlem yapmamızı sağlar.. Genelde pencere için kullanılan bir metoddur.. Örnek kullanımı;

$(window).resize(function()
{
   var width = $(this).width();
   var height = $(this).height();
   $("#sonuc").html("<strong>Width: </strong>" + width + "<br /><strong>Height: </strong>" + height);
});

Mevcut penceremiz yeniden boyutlandırıldığında yeni genişlik ve yüksekliğini sonuc divinin içerisinde yazdırmış olduk.

Scroll Metodu Kullanımı;

$(window).scroll(function(){
   $("body").append("Scroll Hareket Etti!");
});

scrollTop Metodu Kullanımı;

var i = 0;
$("button#asagi").click(function(){
   $(window).scrollTop(i += 50)
;})

scrollLeft Metodu Kullanımı;

var i = 0;
$("button#saga").click(function(){
   $(window).scrollLeft(i += 50);
})

.has() Metodu
Seçilen nesne içerisinde, has metoduna geçirilmiş nesnenin olup olmadığını bulmamızı sağlar.. Örneğin div içinde strong nesnesi olup olmadığını kontrol edelim;

if ($("div").has("strong").length){    alert("strong nesnesi bulundu!");}

.children() Metodu
Seçilen nesne içerisinde ki, çocuk nesneleri seçmemizi ve işlem yapmamızı sağlar. Örneğin div içerisindeki tüm çocuk nesneleri seçip renklerini değiştirelim;

$("div").children().css("color","red");

Ya da sadece strong çocuk nesneleri seçip renk değiştirelim;

$("div").children("strong").css("color","blue");

Ya da kaç tane çocuk seçicisi olduğunu öğrenelim;

alert($("div").children().length);

.prev() Metodu
Seçilen nesneden bir önceki nesneyi seçmemizi sağlar. Örneğin div nesnesinden önce hangi nesne varsa onu seçip arkaplan rengini değiştirelim;

$("div").prev().css("background","yellow");

Ya da şöyle bir koşulumuz olsun.. Div nesnesinden hemen önce eğer a nesnesi varsa onu seçip işlem yapalım, a nesnesi değilde başka bir nesne varsa işlem yapmayalım;

$("div").prev("a").css("background","red");