jQuery Öğrenelim! – Ders 1
Evet arkadaşlar, jQuery öğrenme yolunda ilk adımımızı Başlangıç ile atmıştık. Şimdi ise derslerimizin ilk basamağına basıyor, Ders 1‘e başlıyoruz. Bu yazımızda anlatıcaklarımıza göz atacak olursak;
*jQuery Ana Esasları
*jQuery Css Bağlantısı
*jQuery ile Özel Efektler
konularını anlatmaya çalışacağım.
jQuery Ana Esasları
jQuery’i nasıl kullandığımızı anlatmıştık ancak bir hatırlatma yapalım. jQuery kütüphanesini öncelikle buradan indiriyoruz. Açtığımız HTML sayfasına iskeleti oluşturduktan sonra;
<script src="jquery-latest.js" type="text/javascript"></script>
kodundan önce ekliyoruz.
Yani kodu ekledikten sonraki HTML dosyamız şu şekli alıyor;
<html><head> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"><!-- // Kodlar buraya yazılacak. // --></script></head><body> <a href="http://www.mavigenc.com/">MaviGenç | jQuery Dersleri</a></body></html>
Dosyamız bu şekli aldıktan sonra, artık jQuery’nin güzelliklerinden faydalanmaya başlıyoruz. HTML dosyasında “//Kodlar buraya yazılacak.” yazılan yere
window.onload = function(){ alert("Hoşgeldiniz"); }
yazıyoruz. Böylece pencere yüklendikten sonra [window.onload] küçük bir uyarı penceresi çıkıyor ve Hoşgeldiniz yazıyor [alert("Hoşgeldiniz")].
Eğer denemeniz başarılıysa, bu işi kapıyorsunuz demektir.
Not: Eklenilen fonksiyon kodları;
$(document).ready(function(){
//Kodlar buraya eklenir.
});
Yukarıdaki kodun belirtilen kısmına eklenir.
jQuery Css Bağlantısı
Bu bölümde basit olarak Css Class eklemeyi anlatıcağım. Css sınıfı eklemek için addClass, silmek için removeClass kullanıyoruz. Örnek vermek gerekirse;
addClass;
$("a").addClass("test");
removeClass;
$("a").removeClass("test");
Bu sınıfların şimdi tanıtılması lazım. Bunun için de, biraz önce oluşturduğumuz HTML sayfasına eklenmesi gerekli. Kodu ekledikten sonra HTML sayfasının alacağı hal şu şekilde olmalı;
<html><head>
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"><!--
window.onload = function(){ alert("Hoşgeldiniz"); }
$("a").addClass("test");
// --></script>
</head><body>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<a href="http://www.mavigenc.com/">MaviGenç | jQuery Dersleri</a>
</body></html>
Not:<body> etiketinden sonra eklediğimiz
<style type="text/css">
a.test { font-weight: bold; }
</style>
kodu, kullandığımız css sınıfının özellikleridir. Yani bu değişkene bağlı olarak eklediğimiz sınıf özellik kazanır.
En son hazırladığımız HTML sayfasında hâlâ bir eksiklik var. Bu eksikliği eklediğimiz sınıfı sayfamızda kullanarak gidericeğiz. Bunu da şu şekilde gösterebilirim;
<a class="test">Deneme Yazısı</a>
Yukarıdaki kodu sayfamıza eklediğimizde, Css Sınıfları Denemesi şeklinde gözükecektir. (kalın)
jQuery ile Özel Efektler
jQuery ile kullanabildiğimiz özel efektleri anlatmaya çalışacağım. Bu bölümde sadece hide efektini anlatacağım. Bu efekti kullanmak için aşağıdaki şekilde dosyamıza ekleme yapıyoruz;
$(document).ready(function(){
$("p").<strong class="selflink">hide</strong>();
$("a").click(function () {
$(this).<strong class="selflink">hide</strong>();
return false;
});
});
Bu kodu ekledikten sonra, değişkenimiz p olduğundan, sayfamızda <p></p> etiketleriyle yazımızı yazacağız. Ve bu etiketler arasında yazdığımız yazı gizli bir şekilde sayfada duracak. Ayrıca 2′şer adet oluşturduğumuz <p></p> etiketleri arasına eklediğimiz linke , tıklandığında link de gizlenecek. Kodları ekledikten sonra HTML dosyamızın alacağı hal şu şekilde olmalı;
<html><head>
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"><!--
window.onload = function(){ alert("Hoşgeldiniz"); }
$("a").addClass("test");
$(document).ready(function(){
$("p").hide();
$("a").click(function () {
$(this).hide();
return false;
});
});
// --></script>
</head><body>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<a href="http://www.mavigenc.com/">MaviGenç | jQuery Dersleri</a>
<a class="test">Css Sınıfıları Denemesi</a>
<p>Efekt Deneme</p>
<a href="#">Tıkla Ve Kaybolsun</a>
<p>Efekt Deneme 2</p>
</body></html>
Bu kodları ekledikten sonra, HTML sayfamız girişte Hoşgeldiniz diye uyarı verecek, Css Sınıfıları Denemesi yazısı sayfada kalın (bold) gözükecek ve Tıkla Ve Kaybolsun yazısı tıklandıktan sonra gizlenecek. Eğer bu işlemlerin hepsi sorunsuz çalışıyorsa, amacımızı gerçekleştirdik demektir..
İlk dersimizin sonuna geldik. Umarım sizlere birşeyler sunabilmiş, öğretebilmişimdir. Yanlışım veya eksiğim varsa, lütfen ama lütfen belirtin ki ona göre düzeltmeler yapayım.
Bir Sonraki Derste Neler Olacak?
*jQuery Ana Esasları (Detaylı)
Benzer Yazılar
- 31.01.10: Görsel jQuery Dersleri - Başlangıç (1)
Ağustos 10th, 2009 at 11:41
@yasin;
Öncelikle teşekkürler. Dosyayı .js olarak kaydettikten sonra sitenizin head etiketleri arasında .js dosyasını tanıtıyoruz. Anlatımını zaten yapmıştım. Birkez daha okuyun lütfen. Kolay gelsin.. :)
Temmuz 29th, 2009 at 18:07
merhaba çok güzel bir anlatım öncelikle
Yalnız mesela ben kodları oluşturdum ben kodları yazdıktan sonra diyelim dosyayı .js olarak kaydediyorum..
anlamadığım şey ben yaptığım değişikliği nasıl göreceğim forum sitem var mesela orada görebilirmiyim ne yaptığımı bunu biraz anlatabilirmisiniz?
Şubat 21st, 2009 at 11:38
@eylos:
Teşekkürler. Bunu güzel bir öneri olarak kabul ediyor ve bir sonraki jquery dersinde, uygulayacağım sözünü veriyorum :)
Şubat 21st, 2009 at 02:05
Bu yaptığın çalışma sonucunu bir demo sayfasında da verseydin tam süper olacaktı. Bu arada yazı zaten süper :)
Ocak 9th, 2009 at 18:11
@ramazan eymur:
Teşekkürler.. Yavaş yavaş hepsini anlatmaya çalışacağım.. Söylediğin doğru olabilir ama, ilk defa bildiğim kodlama bilgilerini okurlarıma ilettiğim için, çok fazla heyecanlıydım. :=)
Ocak 8th, 2009 at 19:19
çok sağol yazıların için ama sanki balıklama dalmışsın gibi geldi bana
önce
$(document).ready(function())
fonksiyonun ne işe yaradığını sonra seçicileri anlatsaydın daha güzel olurdu gibi sanki
hani çok hızlı gitmişsin sanki ama ne yalan söyliyim seni görüyorum heyecanın benide heyecanladırıyor
Aralık 14th, 2008 at 21:27
Yorumlarınız için teşekkürler arkadaşlar..
@Gürkan;
$(document).ready(function(){
$(“p”).hide();
$(“a”).click(function () {
$(this).hide();
return false;
});
});
Şeklinde düzelttim, kodları.. Eksiklik ready.(function) eklenmemesiymiş. =)
Ayrıca addClass mevzusuna gelince;
css sınıflarını detaylı olarak anlatacağım 2 ders sonrasında, o durumu anlayacaksın. Şuan anlatması bir yazı boyunda olacak çünkü ;)
Aralık 14th, 2008 at 19:41
Tıkla kaybolsun da çalışmıyor. Bir hata mı yapıyorum acaba diyeceğim ama kopyalayıp yapıştırdım yine çalışmadı. jquery.js dosyası doğru yerde.
Aralık 14th, 2008 at 19:21
Merhaba,
yukarıdaki örnekte $(“a”).addClass(“test”); kodu olmadanda yazımız bold oluyor. Bir yanlışlık olabilir mi?
Aralık 14th, 2008 at 16:28
Güzel anlatmışsın sağol. Bu konularda Türkçe içeriğe ihtiyacı var Türk internetinin, devam devam…