Üye Kayıt Üye Giriş

jQuery Öznitelikler [.attr() .css() .addClass()]


jQuery Öznitelikler [.attr() .css() .addClass()]

 

 

 

Arkadaşlar şimdi jQuery ile DOM nesnelerinin nasıl manipüle edileceğini öğreneceğiniz. Yani nesneler ile nasıl oynanır nasıl özellikleri değiştirilir yada yeni özellikler eklenir bunları göreceğiz. Yine metodun kısa açıklamasını vereceğim ve sonra örnekle açıklayacağım.

 

.attr()

.removeAttr()

.css()

.addClass()

.hasClass()

.removeClass()

.toggleClass()

 

 

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

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER