15. Gün – jQuery Dersi 15

On beşinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery :checked Filtresi
– jQuery width ve height Metodları
– jQuery load Metodu

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

13. Gün – jQuery ile Sayfalama Yapımı

On üçüncü jquery dersimizde yeni bir örnek uygulama hazırlayacağız..
– jQuery ile Sayfalama Yapımı

/* Erbilen.NET - jQuery Dersleri */
/* jQuery ile Sayfalama Yapımı*/

// 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
$(document.body).on("click", "#sayfalama a", 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();
    }
});

12. Gün – jQuery Dersi 12

On ikinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery Focus Metodu
– jQuery Clone Metodu
– jQuery Wrap Metodu

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="erbilen1"></div>');

11. Gün – jQuery Dersi 11

On birinci jQuery dersimizde aşağıdakileri öğrendik;
– jQuery html – text – val Metodları
– jQuery addClass – removeClass – toggleClass Metodları
– jQuery Prepend Metodu

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

removeClass Metodu Kullanımı

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

toggleClass Metodu Kullanımı

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

toggleClass Metodu Kullanımı

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

10. Gün – jQuery Dersi 10

Onuncu jQuery dersimizde aşağıdakileri öğrendik;
– jQuery serialize Metodu
– jQuery hasClass Metodu
– jQuery Change Metodu

Serialize Metodu Kullanımı

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

hasClass Metodu Kullanımı

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

Change Metodu Kullanımı

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

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