jQuery .hasClass() Kullanımı
Merhaba Arkadaşlar,
Bu dersimizde jQuery’nin bir class kontrol metodu olan hasClass’ı göreceğiz. Bildiğiniz gibi class değerleri css yazımında en çok kullandığımız seçicilerdir. Bu seçicilere jQuery ile işlem yaptırmak istediğimizde bize yardımcı olan özellik ” .hasClass() ” tır. hasClass sayesinde bir sayfa içerisinde aynı class değerine sahip tüm değerlere aynı işlemi yaptırabiliyoruz. Ayrıca daha geniş anlamda düşündüğümüzde, belirlediğimiz class değerlerine bir if döngüsü içerisinde tek tek işlem yaptırarak sonuçları ekrana yansıtabiliyoruz. Örneğin; bir sayfa içerisinde yan yana bulunan 3 kutuyu düşündüğümüzde eğer class değerleri aynı ise css içerisinden bir kısıtlama getirmeye gerek kalmadan yüksekliklerini eşitleyebiliriz. Kutulardan birine yeni satır, resim vb. eklenerek yüksekliği arttırıldığında diğerleri de otomatik olarak en yüksek div ile aynı görünümü alacaktır. Şimdi bir örnek yaparak konuyu daha iyi anlayalım.
Uygulama için bir klasör açalım ve bu klasör içerisinde ornek.html isimli bir sayfa oluşturalım. Metin editörü ile açarak sayfanın salt kodlamaya hazır halini şu şekilde yapalım:
<!DOCTYPE html> <html> <head> <title>BilgiSayaci.org - jQuery .hasClass() Kullanımı</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> </body> </html>
Uygulamamızda ” jQuery .each() Kullanımı ” makalesinde anlatılan .each() metodundan faydalanarak bir class değerine sahip tüm elemanları saydırarak alert ile mesaj olarak yüksekliklerini yazdıracağız. üstteki kodlara div ve css satırlarını eklediğimiz hali şu şekilde olacaktır :
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.org - jQuery .hasClass() Kullanımı</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
div{float: left; margin-right: 20px; width: 200px;}
.blue{background: blue; height: 250px;}
.red{background: red; height: 130px;}
.yellow{background: yellow; height: 370px;}
.green{background: green; height: 111px;}
</style>
</head>
<body>
<div class="first blue"></div>
<div class="first red"></div>
<div class="second yellow"></div>
<div class="first green"></div>
</body>
</html>
Kodları yukarıdaki gibi oluşturarak tarayıcıda çalıştırdığınızda yan yana dizilmiş 4 adet farklı yükseklikte kutu göreceksiniz. Şimdi jQuery ile bu kutuları saydırıp class değeri ” first ” olanların yüksekliğini mesaj olarak vereceğiz. jQuery kodları şu şekilde olacaktır :
$(document).ready(function(){
$("div").each(function(){
if($(this).hasClass("first")){
alert($(this).height());
}else{}
});
});
Yukarıda verilen kodlar sayesinde sayfa okunduğunda tüm div elemanları bitene kadar bir kontrol yapıldı ve hepsi tek tek kontrol edildi. İçlerinden class değeri “first” olanlara denk gelindiğinde alert ile yüksekliğini ekrana mesaj olarak gönderdik.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 56 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar