Bu makalemizde jQuery ile DOM nesnelerine erişim için filter() fonksiyonunun kullanımını inceleyeceğiz.
filter() fonksiyonu, DOM nesnelerinde filtreleme yaparak filtreye uygun elemanlarla ilgili işlem yapılabilmesini sağlamaktadır.Bu fonksiyonu birkaç örnekle inceleyelim.
İlk örneğimizde butona tıkladığımızda filter() fonksiyonu parametre olarak css class’ını alıp bu class’a sahip “div”lerin css classlarını kaldıracaktır.
|
<html>
<head>
<script src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").filter(".sinif2").removeClass();
});
});
</script>
<style>
.sinif1{
background:yellow;
color:red;
}
.sinif2{
background:red;
color:yellow;
}
</style>
</head>
<body>
<div class="sinif1">Veysel Uğur KIZMAZ</div>
<div class="sinif1">Engin DEMİROĞ</div>
<div class="sinif2">Tolga AYAS</div>
<div class="sinif1">Salih DEMİROĞ</div>
<button id="btn">Filter</button>
</body>
</html>
|
Örneği inceleyecek olursak, ilk açılışta ekran görüntüsü aşağıdaki gibi olacaktır.
Butona tıkladıktan sonra ekran görüntüsü aşağıdaki gibi olacaktır.
Yani “sinif2” classına sahip elemanların css classları kaldırılmıştır.
İkinci örneğimizde ise filter() fonksiyonu içinde bir fonksiyon tanımlayıp, bu fonksiyonun parametre olarak aldığı index’in fonksiyon sonucunda “true” değerini döndürüyorsa işlemi yapmakta, “false” değerini döndürüyorsa işlem yapmamaktadır.
|
<html>
<head>
<script src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("div").filter(function(index){
return index % 4 == 1
}).removeClass();
});
});
</script>
<style>
.sinif1{
background:yellow;
color:red;
}
.sinif2{
background:red;
color:yellow;
}
</style>
</head>
<body>
<div class="sinif1">Veysel Uğur KIZMAZ</div>
<div class="sinif1">Engin DEMİROĞ</div>
<div class="sinif2">Tolga AYAS</div>
<div class="sinif1">Salih DEMİROĞ</div>
<button id="btn">Filter</button>
</body>
</html>
|
Örneği inceleyecek olursak, sayfa ilk açıldığında ekran görüntüsü aşağıdaki gibi olacaktır.
Butona tıklandığında ise “index % 4 == 1” ifadesini doğrulayan (index = 1) elemanın css class’ı kaldırılmakta ve ekran görüntüsü aşağıdaki gibi olmaktadır.
Burada bu fonksiyonun içerisine istenilen işlemler yazılabilir.
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi