Kategori: jQuery

7. Gün – jQuery Dersi 7

Yedinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery hover Metodu
– jQuery size – length Metodu
– jQuery fade Metodları
     * fadeOut
     * fadeIn
     * fadeTo
     * fadeToggle

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

6. Gün – jQuery Dersi 6

Altıncı jQuery Dersimizde aşağıdakileri öğrendik;
– jQuery remove Metodu
– jQuery toggle Metodu
– jQuery slide Metodları
     * slideUp
     * slideDown
     * slideToggle

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

5. Gün – jQuery Dersi 5

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

4. Gün – jQuery Dersi 4

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

3. Gün – jQuery Dersi 3

Üçü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!");
	}
});

2. Gün – jQuery Dersi 2

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

1. Gün – jQuery Dersi 1

İ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