Öncelikle merhaba arkadaş. Bu yazımızda JQuery Attributes komutlarından ilkini incelemeye çalışacağız. Attributes yani öznitelikler bildiğiniz gibi HTML elemanlarının sahip oldukları özelliklerdir. Bizde şimdi bu özniteliklleri nasıl alabileceğimizi ve nasıl değiştirebileceğimizi incelemeye çalışacağız.
JQuery içerisinde toplamda 8 adet öznitelik komutu bulunmaktadır. Bunlar
.addClass(), .attr(), .hasClass(), .html(), .removeAttr(), .removeClass(), .toggleClass() ve .val() komutlarını göreceğiz. Diğer her bir komutu ise önümüzdeki günlerde Attibutes yazı dizisinde göreceğiz. Sözü fazla uzatmadan kodlamaya başlamakda fayda var.
.addClass()
bu komut içerisine parametre olarak verdiğimiz bir veya daha fazla sınıf(class) adını elemente eklememizi sağlar.
Hemen örneğimize gececek olursak.
< html>
< head>
< style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
< script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
< script type="text/javascript" language="javascript">
$("p:last").addClass("selected");
< /script>
< /head>
< body>
Merhaba
ve
iyi günler
< /body>
< /html>
Burada script src ile jquery dosyasını google üzerinden alıyoruz tabiki biz bunu kendi hostumuzada koyabiliriz burası bize kalmış.
Yukarıda sizinde dikkat ettiğiniz gibi $("p:last") ifadesiyle öncelikle nesnemiz bulunuyor dahs sonra ise .addClass("selected") diyerekte yukarıda tanımladığımız css den selected özniteliğini p nesnelerimizin en sonuncu olan yani "iyi günler" paragrafına ekliyoruz.
Sayfamızın görünümü ise şöyle olacaktır.
Şimdi ise aynı anda nasıl iki tane attributes(öznitelik) ekleyebiliriz ona bakalım. Aslında iki öznitelik eklemekde çok kolay sadece yapmamaız gereken özniteliklerin aralarına boşluk koyarak ard arda yazmak. Kodumuza bir göz atalım.
< html>
< head>
< style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
< /style>
< script src="http://code.jquery.com/jquery-latest.min.js">
< /head>
< body>
Merhaba
ve
iyi günler
< script>$("p:last").addClass("selected highlighted");< /script>
< /body>
< /html>
Sizinde göreceğiniz üzere buradaki tek fark özniteliklerin arlarına boşluk bırakarak ard arda yazmamızdır.
HTML çıktımız ise şu şekilde olacaktır.
Bu yazımızda .addClass() komutunu gördük. Umarım faydalı olmuştur. Bundan sonraki yazımızda ise .attr() komutunu göreceğiz.
İbrahim Bayır
c184ab14-047b-48ed-97e9-a181e63fea69|1|5.0
JQuery
jquery, jquery attributes, jquery addclass