eburhan.com

DOM ismi verilen bir standart sayesinde web sayfamızdaki her eleman (resim, link, buton) birer nesne olarak değerlendirilir. Biz de javaScript yardımıyla bu nesnelere erişebilir ve üzerinde işlemler yapabiliriz. Yani bir resmi yenisiyle değiştirebilir, bir linkin başına/sonuna yeni nesneler ekleyebilir, bir buton nesnesinin birebir kopyasını çıkartabiliriz. jQuery sayesinde ise bu işlemleri çok daha kolay bir şekilde yapabiliyoruz.

Konuya başlamadan önce başlıklara bir gözatalım:

1. Değiştirme
2. Ekleme
3. Silme
4. Kopyalama

1. Değiştirme

Bir elemanın tamamını veya sadece içeriğini değiştirmek için kullanabileceğimiz jQuery fonksiyonları html(), text(), replaceWith() ve replaceAll() isimli fonksiyonlar. html() ve text() fonksiyonları bir elemanın "içeriğini" değiştirirken, replaceWith() ve replaceAll() fonksiyonları ise bir elemanın "tamamını" değiştirir.

html(): Bu fonksiyon ile bir elemanın içeriğini HTML etiketleriyle birlikte alabilirsiniz ve değiştirebilirsiniz. innerHTML özelliğine benzer. Kullanımı ise şöyledir:

// içerik al
$('p#metin').html();

// içerik değiştir
$('p#metin').html('yeni içerik');

Bu fonksiyon ile ilgili bir örneği Örnek 1A sayfasında bulabilirsiniz.

text(): Bu fonksiyon sayesinde bir elemanın sahip olduğu içeriği “düz metin” olarak alabiliyoruz veya değiştirebiliyoruz. innerText özelliğine benzer. Kullanımı ise şöyledir:

// içerik al
$('p#metin').text();

// içerik değiştir
$('p#metin').text('yeni içerik');

Bu fonksiyon ile ilgili bir örneği Örnek 1B sayfasında bulabilirsiniz.

replaceWith(): Bu fonksiyon sayesinde bir elemanın kendisini başka bir eleman ile değiştirebiliriz. Örneğin bir butonu bir resim ile değiştirmek istiyorsanız bu fonksiyonu kullanmalısınız. ilk önce değiştirilecek elemanı belirtip, daha sonra da yeni elemanı belirtiyoruz. Kullanımı şöyledir:

// butonu resim ile değiştir
$('button').replaceWith('<img src="resim.jpg" />');

Bu fonksiyon ile ilgili bir örneği Örnek 1C sayfasında bulabilirsiniz.

replaceAll(): Bu fonksiyon biraz önce bahsettiğimiz replaceWith() fonksiyonuyla aynı işlemi yapmasına karşın ters şekilde çalışıyor. ilkönce yeni elemanı belirtip daha sonra değiştirilecek olan elemanı belirtiyoruz. Kullanımı şöyledir:

// bütün butonları resim ile değiştir
$('<img src="resim.jpg" />').replaceAll('button');

Bu fonksiyon ile ilgili bir örneği Örnek 1D sayfasında bulabilirsiniz.

2. Ekleme

jQuery’nin ekleme fonksiyonları sayesinde bir elemanın içerisine veya dışarısına yeni elemanlar ekleyebiliyoruz. Öncelikle bir elemanın içerisine yeni elemanlar eklerken kullanacağımız append() ve prepend()fonksiyonlarına bakalım.

append(): Bu fonksiyon ile bir elemanın sahip olduğu içeriğin "en sonuna" yeni bir eleman ekleyebiliriz. Alttaki örneğin uygulamasını Örnek 2A sayfasında bulabilirsiniz.

// örnek metin
<p id="metin">Merhaba</p>

// sonuna ekle
$('p#metin').append(' <strong>Erhan<strong>');

// sonuç
<p id="metin">Merhaba  <strong>Erhan<strong></p>

prepend(): Bu fonksiyon ile bir elemanın sahip olduğu içeriğin "en başına" yeni bir eleman ekleyebiliriz. Alttaki örneğin uygulamasını Örnek 2B sayfasında bulabilirsiniz.

// örnek metin
<p id="metin">Merhaba</p>

// sonuna ekle
$('p#metin').prepend('<strong>Erhan<strong> ');

// sonuç
<p id="metin"><strong>Erhan<strong> Merhaba</p>

şimdi de bir elemanın dışına nasıl yeni elemanlar ekleyebiliriz ona bakalım. Bu iş için kullanacağımız fonksiyonlar after() ve before() olacak.

after(): Bu fonksiyon ile bir elemandan "sonra" yeni bir eleman ekleyebiliriz. Örneğin bir butondan sonra bir resim eklenebilir. Bu örneği Örnek 2C sayfasında bulabilirsiniz.

$('button').after('<img src="resim.jpg" />');

before(): Bu fonksiyon sayesinde bir elemandan "önce" yeni bir eleman ekleyebiliriz. Örneğin bir butondan önce bir resmin eklenmesini sağlayabiliriz. Bu örneği Örnek 2D sayfasında bulabilirsiniz.

$('button').before('<img src="resim.jpg" />');

jQueryâ??nin ekleme fonksiyonları aslında benim burada anlattığımla sınırla değil tabiki. Daha birçok ekleme fonksiyonu var. Bu yüzden lütfen jQueryâ??nin yardım belgelerine bakmayı ihmal etmeyin.

3. Silme

Pekçok durumda bir elemanı tamamen kaldırmak veya bir elemanın içerisindeki alt elemanları kaldırmak gerekebiliyor. Bu durumda jQuery’nin empty() veya remove() fonksiyonlarından birisini kullanmalıyız.

empty(): Bir elemanın içeriğini boşaltır. Örneğin ID özniteliği "alan" olan bir DIV elemanın içerisini boşaltmak/temizlemek için şöyle yapıyoruz:

$('div#alan').empty();

Bu örneği test etmek için Örnek 3A sayfasına bakabilirsiniz.

remove(): Bir elemanı tamamen ortadan kaldırır. Örneğin ID özniteliği "alan" olan bir DIV elemanı tamamen ortadan kaldırmak için şöyle yapıyoruz:

$('div#alan').remove();

Bu örneği test etmek için Örnek 3B sayfasına bakabilirsiniz.

4. Kopyalama

Eğer bir elemanın birebir kopyasını çıkartmak yani klonlamak istiyorsanız jQuery’nin clone() fonksiyonunu kullanmalısınız. Bu fonksiyon clone() ve clone(true) olmak üzere iki farklı şekilde kullanılıyor. Peki bir elemanın kopyasını neden çıkartma ihtiyacı duyarız? Bu sorunun cevabı için SpeedyShare sitesine girip “Upload more files at once” linkine tıklayın. Sadece bir örnek

clone(): Bir elemanın kopyasını çıkartır fakat elemanın sahip olduğu olayları (events) kopyalamaz. Daha önceden fare ile üzerine geldiğinizde rengi değişen bir elemanın, kopyasının üzerine geldiğinizde ise rengi değişmeyecektir. Bu örneğin uygulamasını Örnek 4A sayfasında görebilirsiniz. Bu fonksiyonunun kullanımı ise şöyledir:

// bir metin kutusunun kopyasını çıkar
$('input').clone();

clone(true): Bir elemanın kopyasını sahip olduğu olaylar (events) ile birlikte çıkartır. Yani daha önceden fare ile üzerine geldiğinizde rengi değişen bir elemanın, kopyasının üzerine geldiğinizde yine rengi değişecektir. Bu örnekle ilgili bir uygulamayı Örnek 4B sayfasında görebilirsiniz. Bu fonksiyonunun kullanımı ise şöyledir

// bir metin kutusunun kopyasını çıkar (olayları ile birlikte)
$('input').clone(true);

Kopyalama işlemleri sırasında olaylar (events) konusunun da ismi geçti. Eğer olaylar konusunu daha önceden okumadıysanız ya da yeniden okumak isterseniz jQuery ve Olaylar başlıklı yazıma bakabilirsiniz. Bu yazıdaki örnekleri ise buradan indirebilirsiniz.

benzer yazılar:

• jQuery myDialog eklentisi
• Güncelleme: jQuery KalanKarakter v2.0