Jquery ile Html Dosyasını Değiştirmek
Önceki makalelerimde (1 ve 2)Javascript sayesinde sayfalarımıza fotoğraf ya da yazı ekleyebileceğimizden, içerikleri çıkarabileceğimizden ya da çalışma zamanı içerisinde içerikleri modifiye edebileceğimizden bahsetmiştim. Bu makalemde de, Jquery kullanarak yukarıda bahsettiğim eylemleri koda dökerek nasıl yapılabileceklerini izah etmeye çalışmak.
Html sayfalarında herhangi bir içeriğin değiştirilmesi, temel olarak iki aşamada gerçekleştirilmektedir. Bunlar:
1. Elementin seçimi
2. Elementin güncellenmesi
Şeklinde olmalıdır. Pratik olarak izah edecek olursak, önce tarayıcımıza hangi element için değişiklik yapmak istediğimizi belirtmeliyiz; daha sonra da seçilen element için ne yapmak istediğimizi.
Örneğin sayfamızdaki tüm “abc” sınıfındaki etiketlere (class özelliği) 14 px font değeri atamak istiyorsak; birinci aşamada class=”abc” olan elementleri seçmeli; daha sonra da font değerlerini 14 ile değiştirmesini söylemeliyiz.
Eski Javascript günlerimizde element seçimi,
document.getElementById(‘id’);
document.getElementsByTagName()
gibi metodlarla gerçekleştiriliyordu ve zaman zaman çalışmayarak kullanıcıyı çileden çıkarabiliyordu. Ek olarak bu iki metod ile, örneğin navig sınıfına sahip tüm <a > etiketlerini seçmek için önce tüm etiketleri seçmeli; daha sonra her birisinin içerisine girerek navig sınıfı olup olmadığını sorgulamanız gerekiyordu. Jquery’de element seçimi ise çok daha işlevsel.
Jquery ile Element Seçimi
Jquery, css seçicileri kullanarak, sayfadaki elementlerin seçilmesi için oldukça işlevsel yöntemler sunuyor. Bu da az da olsa css bilgisine sahip kullanıcılar için, Jquery kullanımını çok daha basit bir hale getiriyor.
Css Seçicileri
Css seçicileri, bir html dökümanı içerisinde belli bir etikete sahip olan, ya da belli bir id veya sınıf (class) değerine sahip olan elementleri seçebilmemize olanak sağlarlar.
Örneğin bir sayfadaki tüm < h2 > etiketlerini seçmek için h2 ; bir sınıf değerine sahip etiketleri seçmek için .sinifadi seçicisi ya da bir id değerine sahip değerleri seçmek için #idadi seçicileri kullanılabilir.
Jquery ve Css Seçicileri
Jquery ile Css seçicilerini kullanmak oldukça kolaydır. Jquery syntax’ında seçiciler $(‘seçici’) şeklinde yazılmaktadır.
Örneğin;
< p class=”sinif” > metin < /p >
sinif sınıfına sahip etiketleri yakalamak için;
$('.sinif)
Yazmanız yeterlidir. Örneğimizi daha da geliştirerek; sinif sınıfına ait tüm elementlerin metinlerini “Bu metin jquery ile yeniden düzenlenmiştir” olarak değiştirmeye çalışalım.
$('.sinif).html(' Bu metin jquery ile yeniden düzenlenmiştir ');
Yukarıdaki komutumuzu $(document).ready metodu içine yazdığımızda; sayfa ilk açıldığı anda sinif etiketine sahip tüm etiketlerin değeri Bu metin jquery ile yeniden düzenlenmiştir olarak değişecektir. Javascript’in ızdıraplı yollarında yürümeyenler, tek satırlık bu işlemin kıymetini bilemeyebilirler, ama daha eski olanlar heyecanımı paylaşacaklardır.
Jquery seçicileri konusunda daha detaylı bilgiler vererek elimizdeki kozları daha iyi tanımış olalım.
Jquery ID Seçicileri
Herhangi bir id değerine sahip etiketi seçmek için kullanılır.
< p id=”deger”> metin< /p >
Etiketini barındıran bir html sayfasında yüzlerce p etiketi varsa ve sadece deger ID değerine sahip olan p değerini seçmek için idealdir. Jquery ile seçimi ise
$('#deger’)
Şeklinde yapılmaktadır. Dikkat ederseniz sınıf seçicilerinin önüne nokta; ID seçicilerinin önüne ise diyez karakterleri konmaktadır. Bu kadar basit mi? Aynen öyle..
Jquery Element Seçicileri
Javascript’te kullandığımız getElementsByTagName() metodunun Jquery versiyonudur.
Örneğin bir sayfadaki tüm h2 etiketlerini seçmek için
$('p’)
Seçicisi kullanılır.
Jquery Sınıf Seçicileri
Sınıf seçicileri, belli bir sınıf adına sahip tüm elementleri seçmeye yarayan Jquery seçicileridir. Örneğin
< p class=”deger”> metin </p >
Etiketindeki gibi deger sınıfına sahip elementleri seçmek için
$('.p’)
seçicisi kullanılır.
Özel Jquery Seçicileri
Jquery’nin seçicileri bu kadarla da sınırlı değil! Jquery ile;
-Jquery torun seçiciler (Jquery Descendent Selectors)
-Jquery çocuk seçiciler (Jquery Child Selectors)
-Jquery kardeş seçiciler (Jquery Sibling Selectors)
-Jquery özellik seçiciler (Jquery Attribute Selectors)
Seçicilerini kullanmanız da mümkündür.
Jquery Descendent Seçiciler
Örneğin divId id değerine sahip bir division içerisindeki tüm a etiketlerini seçmek istiyorsunuz. Bu gibi durumlarda Jquery torun seçicileri işağıdaki gibi kullanabilirsiniz.
< div id=”divId”>
< a> test 1</a >
< a> test 2</a >
< a> test 3</a >
</ div >
Kullanımı:
$(‘#divId a’)
Jquery Child Seçiciler
Örneğin < h1 > ve < p > etiketleri, html hiyerarşisi içerisinde < body > etiketinin altında bulunurlar ve child seçicileridirler ancak <p> etiketi içerisindeki < strong > etiketli (önemli olarak belirtilmiş) etiket içerisinde kalan metinler, < body > etiketinin doğrudan çocuk seçicileri olmayacaklardır çünkü <p > etiketi ile çevrelenmişlerdir. < body > etiketli içerisindeki tüm < h2 > etiketlerinin seçilmesi için aşağıdaki Jquery seçim işlemi uygulanabilir.
$(‘ body h2’)
Jquery Sibling Seçicileri
Arka arkaya gelen sibling (kardeş ) etiketlerin seçimi için kullanılır.
Örneğin açılır/kapanır paneliniz içerisinde bulunan < h2> etiketlerinizden sonraki < div > etiketlerini Jquery ile seçmek istiyorsanız, bu işlemi Jquery ile aşağıdaki gibi yapabilirsiniz
$(‘h2 + div’)
Jquery Attribute Seçicileri
Öncelikle ilk makalenin başından beri adını sık sık kullandığımız attribue (özellik) teriminin ne anlama geldiğini anlamalıyız. Örneğin;
< img alt=”resim”>
İmg etiketi içerisindeki alt ifadesi bir attribute (özellik) olarak adlandırılır.
Bu açıklamamızla ilişkili olarak; örneğin alt özelliği olan img etiketlerimizin tamamını Jquery ile seçmek istersek;
$('img[alt]')
Seçimi bize alt özelliği bulunan tüm resimleri seçmemizi sağlayacaktır.
Bir diğer attribute seçimi kullanımı ise, attribute değerinin belli bir değer olduğu etiketlerin seçimi için kullanılan aşağıdaki Jquery seçicisidir.
Örneğin bir htmk dökümanı içerisindeki tüm textbox kontrolerini bulabilmek için;
$('input[type="text"]')
Seçicisi kullanılabilir.
Örnek: Bir Sayfadaki Mail Adreslerini Bulmak
Bir sayfa içerisindeki mail adreslerini (mailto: ile başlayan) bulmak için yine Jquery attribute seçicileri kullanılabilir.
$('a[href^="mailto:"]')
Jquery seçicisi, bize href özelliği mailto: ile başlayan tüm a etiketlerini seçmemizi mümkün kılmaktadır.
Örnek: Bir Sayfadaki Pdf dosyalarını Bulmak
Bu örneğin çözümü için de, sonu .pdf uzantısı ile biten href özellikli a etiketlerini seçmemiz yeterli olacaktır. Sonu belli bir değer ile biten özelliklerin seçimi de Jquery ile aşağıdaki gibi yapılabilmektedir.
$('a[href$=".pdf"]')
Örnek: Belli Bir Adrese Yönlendirilen Linkleri Bulmak
Bu örneğin çözümü için de tahmin edebileceğiniz gibi, içerisinde (contains) belli bir metni barındıran özelliklerin Jquery ile seçilmesi yeterli olacaktır.
$('a[href*="reitix.com"]')
Jquery Filtreleri
Jquery, bize daha spesifik seçimler yaptırabilmeyi, içerisindeki filtre seçicileri ile de mümkün kılmaktadır.
Jquery even Filtresi
Bir grup etiket içerisinde 0,2,4... sıradaki etiketleri seçmemizi sağlar. Çok fazla sütuna sahip tablolama işlemlerindeki < tr> etiketlerine uygulanarak okuma kolaylığı sağlanması gibi işlemlerde oldukça kullanışlıdır.
Kullanımı: $('tr:even')
Jquery odd Filtresi
even filtresi gibi tekli indeks numaralarına sahip etiketleri seçebilmemizi sağlar.
Kullanımı: $('tr:odd)
Jquery first Filtresi
Bir grup etiket içerisinden ilkini seçmemize olanak tanır. Örneğin bir html dökümanı içerisindeki ilk < p > etiketini seçmek gibi işlemlerde kullanılabilir.
Kullanımı: $('p:first')
Jquery last Filtresi
Bir grup etiket içerisinden sonuncuyu seçmemize olanak tanır. Örneğin bir html dökümanı içerisindeki son < p > etiketini seçmek gibi işlemlerde kullanılabilir.
Kullanımı: $('p:last')
Jquery not Filtresi
Belli bir kriteri sağlamayan etiketlerin seçilmesi için kullanılır. Örneğin bir grup < p > etiketi içerisinden sınıfı (class) .sinif olmayan etiketleri seçmek için;
Kullanımı: $('p:not(.sinif)')
Jquery has Filtresi
Örneğin içerisinde < a > etiketi bulunan < li > etiketlerinin seçimi için kullanılabilir.
Kullanımı: $('li:has(a)')
Jquery contains Filtresi
İçerisinde belli bir metni barındıran etiketlerin seçimini sağlar. Örneğin içerisinde indir metni geçen bağlantıları seçmek için;
Kullanımı: $('a:contains(link)')
Jquery hidden Filtresi
Gizlenmiş elementleri seçebilmemize olanak tanır. Örneğin gizli linkleri seçmek için;
Kullanımı: $(' div:hidden')
Jquery visible Filtresi
Hidden filtresinin tersi olarak görünür olan tüm etiketleri seçmemizi sağlar. Örneğin bir html dökümanı içeririnseki tüm a etiketlerini gizlenmiş yapmak için aşağıdaki Jquery kodu kullanılabilir
Kullanımı: $('a:visible').hide();
Jquery ile Sayfaya içerik Eklemek
Jquery sayesinde, bir internet sitesine çalışma zamanı içerisinde metin eklemek, çıkarmak ya da değiştirmek gibi olanaklarımız da bulunmaktadır. Şimdi bunları nasıl gerçekleştirebileceğimize bakalım.
Jquery ile Etiketlerin Değerini Okumak
Elementler içerisindeki metinleri manipüle edebilmek için, sıklıkla mevcut metinlerini html ya da saf metin şeklinde öğrenmeye ihtiyaç duyarız. Bu işlemlerimizi gerçekleştirebilmek için ise aşağıdaki html sayfasını kullanarak örnekler üzerinden devam edelim.
< div id="wrapper" >
< div id="hatalar " ;>
< h2 > Hatalar:< /h2 >
< / div >
< / div >
Jquery .html: Herhangi bir seçim içerisindeki metinleri, html yapılarını koruyarak seçebilmemizi sağlar.
Örnek: alert($('#hatalar).html());
Jquery komutu çalıştırıldığında bize çıktı olarak,
< h2 >Hatalar:< /h2 >
Çıktısını verecektir.
Çalışma zamanı içerisinde gerçekleşecek bir hatayı hatalar div etiketinin içerisine html etiketleri ile birlikte eklemek için ise
$('#errors').html('< p > Bu sayfada üç hata bulunmuştur< /p > ');
Jquery komutunu işlememiz yeterli olacaktır. Bu işlemin sonunda ise html sayfamız aşağıdaki gibi olacaktır:
< div id="wrapper" >
< div id="hatalar">
< p > Bu sayfada üç hata bulunmuştur< /p >
< / div >
< / div >
Örnekten de görülebileeği gibi, daha önce < h2 > etiketi içerisinde bulunan başlık yerine < p > etiketi içerisindeki hata metnimiz gelmiştir. Özetle .html() fonksiyonu sayesinde, bir etiket içerisindeki metni belirleyebileceğimizi öğrenmiş bulunmaktayız.
Jquery .text: Herhangi bir seçim içerisindeki metinleri, html yapılarını olmadan seçebilmemizi sağlar.
Örnek: alert($('#hatalar).text());
Jquery komutu çalıştırıldığında bize çıktı olarak,
Hatalar:
Çıktısını verecektir. Uygulamada < h2 > html etiketlerinin kaybolduğunu siz de farketmişsinizdir.
Jquery .append(): Bir grup html etiketinin en sonuna ekleme yapmak için kullanılır.
Örneğin sayfamızda oluşan her yeni hatada, html sayfamızdaki hatalar id değerine sahip < div > etiketni tamamen güncellemek yerine sadece sonuna bir ekleme yapmak için:
$('#hatalar).append('< p > Yeni bir hata bulundu< /p>');
Jquery komutununişlenmesi sonucu html sayfamız aşağıdaki gibi olacaktır
< div id="wrapper">
< div id="hatalar">
< h2>Hatalar:< /h2>
< p> Yeni bir hata bulundu < /p>
< / div >
</ div >
Jquery .prepend(): Append metodundan farklı olarak, yeni eklemeleri en başa yapar.
Jquery .after(): Seçimin dışına ve hemen sonrasına bir güncelleme yapmamızı sağlar.
Jquery .after(): Seçimin dışına ve hemen öncesine bir güncelleme yapmamızı sağlar.
Jquery ile Silme Nasıl Yapılır?
Jquery ile herhangi bir seçimi sayfadan silmek için remove() metodu kullanılabilir.
Örneğin;
$('#popup').remove();
İşlemi sonucunda popup id değerine sahip etiket, html sayfasından silinecektir.
Jquery ile Değiştirme/Güncelleme Nasıl Yapılır?
Örneğin belli bir etiketin değerini tamamen değiştirmek için,
$('#sepet).replaceWith(< p>sepete eklendi< /p>');
Jquery komutu ile, sepet id değerine sahip elementin içerisindeki tüm değerler silinerek yerine < p> etiketi içerisinde sepete eklendi değeri gelecektir.
Jquery ve Sınıflar
Önceki örneklerde sık sık kullandığımız css sınıf seçimleri konusunda biraz daha derine inelim ve sınıf ekleme/çıkarma işlemlerini inceleyelim.
Jquery ile Sınıf Eklemek
addClass() metodu ile seçimlerimize sınıf ekleme işlemlerimizi geröekleştirebiliriz. Örneğin bir html dökümanındaki tüm linklere (http href değeri ile başlayan a etiketlerine) disari adında bir class eklemek için;
$('a[href^="http://"]').addClass(disari);
Jquery komutu kullanılabilir.
Jquery ile Sınıf Silmek
addClass() metodunun tersi olarak, removeClass() metodu ile, mevcut bir sınıfı seçimimizden kaldırabiliriz. Örneğin;
$('#uyari).removeClass('highlight');
Jquery komutu ile validate edilmiş bir girdinin uyarısı kaldırılabilir.
Jquery ile Sınıf Yoksa Eklemek ya da Varsa Kaldırmak
Varsa kaldır ya da yoksa ekle işlemlerine toggle adı verilmektedir. Uygulaması ise,
$('#dugme).click(function() {
$('body').toggleClass(class1);
});
Jquery komutu ile yapılabilir. Bu uygulamada, düğmeye her tıkama işleminde class1 sınıfı < body> etiketine varsa silinerek ya da yoksa eklenerek devam edecektir.
Jquery ile Css Özelliklerini Okumak ve Değiştirmek
Jquery sayesinde herhangi bir etikete ilşkin tüm css değerlerini okuyabilir ve güncelleyebiliriz. Uygulamasını yine bir örnekle gerçekleştirelim;
var renk = $('#main').css('background-color');
komutu ile renk adını verdiğimiz bir değişkene, main id değerine sahip etiketin arka plan rengini okuyarak atabiliriz.
Okuma işlemini gerçekleştirebildiğimiz gibi, jquery ile css değerlerini güncellememiz de mümkündür.
Örneğin, bir body etiketine font-size:200% css özelliği eklemek için;
$(' body ').css('font-size', '200%');
Jquery kodunu yazmamız yeterlidir.
Jquery ile Attribute Değiştirmek
Daha önce bahsettiğimiz Attribute (özellik) seçicilerinin değiştirilmesi işlemi de jquery ile kolayca gerçekleştirilebilmektedir. Örneğin banner id değerine sahip bir etiket içerisindeki tüm resimlerin src (kaynak) özelliklerini belli bir adres olarak değiştirmek için:
$('#banner img').attr('src','images/newImage.png');
Jquery kodunu kullanabiliriz.
Bu konuyla birlikte Javascript ve Jquery eğitimi kapsamlı 3. Makalemin de sonuna gelmiş bulunmaktayım. Sorularını yönelten tüm arkadaşların sorularını keyifle yanıtlamaya devam ediyorum.
Kalasınız sağlıcakla...