Jquery Eğitimi
Jquery
bu sayfadaki eğitimlerin tamamının videolarını ücretsiz olan acikakademi.com adresinden izleyebilirsiniz.
İlk Uygulama:
<script>
alert(“merhaba dünya”);
</script>
Böylece ekrana javascript ile “merhaba dünya” yazmış olduk.
Harici bir javascript dosyasını html sayfadan çağırma:
Bunun için yukarıdaki javascript kodunu alıyoruz( <script>ve </script> olmadan)…
alert(“merhaba dünya”);
bu kodu “mesaj.js” diye script klasörümüze kaydediyoruz (bu isim başkada olabilir…)
daha sonra html sayfamıza geçip <head></head> tagları (etiketleri) arasına
<script src=”script/mesaj.js”></script>
yazıyoruz. Böylece sayfamız çalıştırıldığında ekrana “merhaba dünya” mesajını “mesaj.js” dosyasından çağırmış oluyoruz.
jQuery dosyasını sayfaya çağırma
Jquery dosyasını “jquery.com “ adresinden indirip “script” klasörüne yüklüyoruz.
Daha sonra bu dosyayı html sayfamıza çağırmak için
<script src=”script/jquery.js”></script>
Komutunu <head></head> tagları arasına ekliyoruz.
Jquery ile “FOCUS” ve “BLUR”
Basit bir form tasarlıyoruz. Bu formda ad, soyad ve adres alanları oluşturuyoruz. İlk yapacağımız işlem input alanlarına tıklandığında (focus) css kullanarak zemini sarıya çevireceğiz. Daha sonra input alanlarından çıkıldığında zemini tekrar eski rengine dönüştüreceğiz.
Aynı işlemi adres alanındaki textarea içinde tanımlıyoruz.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <title></title> <script src=”script/jquery.js”></script> <script> $(document).ready(function () { $(‘input’).focus(function () { $(this).css(“background-color”, “yellow”); }) $(‘input’).blur(function () { $(this).css(“background-color”, “transparent”); }) $(‘#adres’).focus(function () { $(this).css(“background-color”, “yellow”); }) $(‘#adres’).blur(function () { $(this).css(“background-color”, “transparent”); }) }) </script> </head> <body> ad <br><input type=”text”> <br> soyad <br><input type=”text”> <br> adres <br><textarea id=”adres”></textarea> </body></html>
Şimdide jquery ile class lara müdahele etmeyi inceleyelim:
Aşağıda “zorunlu” class ına kırmız çerçeve özelliği tanımladık.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <title></title> <script src=”script/jquery.js”></script> <script> $(document).ready(function () { $(‘.zorunlu’).css(“border”, “1px solid red”); $(‘input’).focus(function () { $(this).css(“background-color”, “yellow”); }) $(‘input’).blur(function () { $(this).css(“background-color”, “transparent”); }) $(‘#adres’).focus(function () { $(this).css(“background-color”, “yellow”); }) $(‘#adres’).blur(function () { $(this).css(“background-color”, “transparent”); }) }) </script> </head> <body> ad <br><input type=”text”> <br> soyad <br><input type=”text” class=”zorunlu”> <br> adres <br><textarea id=”adres” class=”zorunlu”></textarea> </body></html>
Jquery ile “merhaba javascript”
Bir buton yaptık ve bu buton tıklanınca “Selamla” fonksiyonun çalışması sağladık.
Bu fonksiyon bize tıklandığında ekranda ve title da “Merhaba Javascript” yazmamızı sağlayacak.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″ /> <title></title> <script src=”script/jquery.js”></script> <script> function Selamla() { document.title = “Merhaba Javascript”; alert(“Merhaba Javascript”); } </script> </head> <body> <input type=”button” onclick=”Selamla()” value=”Selam ver”> </body></html>
H1 üzerine gelince selamla mesajını çıkmasını sağlamak için
<h1 onmouseover=”Selamla()”>Selamlama yazılımı</h1>
Kodunu eklemek yeterlidir.
Append komutu
Var olan değere belirlediğimiz değeri eklemek için kullanırız
$(“h1”).append(“Jquery ile selamlama”);
Html komutu
Var olan değeri verdiğimiz değerle değiştirir
$(“h1”).html(“Jquery ile selamlama”);
Şimdi javascript kullanmadan sadece jquery ile h1 e bilgi atamayı gerçekleştirelim:
<!DOCTYPE html><html lang=”en”> <head> <meta charset=”utf-8″ /> <title></title> <script src=”script/jquery.js”></script> <script> $(document).ready(function () { $(‘input’).click(function () { Selamla(); }) }) function Selamla() { $(“h1”).html(“Jquery ile selamlama”); } </script> </head> <body> <h1 >Selamlama yazılımı</h1> <input type=”button” value=”Selam ver”> </body></html>
EACH fonksiyonu (herbiri)
Liste (li) öğesindeki herbir bilgiyi ekrana alert ile basan program
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘input’).click(function () {
$(‘li’).each(function () {
alert($(this).text());
})
})
})
</script>
</head>
<body>
<input type=”button” value=”Birleştir”>
<ul>
<li>kawasaki</li>
<li>yamaha</li>
<li>suzuki</li>
<li>bmw</li>
<li>vespa</li>
<li>ducati</li>
<li>ktm</li>
</ul>
<textarea></textarea>
</body>
</html>
Şimdi düğmeye tıklanınca list (li) öğesindeki yazıları textarea içerisine aktaran jquery kodunu yazaım
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘input’).click(function () {
$(‘li’).each(function () {
// alert($(this).text());
// bu kod ekrana basmaya yarıyordu
$(‘textarea’).append($(this).text() + ‘ ‘);
})
})
})
</script>
</head>
<body>
<input type=”button” value=”Birleştir”>
<ul>
<li>kawasaki</li>
<li>yamaha</li>
<li>suzuki</li>
<li>bmw</li>
<li>vespa</li>
<li>ducati</li>
<li>ktm</li>
</ul>
<textarea cols=”50″ rows=”5″></textarea>
</body>
</html>
Şimdi list (li) tagındaki yazıları “motorismi” değişkenine aktararak aynı işlemi yapalım
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘input’).click(function () {
$(‘li’).each(function () {
// alert($(this).text());
// bu kod ekrana basmaya yarıyordu
//$(‘textarea’).append($(this).text() + ‘ ‘);
var motorismi = $(this).text();
$(‘textarea’).append(motorismi + ‘ ‘);
})
})
})
</script>
</head>
<body>
<input type=”button” value=”Birleştir”>
<ul>
<li>kawasaki</li>
<li>yamaha</li>
<li>suzuki</li>
<li>bmw</li>
<li>vespa</li>
<li>ducati</li>
<li>ktm</li>
</ul>
<textarea cols=”50″ rows=”5″></textarea>
</body>
</html>
Değişkenler ve Fonksiyonlar
Arttirma fonksiyonu yazalım… örneğin köprüden her araba geçtiğinde değer 1 artsın ve “h1” etiketinin içerisine yazılsın
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
var gecen_araba_sayisi = 0;
function saydir() {
gecen_araba_sayisi += 1;
$(‘h1’).text(gecen_araba_sayisi);
}
$(document).ready(function () {
$(‘input’).click(function () {
saydir();
})
});
</script>
</head>
<body>
<input type=”button” value=”Bir arttır”>
<h1></h1>
</body>
</html>
Fonksiyona parametre aktarma
Bu örnekte fonksiyonlara değer göndermeyi göreceğiz
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
var gecen_araba_sayisi = 0;
function saydir(saydirilan_deger) {
$(‘h1’).text(saydirilan_deger);
}
$(document).ready(function () {
$(‘input’).click(function () {
gecen_araba_sayisi += 1;
saydir(gecen_araba_sayisi);
})
});
</script>
</head>
<body>
<input type=”button” value=”Bir arttır”>
<h1></h1>
</body>
</html>
Şimdiki örneğimizde girilen 2 sayının toplamını sayfa yüklendiğinde yapan ve değeri “alert” ile ekrana basan programı yazıyoruz
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
topla(3, 5);
});
function topla(sayi1, sayi2) {
var toplam = sayi1 + sayi2;
alert(toplam);
}
</script>
</head>
<body>
<input type=”button” value=”Bir arttır”>
<h1></h1>
</body>
</html>
Şimdiki örneğimizde bir düğmeye tıklandığında 2 farklı sayıyı toplayan programı yazıyoruz
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
//topla(3, 5);
});
function topla(sayi1, sayi2) {
var toplam = sayi1 + sayi2;
alert(toplam);
}
</script>
</head>
<body>
<input type=”button” value=”sayıları topla” onclick=”topla(123,345)”>
<h1></h1>
</body>
</html>
Onchange olayı
Şimdi kullanıcıya hangi takımı tuttuğunu soracağız. Ve daha sonra arka zemin resmini tutmuş olduğu takımın bayrağı ile değiştireceğiz. 6. Seçenekte ise herhangi bir takım seçilmemiş ise zemin rengini kırmızı yapacağız
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘select’).change(function () {
var secilen_deger = $(‘select’).val();
if (secilen_deger == 1)
{ $(‘body’).css(“background-image”, “url(‘resimler/fener.jpg’)”); }
else if (secilen_deger == 2)
{ $(‘body’).css(“background-image”, “url(‘resimler/gs.jpg’)”); }
else if (secilen_deger == 3)
{ $(‘body’).css(“background-image”, “url(‘resimler/besiktas.jpg’)”); }
else if (secilen_deger == 4)
{ $(‘body’).css(“background-image”, “url(‘resimler/ts.jpg’)”); }
else if (secilen_deger == 5)
{ $(‘body’).css(“background-image”, “url(‘resimler/bursa.jpg’)”); }
else
{ $(‘body’).css(“background-color”, “red”);
$(‘body’).css(“background-image”, “url(”)”);
}
});
});
</script>
</head>
<body>
<strong>hangi takımlısınız?</strong>
<select>
<option value=”1″>FB</option>
<option value=”2″>gs</option>
<option value=”3″>beşiktaş</option>
<option value=”4″>trabzonspor</option>
<option value=”5″>bursaspor</option>
<option value=”6″>hiçbiri</option>
</select>
</body>
</html>
Hover fonksiyonu – küçük resim büyük resim değişimi
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘img.kucukresim’).hover(function () {
$(‘#buyukresim’).attr(“src”, $(this).attr(“src”));
})
});
</script>
</head>
<body>
<img src=”resimler/besiktas.jpg” alt=”besiktas” width=”600″ height=”450″ id=”buyukresim” > <br>
<img src=”resimler/besiktas.jpg” alt=”besiktas” width=”80″ class=”kucukresim”>
<img src=”resimler/bursa.jpg” alt=”bursa” width=”80″ class=”kucukresim”>
<img src=”resimler/fener.jpg” alt=”fener” width=”80″ class=”kucukresim”>
<img src=”resimler/gs.jpg” alt=”gs” width=”80″ class=”kucukresim”>
<img src=”resimler/ts.jpg” alt=”ts” width=”80″ class=”kucukresim”>
</body>
</html>
Jquery ile animasyonlar
Örneğimizde bir butona basılarak robotun görünür/görünmez olmasını sağlayacağız.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘input’).click(function () {
if ($(‘#robot’).is(“:visible”) == true) {
$(‘#robot’).fadeOut(“slow”, function () {
$(‘input’).val(“Robotu Göster”);
})
}
else {
$(‘#robot’).fadeIn(“slow”, function () {
$(‘input’).val(“Robotu gizle”);
});
}
})
});
</script>
<style>
body {background-image: url(“resimler/zemin.jpg”)}
</style>
</head>
<body>
<input type=”button” value=”Robotu gizle” ><br>
<img src=”resimler/robot.png” id=”robot”>
</body>
</html>
Şimdi yapacağımız örnekte sayfanın neresi tıklanırsa robotumuz oraya hareket edecek…
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(document).click(function (event) {
var _top = event.pageY;
var _left = event.pageX;
$(‘#robot’).animate({
top: _top,
left: _left-150
// _left-150 değeri bizim resmimizin yarısı kadar bir
// genişliği ifade ediyor…
// böylece tıkladığımız yere ortalanıyor
}, 1000);
});
$(‘input’).click(function () {
if ($(‘#robot’).is(“:visible”) == true) {
$(‘#robot’).fadeOut(“slow”, function () {
$(‘input’).val(“Robotu Göster”);
})
}
else {
$(‘#robot’).fadeIn(“slow”, function () {
$(‘input’).val(“Robotu gizle”);
});
}
})
});
</script>
<style>
body {
background-image: url(“resimler/zemin.jpg”)
}
img {
position: absolute;
}
</style>
</head>
<body>
<input type=”button” value=”Robotu gizle” ><br>
<img src=”resimler/robot.png” id=”robot”>
</body>
</html>
Klavye olayları
Bu örneğimizde “select” elemanından seçilen değeri jquery ile okuyup, “h1” etiketinin içerisine yazdırıyoruz
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(‘select’).change(function () {
var secilen = $(‘select’).val();
switch (secilen) {
case “1”:
{
$(‘h1’).html(“bir”);
break;
}
case “2”:
{
$(‘h1’).html(“iki”);
break;
}
case “3”:
{
$(‘h1’).html(“üç”);
break;
}
}
});
})
</script>
</head>
<body>
<select>
<option value=”1″>1</option>
<option value=”2″>2</option>
<option value=”3″>3</option>
</select>
<br>
<h1></h1>
</body>
</html>
Şimdi bir piyano uygulaması yapıyoruz
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title></title>
<script src=”script/jquery.js”></script>
<script>
$(document).ready(function () {
$(document).keypress(function (event) {
var tus = event.which;
//var harf = event.char;
//alert(harf + “:” + tus);
// A65 S83 D68 F70 J74 K75 L76
switch (tus) {
case 65:
{
$(‘audio’).attr(“src”, “url(‘sesler/a.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 83:
{
$(‘audio’).attr(“src”, “url(‘sesler/s.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 68:
{
$(‘audio’).attr(“src”, “url(‘sesler/d.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 70:
{
$(‘audio’).attr(“src”, “url(‘sesler/f.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 74:
{
$(‘audio’).attr(“src”, “url(‘sesler/j.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 75:
{
$(‘audio’).attr(“src”, “url(‘sesler/k.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
case 76:
{
$(‘audio’).attr(“src”, “url(‘sesler/l.mp3’)”);
$(‘audio’).trigger(“play”);
break;
}
}
})
})
</script>
</head>
<body>
<img src=”resimler/piyano.jpg” width=”600″ alt=”piyano”>
<audio src=””></audio>
</body>
</html>
bu sayfadaki eğitimlerin tamamının videolarını ücretsiz olan acikakademi.com adresinden izleyebilirsiniz.
About Author
