JQuery nedir?
2006 yılında geliştirilmiş bir açık kaynak javascript kütüphanesidir. Ya da farklı bir JavaScript Framework'üdür denebilir. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile Flash galeri, Tab menü, Sayfa geçişleri gibi birçok işlem yapılmaktadır.
jQuery'nin resmi sitesinden jQuery dosyasını indirip web sitenize yükleyebilirsiniz. jQuery boyutu ufak ve işlevi çok olduğundan ayrıca hazır eklentileride çok olduğundan çok yaygındır. 2006 Yılından beri kullanılan jQuery 2012 yılına kadar inanılmaz bir kullanım artışı göstermiştir.
Jquery kütüphanesi kullanılarak geliştirilen jqueryui gibi daha gelişmiş arayüzleri ve araçları daha kolay kullanabilmemize imkan veren ek kütüphanelerde mevcuttur.
Nasıl Çalıştırılır?
JQuery kütüphanesini sayfamıza eklememiz(import) etmemiz yeterlidir.Bu işlem sonrasında, sayfa içerisindeki Javascript kodları içerisinden JQuery fonksiyonlarına referans verebilir duruma geliriz.
Jquery kütüphanesini 2 şekilde kullanabiliriz:
- Kendi sunucumuza indirerek
- Farklı bir sunucuda tutulan bir kopyayı kullanarak
İlk olarak JQuery’i kendi bilgisayarımıza indirip buradan çalıştırıyoruz.
Bunun için JQuery’nin resmi sitesi olan http://jquery.com adresini ziyaret etmemiz gerekiyor.
Burada sol tarafta yer alan “Download” butonuna tıklayarak JQuery’nin en son versiyonunu linkini
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> şeklinde ekliyoruz.
Böylece sayfamızada jquery kütüphanelerini eklemiş oluyoruz.
JQuery Örnek kodlar
1) Click örnek -Tıklanınca Alert komutunun çalışması
<html>
<head>
<title>odev3</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.feyza{ padding: 10px 50px ; display:block ; background:blue ;}
</style>
</head>
<body>
<a href="#" class="feyza" > Bilgisayar Muhendisligi </a>
sitenin icerigi
<script>
$("a.feyza").click ( function() {
alert("Siteye giris basarılı")
});
</script>
</body>
</html>
2) Hover örnek-Üzerine gelince alert komutunun çalışması
<html>
<head>
<title>odev3</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
.feyza{ padding: 10px 50px ; display:block ; background:blue ;}
</style>
</head>
<body>
<a href="#" class="feyza" > Bilgisayar Muhendisligi </a>
sitenin icerigi
<script>
$("a.feyza").hover( function() {
alert("siteye giris basarılı")
});
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder