Kodlama / jQuery

Tarih03 Temmuz 2017, 03:00
Yorumlar0 Yorum

jQuery - Nesne Özellikleri

HTML öğelerimizin DOM özelliklerine erişerek jQuery ile bu özellikler üzerinde çalışabilmeyi inceleyeceğiz.

 

Bir HTML öğesine ait DOM özelliklerine ulaşmamızı sağlayacak fonksiyonları tek tek inceleyeceğiz. Doğrudan gitmek istediğiniz fonksiyon için aşağıdaki fonksiyonlardan üstüne tıklamanız yeterlidir.


Başa Dön

addClass();

Açıklama

Fonksiyonumuz adından da anlaşılacağı üzere bir nesneye class özelliği atamamızı sağlıyor. Örneğimizde detaylıca inceliyoruz.

Kullanım

Elimizde aşağıdaki gibi bir HTML kodumuz olsun.

<p>Merhaba</p>
<p><b>jQuery eğitim seti</b>mize hoşgeldiniz.</p>
<p>6. Dersimizde <b>Nesne Özellikleri</b> konusunu işliyoruz.</p>

Bu HTML kodumuzun içerisinde herhangi bir class öğesi tanımlamadık. Fakat CSS kodlarımızda şöyle bir kodumuz var.

.farkliRenk {color: red;}

Bu HTML kodumun içerisinde yer verdiğim ve b etiketi içerisinde aldığım "Nesne Özellikleri" metninin rengini kırmızı yapmak istiyorum. Bunu önceki derslerimizde gördüğümüz css() methodu ile yapabiliriz. Fakat biz tek bir özellik eklemek yerine birbiri ile bağlantılı birçok özellik eklemek istediğimizde bize karmakarışık bir hal alan kod sunacaktır. Bunun yerine eğer ben bu b etiketime class olarak farkliRenk'i eklersem sorunu çözmüş olurum. İşte bunu şöyle yapabiliriz;

$("p").last().children("b").addClass("farkliRenk");

Önceki derslerimizde gördüğümüz last() ve children() methodlarının yardımı ile addClass() methodumuzu ekliyoruz ve bu sayede artık aşağıdaki gibi bir çıktıya sahibiz;

Merhaba

jQuery eğitim setimize hoşgeldiniz.

6. Dersimizde Nesne Özellikleri konusunu işliyoruz.


Başa Dön

attr();

Açıklama

Bir HTML nesnesinin içerdiği herhangi bir özelliğe ulaşmayı sağlar. Attribute açılımından gelmektedir.

Kullanım

Elimizde aşağıdaki gibi bir HTML kodumuz olsun.

<p>6. Dersimizde <b class="mert">Nesne Özellikleri</b> konusunu işliyoruz.</p>

Bu oluşturduğumuz alanda b etiketinin içerdiği class öğesine şöyle ulaşabiliriz;

$("p").children("b").attr("class");

Bu sayede eğer alert() komutu ile ekrana verirsekte göreceğimiz gibi mert çıktısını bize verecektir. Burada illa class özelliğine ulaşabiliriz gibi bir sonuca varmayın. Şöyle bir resim kodumuzu da inceleyebiliriz;

<img src="images/logo.png" alt="Logo" title="Logo" />

Bu resme ait src özelliğine yine aynı mantıkta şu şekilde ulaşabiliriz;

$("img").attr("src");

Yani çıktı olarak images/logo.png verecektir.


Başa Dön

hasClass();

Açıklama

Bir HTML nesnesinin belirtilen class adını taşıyıp taşımadığını kontrol edebilirsiniz. Sonuçları true/false olarak döndürecektir.

Kullanım

Elimizde önceki örneğimizde de kullandığımız resim kodumuza class eklenmiş versiyonu olsun.

<img src="images/logo.png" class="mert topuz" alt="Logo" title="Logo" />

Bu kodumuz mert ve topuz olarak 2 farklı class divine sahip. Şimdi bu fonksiyonumuzu aşağıdaki gibi kontrolden geçirebiliriz.

$("img").hasClass("mert"); // TRUE
$("img").hasClass("topuz"); // TRUE
$("img").hasClass("deneme"); // FALSE

Belirttiğimiz üzere mert ve topuz isimlerine sahip classları içerdiği için TRUE döndürdü. Lakin deneme isimli bir classa sahip olmadığı için false döndürdü


Başa Dön

html();

Açıklama

Belirtilen bir etiketin içerisindeki kodları HTML formatında göstermektedir.

Kullanım

Elimizde aşağıdaki gibi bir divimiz kodumuz olsun.

