Turkcell | Geleceği Yazanlar

302: JQuery Web programlama eğitimimizin orta seviyesinde, JQuery öğreniyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery Nedir?

Bu sorunun cevabı epey basittir; jQuery artık pek de yeni sayılamayacak bir web teknolojisidir. JavaScript kütüphanelerinden oluşur. Bunlar sayesinde JavaScript'te programlama epey kolaylaşır. Öğrenimi kolaydır. jQuery kütüphanesini öğrenip kullanabilmek için ön koşul olarak,

  • HTML
  • CSS
  • JavaScript

Konularında en azından temel bir bilginizin olması gerekir.

Daha fazla...

jQuery'nin İnternet'ten İndirilmesi

http://jQuery.com/download adresinden kullandığınız işletim sistemine uygun olan (Windows, Linux, Mac OS vb) bir sürümünü indiriniz. Bu andan itibaren jQuery kütüphanelerini HTML5 kodu içinde kullanabilirsiniz.

jQuery kütüphanesi, tek bir JavaScript dosyasıdır ve bu dosyaya <script> tagı ile aşağıdaki gibi referans verebilirsiniz:

<head>
<script src="jQuery-1.10.1.min.js"></script>
</head>

 

Daha fazla...

jQuery Yazılış Biçimi

jQuery komutlarının işlevini en etkin biçimde şöyle anlatabiliriz:

"HTML elemanlarını seç (select-query); onların üzerinde eylemler (actions) uygula!"

Buna göre jQuery'nin komutlarının temel yazılış biçimi:

Daha fazla...

Belge Hazır Olayı (Document Ready Event)

Vereceğimiz bütün örneklerde, bütün jQuery metotları, bir belge hazır metodu içine yerleştirilmiştir. Bu metodun yazılış biçimi aşağıdaki gibidir:

Daha fazla...

jQuery HTML Eleman Seçicileri (Selectors)

jQuery içinde HTML eleman seçicileri en önemli bileşenlerden biridir. Eleman seçiciler, HTML elemanlarını seçme ve bunların üzerinde çeşitli işlemler gerçekleştirme imkanı sağlar.

jQuery, HTML elemanları seçmek ya da bulmak için aşağıdaki bilgileri kullanır:

Daha fazla...

Ayrı Bir Dosyadaki Fonksiyonlar

Eğer web siteniz çok sayıda sayfa içeriyorsa, jQuery fonksiyonlarını kolaylıkla çalıştırmak için ayrı bir dosyada saklamanız tavsiye edilir. Bu dosyanın uzantısı .js olacaktır.

Aşağıdaki örnekte, jQuery fonksiyonları myJS adlı dosyada saklanmıştır ve oraya erişerek kullanılmaktadır:

Daha fazla...

Olay (Event)

Web sayfasının cevap verebileceği bütün farklı ziyaretçi eylemleri olay olarak tanımlanır. Bir olay, herhangi bir şey oluştuğu zaman, belirli bir hareketi temsil eder.

Örnekler:

Daha fazla...

jQuery Efektleri - Hide ve Show (Gizle ve Göster)

jQuery, hide() ve show() metotları ile HTML elemanlarını gizleyebilir ya da görüntüleyebilir.

 

jQuery hide() ve show()

jQuery, hide() ve show() metotları ile HTML elemanlarını gizlemek ya da görüntülemek mümkündür:

Daha fazla...

jQuery Görüntüleme / Kaldırma Yöntemleri

jQuery ile bir elemanın görünürlüğünü azaltabilir, yok edebilir ve tekrar eski görünümüne geri döndürebilirsiniz. jQuery'de bu amaçla kullanılabilecek metotlar aşağıda listelenmiştir:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
Daha fazla...

jQuery Efektleri - Kaydırma (Sliding)

jQuery kaydırma metotları yardımı ile elemanları yukarı ve aşağıya doğru kaydırabilirsiniz.

jQuery aşağıdaki kaydırma metotlarına sahiptir:

  • slideDown()
  • slideUp()
  • slideToggle()
Daha fazla...

jQuery Efektleri - Animasyon (Animate)

jQuery Callback Fonksiyonları

jQuery - Zincirleme İşlem (Chaining)

Şu ana kadar jQuery deyimlerini belli bir anda bir tane olarak çalıştırdığını söylüyorduk (biri diğerinden sonra). Bununla birlikte, zincirleme adı verilen bir teknik mevcuttur; bu teknik sayesinde çok sayıda jQuery komutu, biri diğerini izler biçimde, aynı eleman üzerinde icra edilebilir. Bir zincir oluşturmak için, bir eylem bir önceki eyleme eklenir.

Daha fazla...

JQuery - DOM Manipülasyonu

jQuery'nin en önemli özelliklerinden biri, DOM (Document Object Model) elemanlarını işleyebilme yeteneğidir.

Daha fazla...

İçeriğe Erişme - text(), html(), and val()

Üç adet basit fakat çok faydalı metot sayesinde jQuery, DOM elemanlarını manipüle edebilir:

Daha fazla...

jQuery - HTML Elemanlarına İçerik ve Vasıf Atama

İçerik almakta (get) kullandığımız üç metodu şimdi de içerik atamak (set) için kullanacağız:

Daha fazla...

Vasıf (Attribute) Atama - attr() Metodu

jQuery attr() metodu HTML elemanlarının vasıflarına atama yapmak ya da değerlerini değiştirmek için kullanılır. Aşağıdaki örnek, href özelliğinin bir bağlantıdaki değerinin bu yolla nasıl değiştirileceğini gösteriyor:

Daha fazla...

jQuery Elemanlar Ekleme

jQuery ile kolayca yeni HTML elemanları ya da içerikleri ekleyebilirsiniz.

Yeni HTML içeriği eklemek amacı ile kullanılabilecek dört jQuery metodu aşağıda verilmiştir:

Daha fazla...

jQuery Silme Metotları

jQuery metotları ile HTML elemanlarını silmek de mümkündür. Eleman ve içerikleri silmek için esasen iki farklı jQuery metodu mevcuttur:

  • remove() – seçilen elemanı ve varsa çocuk elemanları siler.
  • empty() – seçilen elemanın çocuklarını siler.
Daha fazla...

jQuery CSS Sınıflarına Erişim ve Değişiklik

jQuery ile CSS elemanlarını manipüle etmek son derecede kolaydır. jQuery'nin, CSS manipülasyonu için birçok metodu vardır:

Daha fazla...

jQuery css() Metodu

css() metodu seçilen elemanlar için bir ya da daha fazla stil özelliğine erişir ya da bunlar üzerinde değişiklik yapar.

 

Bir CSS özelliğine erişmek

Belirli bir CSS özelliğine erişmek için aşağıdaki yazılış biçimini kullanınız:

Daha fazla...