21.05.2013

Webmaster Dersleri-Jquery Dersleri 2

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...

Webmaster Dersleri-Jquery Dersleri 2
Bu makalenin telif hakkı ve tüm sorumlulukları yazara ait olup, şikayetler için lütfen bizimle iletişime geçiniz.
URL:
Etiketler:

Bu makale 4737 kez okundu

21.05.2013 tarihinde yazıldı
Reitix

Yorumlar

  • serkan1905
    28.06.2018

    jquery ile yapılabilecekleri araştırdıkça halen şaşırabiliyorum, bu kadar kolay bir syntax ile bu kadar çok kütüphane üretilebilmiş olması ve uygulamasının bu kadar pratik olması bence devrimsel bir teknoloji

  • mbektas
    19.12.2015

    aslında css seçicilerinden hiç bir farkı yok, sadece jwuery kullanarak kendi syntax'ı ile ilgili elemanları seçiyoruz ve dilediğimiz işlemi yaptırıyoruz, güzel yazınız için teşekkürler

Bu yazıya siz de yorum yapabilirsiniz

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.