<div class="mert"><b>Mesaj</b> İçeriği</div>

Bu mert classının içerisindekine doğrudan ulaşmak istersek şöyle bir yol izlememiz gerekecektir;

$(".mert").html();

Bu komut bize çıktısını yaparken <b></b> etiketleri ile yapacaktır. Yani:

<b>Mesaj</b> İçeriği

olarak döndürülecektir.


Başa Dön

prop();

Açıklama

prop() methodu temelde attr() methodu ile aynı işi yapıyor gibi gözükmektedir. Yani bir öğeye ait herhangi bir özelliği çekiyoruz. Lakin aşağıdaki örneğimizi incelersek daha iyi anlayacağız.

Kullanım

Elimizde aşağıdaki gibi bir onay butonumuz var.

<input type="checkbox" name="check" checked> Onaylıyorum

Bu onay kutusundan işareti kaldırdığımız an bize ne döndürülecektir? Yani eğer biz jQuery ile şunu alırsak;

$("input").prop("checked");

Bize checked özelliğinin eşitliğini iletecektir. Başlangıç için bu değerimiz false olacaktır. İşte bunun için aşağıdaki görseli inceleyelim;

Tablodan da anlaşıldığı üzere prop() ile anlık olarak yeni gelen değeri görürken attr ile başlangıçta belirtilmiş checked ya da eğer belirtmemişsek undefined değerlerini görmemiz mümkün.


Başa Dön

removeAttr();

Açıklama

Herhangi bir nesneye ait herhangi bir özelliği kaldırmamıza olanak tanır..

Kullanım

Elimizde aşağıdaki gibi bir alt öğesine sahip bir resmimiz olsun.

<img src="images/logo.png" class="mert topuz" alt="Logo" title="Logo" />

Resme ait olan alt değerini kaldırmak içinse şöyle bir yapı oluşturmamız yeterlidir.

$("img").removeAttr("alt");

Böylece img etiketine sahip nesnenin alt öğesini kaldırmış olduk.


Başa Dön

removeClass();

Açıklama

Herhangi bir nesneye ait class özelliği kaldırmamıza olanak tanır.

Kullanım

Elimizde aşağıdaki gibi class öğesine sahip bir resmimiz olsun.

<img src="images/logo.png" class="mert topuz" alt="Logo" title="Logo" />

Resme ait olan topuz classını kaldırmak içinse şöyle bir yapı oluşturmamız yeterlidir.

$("img").removeClass("topuz");

Böylece img etiketine sahip nesnenin yalnızca mert adında bir classı kalacaktır. topuz adındaki classını kaldırmış olduk.


Başa Dön

removeProp();

Açıklama

Herhangi bir nesneye ait herhangi bir özelliği kaldırmamıza olanak tanır. Bu özelliği sonradan eklemiş olabilirsiniz.

Kullanım

Herhangi bir nesneye prop ile atanan özelliği kaldırmamızı sağlar.

$oge.prop("color", "red");
$oge.removeProp("color");

Böylece oge artık color adında bir özelliğe sahip değil.


Başa Dön

toggleClass();

Açıklama

Herhangi bir nesnenin 2 ve katlarında tekrarlanan olaylarıdır.

Kullanım

Elimizde şöyle bir nesnemiz olsun.

<b>Mert Topuz - jQuery Dersleri</b>

Birde bir class oluşturup kırmızı rengini verelim (stil dosyamızda).

.farkliRenk {color: red;}

Şimdi jQuery ile tıklandıkça sırasıyla kırmızı-siyah-kırmızı-siyah şeklinde gidecek şekilde ayarlayalım;

$("b").click(function(){
	$("b").toggleClass("farkliRenk");
});

Buradaki click() methoduna takılmayın, tıklandığında gerçekleşecek olaydan haberdar etmektedir. İçinde yer alan toggleClass ile her tıklandığında içindeki classı sırasıyla bir ekleyecek bir kaldıracaktır. Bu durumda renk bir gelecek bir gidecektir.


Başa Dön

val();

Açıklama

Herhangi bir nesnenin value değerine ulaşabilirsiniz.

Kullanım

Elimizde şöyle bir input nesnemiz olsun.

<input type="text" name="isim" value="Mert">

Bu nesnemizin value değerini almak için val methodunu

$("input").val();

bu şekilde kullanmamız yeterlidir.

Yorumlar
Bu konu hakkında henüz kimse fikrini belirtmemiş. Siz fikrinizi belirtmek ister misiniz?
Konu hakkında düşüncelerinizi iletin