Sep.06

Hızlandırılmış jQuery 3 Dersleri : Attributes (Özellikler) ve Styles (Stiller)

HTML5’te hemen hemen her bir elementin mutlaka bir özelliği, yani attribute’u olmalıdır. Mesela aşağıdaki kodu ele alalım…

<h1 class=”baslik” >Merhaba</h1>

Bu kodumuzda bir adet class attribute’u yer almaktadır. Ayrıca etiketler arasında yer alan “Merhaba” yazısı da bir özellik ifade etmektedir.

Şimdi jQuery ile class özelliğini değiştirecek, yeni class değerleri ekleyecek ve elementin içeriğini değiştireceğiz. Yazacağımız kodlar, yukarıda yer alan örnek kod satırı referans alınarak yapılacak.

Elementin Class’ına Yeni Değer Eklemek

Bir elementin class’ında birden fazla class tanımlaması olabileceğini biliyoruz. Elementin class özelliğini isterseniz bir önceki örnekte gördüğünüz .attr() metodu ile komple değiştirebilirsiniz. Ancak eğer elementin var olan class özelliğini bilmiyorsanız ve bilmediğiniz halde ekleme yapmak istiyorsanız .addClass() metodunu kullanmalısınız.

Parametre olarak eklemek istediğiniz özelliğin adını string olarak girmelisiniz.

$('h1').addClass('kalin');
console.log($('h1').attr('class'));
// baslik kalin

Bu komutun sonucu bize baslik kalin olarak gelecektir.

Elementin Class’ından Değer Silmek

Eğer elementin class’ından bir değer silmek isterseniz .removeClass() metodunu kullanabilirsiniz. Kullanımı aynı yukarıdaki örnekteki gibidir, ancak tersi işlem yapar.

$('h1').removeClass('baslik');
console.log($('h1').attr('class'));
// 

Bu komut bize boş değer döndürecektir. Çünkü zaten tek bir tane baslik değeri vardı ve bu değeri de kaldırdık. Sonuç olarak class değeri boş olacaktır.

Elementin Özelliğini (Attribute) Okumak

console.log($('h1').attr('class'));
// baslik

Bir elementin attribute değerini okumak için .attr() metodundan faydalanılır. Parametre olarak seçtiğiniz elementin attribute ismini girmeniz yeterlidir. Görmek istediğimiz attribute ise class’tır. Bu komut bize baslik değerini konsolda yazdırır.

Elementin Özelliğini Değiştirmek

console.log($('h1').attr('class'));
// baslik

Bir elementin attribute değerini değiştirme için yine .attr() metodundan faydalanılır. İkinci parametre olarak string olarak attribute değerini girerseniz, birinci parametre olarak verdiğiniz attribute değeri üzerine yazacaktır.

console.log($('h1').attr('class'));
// baslik
$('h1').attr('class', 'altbaslik');
console.log($('h1').attr('class'));
// altbaslik

Yazdığımız kod ile ilk olarak h1 elementinin class değerini yazdırıyoruz, sonuç bize baslik olarak dönüyor. İkinci kodumuzda ise class değerini altbaslik olarak değiştirip tekrar konsolda yazdırıyoruz. Bu sefer yeni değeri altbaslik gelmiş oluyor.

Eğer baslik ve altbaslik için CSS tanımladıysanız, elementin stili de değişmiş olacaktır.

Element’e Yeni Özellik Eklemek

Yine .attr() metodundan faydalanacağız. Birinci parametre olarak eklemek istediğimiz yeni attribute ismini birinci parametre, değerini de ikinci parametre olarak belirtiyoruz. Örneğimizde h1 elementine bir id ataması yapalım.

$('h1').attr('id', 'baslik1');

Elementin id’si baslik1 olacaktır. Sonuç aşağıdaki gibi değişecek.

<h1 class="baslik" id="baslik1">Merhaba</h1>

İsterseniz aynı işlem için .prop() metodundan da faydalanabilirsiniz. İkisi de aynı sonucu verir.

$('h1').prop('id', 'baslik1');

Elementten Özellik Kaldırmak

