T
trgy
Misafir
İnternette çok araştırdım ama düzgün Türkçe kaynak bulamadım bu yüzden Jquery ile ilgili dersleri başlatmak istedim. Hep beraber öğrenmek dileğiyle. İlk dersimizin içeriği;
A.Jquery indirme
B.Jquery'yi sayfa içerisine eklemek ve minik bir kod örneği.
1.adım
Öncelikle Jquery http://jquery.com/ anasayfasından Jqeury'yi indiriyoruz ve kullandığımız editör yardımıyla bir adet html şablonu oluşturuyoruz.
2.Adım
2.adımımızda indirdiğimiz jquery'yi tıpkı bir javascript ekler gibi hedef göstererek ekliyoruz.
Eklenmesi gereken kod
Son hali
Örnek
Jquery'yi sayfamıza ekledik ve şimdi çalışmaya başlayabiliriz. Aşağıdaki verdiğim örnekte Tıkla Beni! butonuna bastığınızda ekrandaki kutu yavaşça kapanacaktır.
Kısa kısa kod açıklamaları:
Bu css kodları ile oluşturduğumuz box div'ine şekil verdik. 300 piksel genişlik, 300 piksel yükseklik ve arkaplan rengi olarak kırmızı ayarladık.
Yukarıdaki kod ise biraz karışık gelebilir ama çok basit. Jquery kodlarını yazmaya her zaman $ işareti ile başlarız. $ işaretinden sonra bir adet fonksiyon oluşturduk ve bu fonksiyona ait tanımlamalar yaptık. $('a') ile tüm linkleri seçmiş olduk. $('a') yerine $('p') yazsaydık tüm paragrafları seçmiş olacaktık. Kısacası $('hedef') yazabiliriz. .click ile fonksiyonumuzun tıklandığında ne yapacağını ayarlıyoruz. tıklandığında hedefimiz #box yani box div'i. tıklandıktan sonra ise slideUp(4000) fonksiyonu sayesinde ise kutumuz 4 saniye içerisinde kaybolacaktır. slideUp(4000) içindeki 4000 rakamı ne kadar sürede kapanacağını belirtir. slideUp(4000) yerine slideUp('fast') yazarsak bu sefer işlemi daha hızlı uygulayacaktır.
Oluşturduğumuz div ve link.
Bu dersimizde sizlere kısaca jquery'yi anlattım ve bir örnek ile açıklamak istedim. Önümüzdeki dersimizde vereceğim örneklerle daha anlaşılır olacaktır. Yazım hatalarım ve anlatım bozukluklarım olabilir şimdiden özür dilerim.
Demo - Kaynak Kodları
dipnot: Çeviri değildir kendi anlatımımdır.
A.Jquery indirme
B.Jquery'yi sayfa içerisine eklemek ve minik bir kod örneği.
1.adım
Öncelikle Jquery http://jquery.com/ anasayfasından Jqeury'yi indiriyoruz ve kullandığımız editör yardımıyla bir adet html şablonu oluşturuyoruz.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlık</title>
</head>
<body>
<br /><div style="z-index:3" class="smallfont" align="center">Content Relevant URLs by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.3.2</div>
</body>
</html>2.adımımızda indirdiğimiz jquery'yi tıpkı bir javascript ekler gibi hedef göstererek ekliyoruz.
Eklenmesi gereken kod
HTML:
<script src="jquery.min.js" type="text/javascript"></script>
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlık</title>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Jquery'yi sayfamıza ekledik ve şimdi çalışmaya başlayabiliriz. Aşağıdaki verdiğim örnekte Tıkla Beni! butonuna bastığınızda ekrandaki kutu yavaşça kapanacaktır.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').slideUp(4000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>
HTML:
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
}
</style>
HTML:
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').slideUp(4000);
});
});
</script>
HTML:
<div id="box"></div>
<a href="#">Tıkla beni!</a>Oluşturduğumuz div ve link.
Bu dersimizde sizlere kısaca jquery'yi anlattım ve bir örnek ile açıklamak istedim. Önümüzdeki dersimizde vereceğim örneklerle daha anlaşılır olacaktır. Yazım hatalarım ve anlatım bozukluklarım olabilir şimdiden özür dilerim.
Demo - Kaynak Kodları
dipnot: Çeviri değildir kendi anlatımımdır.
