jQuery 2

attr()
.removeAttr()
.css()
.addClass()
.hasClass()
.removeClass()
.toggleClass()
.append()
.append to ()

---

.attr() -> Bu metod sayesinde seçtiğimiz nesnenin özniteliklerine ulaşabiliriz.

1	$('img').attr('title','okyanus');

Bu kod ile img nesnemizin title özniteliğini okyanus olarak değiştirdik. Eğer title nesnesi olmasaydı bile kendi ekleme yapacaktı.

1	<img src="resim.png" alt="" title="Gökyüzü" />

Başka bir örnek vermek gerekirse. xHTML standartlarına göre her resmin bir alt özniteliği olmalı. Siz sayfanızı yaparken buna dikkat etmediniz ve sonradan bunu düzeltmek istediniz. Tek tek bütün resimlere alt özniteliği eklemek yerine aşağıdaki kod ile tüm resimlerine boş bir alt özniteliği eklemiş olursunuz ki buda xHTML standartları için uygundur.

1	$('img').attr('alt','');

// Sayfadaki tüm img nesnelerine alt özniteliği eklendi.

.removeAttr() -> Kullanımı attr() metodu gibidir. Adından da anlaşıldığı gibi seçtiğimiz nesnenin özniteliğini siler.
.css() -> Daha önceki derslerimizde de sık sık kullandığımız bu özellik seçtiğimiz nesnenin css özelliklerine değiştirmemize yarar.
Tek özellik kullanımı için:

1	$('a').css('text-decoration','none');

Çoklu özellik kullanımı için

1 2 3 4 5 6

$('a').css({ 'text-decoration':'none', 'color':'red' });

jQuery de bir metod içine çoklu özellik tanımı yapacaksak bunu süslü parantezler içinde ve yukarıda şekilde yaparız.
.addClass() -> Yine çok kullandığımız bir metottur. Seçtiğimiz nesneye daha önceden tanımlı bir class atar.
.hasClass() -> Seçtiğimiz nesnenin içinde belirlediğimiz class‘ın olup olmadığına bakar. Sonuç True yada False olarak döner.
.removeClass() -> Seçtiğimiz nesne içindeki belirlediğimiz class‘ı siler.
.toggleClass() -> Seçtiğimiz nesne içinde belirlediğimiz class varsa onu siler yoksa ekler.

1	$('p').toggleClass('yazi');

p nesnesi içinde yazi classi varsa siler yoksa ekler.

.append() nedir?

Append fonskiynonu belirtilen bir nesne üzerininin sonuna html tagı veya metin eklemeye yarar. (Detaylı bilgi jquery.com)

.append() nasıl kullanılır ?

Kodlarla örnek gösterecek olursak ufak bir html kodu oluşturuyoruz.

?

1 2 3 4

<div class="cerceve"> <h1>jQuery .append()</h1> <p class="metin">Soru : jQuery append</p> </div><!-- cerceve DIV Kapanış -->

Şimdi ise bu html kodları üzerinde oynama append() fonksiyonu yapıyoruz.

?

1 2 3 4 5 6 7

$(document).ready(function(){ $('div.cerceve h1').append(' ~ aycan.net'); $('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>'); $('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>'); });

Kodları tek tek açıklayacak olursak ;

?

1	$(document).ready(function(){ .. }

Sayda yüklendiğinde

?

1	$('div.cerceve h1').append(' ~ aycan.net');

Class’ı cerceve olan div’in içerisindeki h1 tagının içine append komutu ile ‘ ~ aycan.net’ text değerini yazdırıyoruz.

?

1	$('div.cerceve p').append('<b>nedir? <br> Cevap : Ne bileyim ben arkadaş!</b>');

Class’ı cerceve olan div’in içerisindeki p tagının içine ‘<strong>nedir? <br> Cevap : Ne bileyim ben arkadaş!</strong>’ bu değerini yazdırıyoruz.

?

1	$('div.cerceve').append('<h1><a href="http://www.aycan.net/"><img src="http://www.aycan.net/wp-content/themes/headlines/images/logo.png" alt="aycan logo"/></a>');

ve birde reklam şart diyerek kendi logomuzu yeni bir h1 tagı > a tagı > img tagı bastırıyoruz.
Ön izleme;

Örnek : jQuery append uygulaması

.appendTo() nedir?

AppendTo fonskiyonu seçilen nesnenin sonuna bir html tagı olmak şartıyla bir nesne ekler. Deneme yanılma yönetimi ile bu sonuca vardım Html tag kullanmadan düz metin değerleri ekleme işleminde kullanmıyor. Ayrıca yazımıda biraz değişik.(Detaylı bilgi jquery.com)

.appendTo() nasıl kullanılır ?

?

1	$('<htmlTagi>Eklenecek icerik</htmlTagi>').appendTo('eklenecek nesne ')

Yani mantık kurarsak “Şunu” , “Şunun sonuna ekle” gibi bir mantığa ulaşıyoruz.
Html kodumuz ;

?

1 2 3 4

<div class="cerceve"> <h1>jQuery .appendTo()'da değişik birşey </h1> <p class="metin">Hınk ?</p> </div><!-- cerceve DIV Kapanış -->

Js kodlarımız ;

?

1 2 3 4 5 6 7

$(document).ready(function(){ $('<b> var!</b>').appendTo('div.cerceve h1'); $('<p>Farketmedin mi ?</p>').appendTo('div.cerceve'); $('<p>İşleyişi farklı</p>').appendTo('div.cerceve'); });

Kodları tek tek açıklıyoruz.

?

1	$('<b> var!</b>').appendTo('div.cerceve h1');

H1 tagının içine ‘Var!’ diye text yazdırıyoruz.

?

1	$('<p>Farketmedin mi ?</p>').appendTo('div.cerceve');

Cerceve claslı div’in sonuna p tagı ekliyoruz ve bundan sonraki işlemde aynıdır.