Kategori: JavaScript

Beşinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery :last Filtresi
– jQuery $.getJSON Fonksiyonu
– jQuery each (döngü) Metodu

Last Filtresi Kullanımı

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

$.getJSON Fonksiyonu Kullanımı

$.getJSON("http://graph.facebook.com/tayfunerbilen", 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");
});

Dördüncü jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Live Metodu
– jQuery Append Metodu
– jQuery Index Metodu

Live Metodu Tek Olay Kullanımı

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

Live Metodu Birden Fazla Olay Kullanımı (jQuery 1.9 versiyonu ile bu metod kaldırılmıştır.)

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

Append Metodu Kullanımı

$("a").click(function(){
	$("div#Erbilen").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();
});

Üçüncü jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Fonksiyon Sınıfı Oluşturma ve Kullanımı
– jQuery Tıklama (Click) Metodu
– jQuery Boşluk Kaldırma (trim) Fonksiyonu

Tek Fonksiyon Oluşturma

$.tekFonksyion = function(){
	alert("Deneme Fonksiyonu");
}

Birden Fazla Fonksiyon Oluşturma

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

jQuery ile Tıklama Olayı

$("button#tikla").click(function(){
	$("div#Erbilen").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!");
	}
});

İkinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery CSS Metodu
– jQuery Nitelik Atama (attr) Metodu
– jQuery Nitelik Silme (removeAttr) Metodu

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","http://www.erbilen.net");

attr Metodu ile birden fazla nitelik atamak

$("img").attr({
   "src" : "http://2.bp.blogspot.com/-S-YSNmbZOXg/UBiGPTnOitI/AAAAAAAAAo8/w2TwQfr6WoQ/s1600/logo.png", "title" : "Erbilen.NET - Kişisel Blog"
});

removeAttr metodu ile nitelik silmek

$("input").removeAttr("disabled");

İlk jQuery dersimizde jQuery ile ilgili aşağıdaki bilgileri öğrendik;
– jQuery ile Nesneleri Seçmek
– Metotları kullanmak
– Gizleme (hide) Efekti

Nesneyi Seçmek

$("p")

Nesneleri Seçmek

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

Örnek Metot Kullanımı

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

Gizleme (Hide) Efekti

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