Bu yazımızda, oluşturduğumuz içerikte geçen herhangi bir kelimeye link vereceğiz. Bu tip uygulamaları özellikle haber sitelerinde görmeniz mümkün, içerik içindeki kelimelerin bazılarında link vardır ve bu linkler genellikle reklam içerir.
Bu işi içeriğinizi oluştururken çözmeniz de mümkün tabii... Fakat bu durumda her kelime için ayrı ayrı link vermeniz gerekecek... Oysa bu uygulama sayesinde, siz normal içeriğinizi yazıp yayınlarsınız, kullanıcı içeriğinizi okumaya geldiğinde, jQuery değişikliği sizin için otomatik olarak yapar
Uygulamaya geçmeden önce jQuery içinde kullandığımız "Yer/Nesne Bulma" fonksiyonlarına da kısaca bir göz atalım, ve bu fonksiyonlardan ".contents" den de yararlanarak ilk uygulamamızı yapalım.
Not: Bu uygulama için illa ".contents" kullanmanıza gerek yok, 2. ve 3. uygulamalarda başka teknikler kullanılmıştır, aslında 1. uygulamada da ".contents" fonksiyonuna gerek yoktu, fakat bu örnekte dikkat çekmek istediğim başka bir konu var.
Yer/Nesne bulma fonksiyonları:
- .add(): //Seçili nesneye yeni bir nesne ekler.
- .children(): //Nesnenin içerisindeki alt nesnelere erişmeye yarar.
- .closest(): //En yakın blok nesneleri seçer.
- .contents(): //Nesne içindeki alt nesneleri bulmaya yarar. .children ile aynıdır fakat text düğümlerini ve de html elemanlarını da dahil eder
- .find(): //Seçici içindeki nesneleri bulur.
- .next() ://Sonraki nesneyi seçer.
- .nextAll(): //Belirtilen nesneden sonraki bütün nesneleri seçer.
- .nextUntil(): //Başlangıç nesnesi ile bitiş nesnesi arasındaki nesneleri seçer.
- .prev(): //Bir önceki nesneyi seçer.
- .prevAll(): //Önceki tüm nesneleri seçer
- .prevUntil(): //Önceki nesneleri belirtilen yere kadar bulmaya yarar
- .offsetParent(): //Seçilen nesnenin birinci parent nesnesini seçer.
- .parent(): //Belirtilen bir üst düzey nesnesini seçer.
- .parents(): //Bir nesnenin bütün üst düzey nesnelerini seçer.
- .parentsUntil(): //Bir nesnenşn üst düzey nesnelerini belirtilen nesneye kadar bulmaya yarar.
- .siblings(): //Bir nesnenin kardeş nesnelerini bulmaya yarar.
- .addBack(): //Girilen seçimin üstüne bir önceki nesneyi de ekler. (".andSelf()" 1.8'den itibaren depreceted olmuştur, onun yerine ".addBack()" kullanılmalıdır.)
- .end(): //Belirtilen seçiciye yapılan mnipüle işlemini iptal eder.
Uygulama-1:
"Buradaki yazımız normal bir içerik halinde yazıldı, fakat arada sırada pinusart kelimesi bu yazı içinde geçiyor. Benim amacım pinusart geçen kelimelere link vermek, bunun için yazı içinde herhangi bir ekleme yapmıyorum, sadece pinusart geçen kelimeleri link("a") içine almasını sağlıyorum"
HTML yapısı:
<div>
<p id="changeWord">"Buradaki yazımız normal bir içerik halinde yazıldı, fakat arada sırada pinusart kelimesi bu yazı içinde geçiyor.
Benim amacım pinusart geçen kelimelere link vermek, bunun için yazı içinde herhangi bir ekleme yapmıyorum, sadece pinusart geçen kelimeleri
link("a") içine almasını sağlıyorum"</p>
</div>
Javascript kodları:
<script type="text/javascript">
$(document).ready(function(){
var yeniYazi = $('#changeWord').contents().text().replace(/pinusart/ig,'<a href="http://www.pinusart.com" target="_blank">pinusart.</a>');
$('#changeWord').html(yeniYazi).wrap('<em></em>');
});
</script>
Açıklamalar:
- 3. Bu kodlamada ".contents" yerine ".html()" fonksiyonunu kullanıp kodu biraz daha kısaltılabilirdik, fakat bu kodla ".contents()" ve ".children()" arasındaki farkı da göstermiş olduk, eğer burada ".contents()" yerine ".children ()"kullanmış olsaydık, sonuç alamayacaktık, ".contents()" text düğümlerini de bulduğu için problem çıkmadı
- 3. "yeniYazi" değişkenine değişirilmiş içeriği atıyoruz. Önemli: Değişim yapılacak kelime desenindeki "i" harfi ile "küçük büyük" harf duyarsız(Yani büyük harf de olsa, küçük harf de olsa) olarak arama yapması, "g" harfi ile de tüm içeriği tarayıp değişim yapması isteniyor, eğer "g" kullanmasaydık, sadece ilk gördüğü yerde değişimi yapacaktı
- 4. İçeriğin yeni halini esas yerine (#changeWord) yazdırıp, .wrap() fonksiyonuylada "em" içine alıyoruz
Uygulama-2:
"Buradaki yazımızda link vereceğimiz kelimeleri "span" içine aldık ve pinusart kelimelerine link verdik. Bu da diğer linkimiz pinusart"
HTML yapısı:
<div>
<p id="changeWord2">"Buradaki yazımızda link vereceğimiz kelimeleri "span" içine aldık ve <span>pinusart</span> kelimelerine link verdik. Bu da diğer linkimiz <span>pinusart</span>"</p>
</div>
Javascript kodları:
<script type="text/javascript">
$(document).ready(function(){
$("#changeWord2 span").replaceWith('<a href="http://www.pinusart.com" target="_blank" title="Pinusart">pinusart</a>');
});
</script>
Uygulama-3:
"Bu yazımızda da birinci örneğimizde olduğu gibi ".replace" metodu kullandık, pinusart kelimeleri "span" içine alınmamıştır, bir diğer linkimiz: pinusart."
HTML yapısı:
<div>
<p id="changeWord3">"Bu yazımızda da birinci örneğimizde olduğu gibi ".replace" metodu kullandık, pinusart kelimeleri "span" içine alınmamıştır, bir diğer linkimiz: pinusart."</p>
</div>
Javascript kodları:
<script type="text/javascript">
$(document).ready(function(){
$("#changeWord3").html($("#changeWord3").html().replace(/pinusart/ig, '<a href="http://www.pinusart.com" title="pinusart" target="_blank">pinusart</a>'));
});
</script>
Kolay gelsin, görüşmek üzere...