Elementten, ismi bilinen bir özelliği (attribute) kaldırmak için .removeAttr() metodu kullanılır. Parametre olarak string şeklinde kaldırılacak olan özelliğin adı girilir.

<h1 class="baslik" id="baslik1">Merhaba</h1>

Bu şekilde kodumuzdan devam edelim. h1 etiketinden id’yi kaldıralım.

$('h1').removeAttr('id');

Sonuç aşağıdaki gibi olacaktır.

<h1 class="baslik" >Merhaba</h1>

Elementte Bir Özelliğin Olup Olmadığını Kontrol Etmek

Elementte bir özelliğin var olup olmadığını kontrol etmek için .hasAttr() metodu kullanılır. Parametre olarak string halinde, hangi attribute değeri olacağı belirtilir. Bir if koşulu ile kullanılır. Şimdi biraz daha gelişmiş bir örnek yapalım. Örneğimizde bir listemiz olsun. Listede, hangi satır tıklanırsa, o satırın rengi kırmızı olsun. Tekrar tıklanırsa da tekrar normal haline dönsün.

Öncelikle basit bir CSS yazalım.

li[secildi] {
	color: red;
}

Şimdi de HTML5 ile listemizi oluşturalım.

<ul>
  <li>Satır 1</li>
  <li>Satır 2</li>
  <li>Satır 3</li>
</ul>

Yazdığımız bu stil, li elementinde eğer secildi adında (herhangi bir değeri olmayan) bir özellik (attribute) varsa, onun yazı rengini kırmızı yapacak.

$('li').click(function() {
     if($(this).attr("secildi")==undefined){
          $(this).attr("secildi","");
     }else{
           $(this).removeAttr("secildi");
     }
});

Yazdığımız bu jQuery kodunda da li elementine .click() metodunu ile Mouse’un tıklanma olayını ekledik. Yani her bir li elementi tıklanabilecek. Hangi li elementinin tıklandığını da $(this) metodu ile algılayabiliyoruz. Bir if koşulu içerisinde $(this) ile hangi element tıklandıysa onu hedefleyip (target), onun da .attr(“secildi) metodu ile de secildi özelliğini almaya çalışıyoruz. Eğer elementin secildi özelliği yoksa undefined olarak dönecektir. If koşulumuzda da zaten bu değer undefined mi diye bakıyoruz, yani “secildi isminde bir özellik yoksa” olarak koşulumuzu sağlıyoruz. If bloğuna da girip secildi attribute değerini atıyoruz. İkinci parametresini “” ile boş olarak tanımladık, çünkü herhangi bir value, yani değer atamayacağız. Else bloğunda da “secildi isminde bir özellik varsa” koşulu sağlandığı için removeAttr() ile secildi özelliğini kaldırıyoruz. Böylece hangi li elementi tıklanırsa tıklansın, kırmızı hale gelecek, tekrar tıklanırsa normal haline dönecek. Aşağıdaki ekran görüntüsünde, ilk iki satır tıklanıp seçilmiş.

Element Değerlerini Okumak

Yazdığımız örneğimizde elementin içindeki değer “Merhaba”’dır. Bu değeri jQuery’de birkaç metot ile okuyabiliriz, örnek üzerinde göreceğiz. Aynı şekilde bu metot ile çeşitli form elemanlarının içeriklerini de okuyabiliriz. Örneğimizi biraz daha genişletip bir input text, bir de checkbox ekleyelim.

<h1>Merhaba</h1>
<input type="text" id="metin">
<br><br>
<input type="checkbox" id="secim" name="secim" >
<label for="secim">Seçim</label>
<br><br>
<button>Değerleri Yazdır</button>

Görüldüğü üzere birkaç element ekledik. Bold ile yazılı olanlar, jQuery’de target’lenecek olan referansları belirtiyor, yani örneğimizde bu şekilde yapacağız. Siz dilerseniz başka türlüsünü de yapabilirsiniz.

$("button").click(function(){
 console.log( "<h1> etiketinin değeri : " + $("h1").text() );
 console.log( "Input Text'e girilen metin : " + $("#metin").val() );
 console.log( "Checkbox'ın seçim durumu : " + $("#secim").is(":checked") );
});

Eğer bir elementin içeriği alınacaksa .text() metodu kullanılır.

Eğer bir input text gibi form elemanı kullanılıyorsa, onun da değeri .val() ile alınır.

Eğer checkbox gibi bir elementin değeri alınacaksa, seçili olup olmadığını .is(“checked”) gibi bir metot ile alabiliriz. Bu metot bize true veya false sonucunu verecektir.
Butona tıkladığımızda konsolda her bir elementin değeri yazdırılacak.

Elementin Ölçülerini Almak ve Değiştirmek

Bir elementin genişlik ve yükseklik değerini, eğer CSS’inde tanımlanmışsa direkt olarak .css() metodu ile okuyabiliriz. Aşağıdaki gibi basit bir div elementimiz olsun. Ölçüleri de style içerisinde tanımlanmış olsun.

<div style="height:40px;width:100px;border:1px solid black">
</div>

Bu div’in yükseklik ölçüsünü öğrenmek istersek aşağıdaki gibi .css() metoduna öğrenmek istediğimiz stil özelliğini yazmalıyız.

console.log( $("div").css("width") );
// 100px

Bu komut bize 100px değerini verecektir.

Ancak eğer div’e bir ölçü koyulmamışsa, yani içinde yer alan nesnelere ve verilere göre kendini otomatik olarak ölçeklendiriyorsa, bu sefer stil değerini alamazsınız. Bunun yerine genişlik için .width(), yükseklik için de .height() metotlarından faydalanmalısınız.

<img src="berserk.jpg" />

Örneğimizde bir img etiketi kullanalım ve resim yükleyelim. Sonrasında da jQuery ile bu resmin ölçülerini alalım.

console.log( "<img> etiketinin genişliği : " , $("img").width() );
console.log( "<img> etiketinin yüksekliği : " , $("img").height() );

Konsolda aşağıdaki gibi değerler yazdırılacaktır. Dikkat edin birim yazdırılmadı, default olarak birim değeri px’dir.

<img> etiketinin genişliği :  350
<img> etiketinin yüksekliği :  260

Elementin Konumunu Almak ve Değiştirmek

Bir elementin konumunu almak için .position() metodundan faydalanılır. Bu metot içinden de .left veya .top alt metotları ile nesnenin üstten ve soldan değerleri alınabilir. Koordinat sisteminin orijin noktasının, yani 0,0 noktasının sol süt köşe olduğunu unutmayalım.

Aynı resim etiketi üzerinden devam edelim…

console.log( "<img> etiketinin sol mesafesi : " , $("img").position().left );
console.log( "<img> etiketinin üst mesafesi : " , $("img").position().top );

Bu komut bize aşağıdaki gibi sonuç verecektir.

<img> etiketinin sol mesafesi :  7.997159004211426
<img> etiketinin üst mesafesi :  79.23294830322266

Konumu değiştirmek için de iki farklı yöntemimiz var. Birincisi yine .css() metodundan faydalanıp top ve left konumlarını vermek olacaktır. Mesela;

$("img").css( { position: 'relative', top:200, left:100 } );

Burada bir Obje olarak position, top ve left değerleri atandı.

Diğer metodumuzda ise jQuery’nin .offset() metodundan faydalanacağız. Bu metot, var olan konumundan öteleme yapar. Önceki konumlarını sıfırlar, diğer üst elementleri görmezden gelir.

console.log( "<img> etiketinin sol mesafesi : " , $("img").position().left );
console.log( "<img> etiketinin üst mesafesi : " , $("img").position().top );
$("img").offset( { left: 30, top: 10} );
console.log( "<img> etiketinin sol mesafesi : " , $("img").position().left );
console.log( "<img> etiketinin üst mesafesi : " , $("img").position().top );
<img> etiketinin sol mesafesi :  7.997159004211426
<img> etiketinin üst mesafesi :  79.23294830322266
<img> etiketinin sol mesafesi :  29.999998092651367
<img> etiketinin üst mesafesi :  10.014204025268555
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum