jQuery'de CSS ve Atıflar
Bu dersimizde jQuery'de CSS ve atıflar (attributes) yardımı ile nasıl manipülasyonlar yapabileceğimizi öğreneceğiz.
.width( ) ve .height( )
Tahmin ettiğiniz gibi herhangi bir nesnenin genişliğini ve yüksekliğini düzenlemek için kullandığımız fonksiyonlardır.
<style>
.deneme {
width: 200px;
height: 200px;
background-color: mediumslateblue;
cursor: pointer;
}
</style>
<div class="deneme"></div>
<script>
$('.deneme').click(function () {
$(this).width('100px').height('100px');
});
</script>
deneme sınıfı ile şekillendirdiğimiz 200'e 200 ebatlarında bir div'imiz olsun. Bu div'e tıkladığımızda genişliğini ve yüksekliğinin yarı yarıya azaltacağız. Şimdilik .click( ) fonksiyonuna takılmayın. Buradaki this ise deneme sınıfını belirtmektedir. Bunu henüz yeni gördüğünüz için buna da takılmayın.
Çıktımız ise bu şekilde olacaktır. div'e tıkladığınızda genişliğinin ve yüksekliğinin 100px azaldığını göreceksiniz.
.css( )
Seçilen elementin CSS özelliklerini değiştirmek için kullanılır. İlk derslerimizde zaten görmüştük. Yine de küçük bir örnek yapalım.
<style>
.deneme7 {
width: 100px;
height: 100px;
background: mediumslateblue;
cursor: pointer;
}
</style>
<div class="deneme7"></div>
<script>
$('.deneme7').click(function() {
$(this).css('border-radius','50%');
});
</script>
deneme7 adlı div'imize tıkladığımızda kenarlarını %50 oranında yumuşatacağız.
Çıktımız ise bu şekilde olacak.
.addClass( ) ve .removeClass( )
.addClass( ) fonksiyonunu zaten biliyoruz. Seçilen nesneye sınıf atamak için kullanılır. .removeClass( ) ise seçilen nesneden sınıf silmek için kullanılır.
<style>
.deneme5,
.deneme6 {
width: 100px;
height: 100px;
background: mediumslateblue;
cursor: pointer;
}
.deneme6 {
background: teal;
}
</style>
<div class="deneme5"></div>
<script>
$('.deneme5').click(function() {
$(this).removeClass().addClass('deneme6');
});
</script>
deneme5 div'ine tıkladığınızda div'in sınıfı silinecek ve yerine deneme6 sınıfı atanacak.
Çıktımız ise bu şekilde olacak.
.toggleClass( )
En çok kullanılan fonksiyonlardan biridir. Bir sınıfı siler ve yerine başka bir sınıf atar. Tekrar etkinleştirildiğinde atanan sınıfı siler ve ilk sınıfı atar. Aç - kapa, kapa - aç mantığı vardır, ki toggle da bu işe yarar.
<style>
.deneme2 {
width: 200px;
height: 200px;
background-color: mediumslateblue;
cursor: pointer;
}
.deneme3 {
width: 100px;
height: 100px;
background-color: mediumslateblue;
cursor: pointer;
}
</style>
<div class="deneme2"></div>
<script>
$('.deneme2').click(function() {
$(this).toggleClass('deneme3');
});
</script>
Bir önceki örneğimi biraz geliştiriyorum. deneme2 adlı bir div oluşturdum ve deneme div'ine tıkladıkca deneme3'ün değerlerini değiş - tokuş yapacağız.
div'e iki kere tıkladığınızda iki sınıf arasında bir değiş - tokuş olayının gerçekleştiğini görebilirsiniz.
.scrollTop( )
Bu sitenin sağ alt köşesinde yukarı bakan bir ok işareti olduğunu göreceksiniz. scrollTop( ) fonksiyonu sitenin istenilen yüksekliğine çıkmaya yarar.
<style>
.deneme4 {
width: 100px;
height: 100px;
background-color: mediumslateblue;
cursor: pointer;
}
</style>
<div class="deneme4"></div>
<script>
$('.deneme4').click(function() {
$(document).scrollTop(0);
});
</script>
deneme4 div'ine tıklandığında sayfanın en başına çıkılacaktır. Burada document kullanmamızın sebebi body'nin yani sayfanın başına dönebilmek için. Ayrıca 0 yerine 500 yazsaydık sayfadan 500px aşağıda olan yere çıkacaktık.
Bu örneğin denemesini bu sitenin "başa dön" özelliğini kullanarak deneyebilirsiniz.
.val( ), .change( ), .show( ) ve .hide( )
Şimdi biraz komplike bir örnek yapacağız. Ama inanın çok basit. Açılır bir menümüz olsun. Bu açılır menüden seçim yaptıkça div'leri görünür kılacağız.
.val( ) açılır menünün elemanlarına ulaşmak için, .change( ) herhangi bir değiştirme işleminde, .show( ) ve .hide( ) ise seçili nesneyi göstermek - gizlemek için kullanılır.
<style>
.mavi {
width: 200px;
padding: 10px;
height: 200px;
line-height: 160px;
text-align: center;
color: white;
background: royalblue;
cursor: pointer;
display: none;
margin-top: 10px;
}
.turkuaz {
width: 200px;
padding: 10px;
height: 200px;
line-height: 160px;
text-align: center;
color: white;
background: teal;
cursor: pointer;
margin-top: 10px;
}
.secim {
width: 200px;
}
</style>
<select class="secim">
<option value="turkuaz">Turkuaz</option>
<option value="mavi">Mavi</option>
</select>
<div class="mavi">
<p>Bu mavi bir div'dir.</p>
</div>
<div class="turkuaz">
<p>Bu turkuaz bir div.</p>
</div>
<script>
$('.secim').change(function () {
if ($(this).val() == "mavi") {
$('.mavi').show();
$('.turkuaz').hide();
} else if ($(this).val() == "turkuaz") {
$('.mavi').hide();
$('.turkuaz').show();
}
});
</script>
mavi ve turkuaz olmak üzere iki div'imiz var. Açılır menüden seçim yaptıkça seçimimize göre bu div'leri gösterip gizleyeceğiz.
Başlangıçta mavi div'imizi display: none ile gizliyorum. Sadece turkuaz görünecek. select nesnemizin sınıfı seçim. Şimdi jQuery'ye bakın. $('.secim').change(), yani seçim işlemi değiştiğinde şunları şunları yap. if ($(this).val() == "mavi"), eğer seçtiğim seçeneğin değeri mavi ise (<option value="mavi">), mavi div'imi göster, turkuaz div'imi gizle. Tersi durumda (else if'te) ise mavi'yi gizleyip, turkuaz'ı göstereceğiz. Şimdi çıktımıza bakalım.
Bu mavi bir div'dir.
Bu turkuaz bir div.
Gördüğünüz gibi seçimimize göre div'lerin rengi değişiyor. Bu örneğini farklı bir versiyonunu bu sitenin iletişim kısmındaki "bildirim türü" menüsünde kullandım. Oldukça işe yarar bir özellik.
Bu mavi bir div'dir.
Bu turkuaz bir div.
Dilerseniz .show( ) yerine .slideDown( ) ve .hide( ) yerine slideUp( ) fonksiyonlarını kullanabilirsiniz.
.attr( ) ve .removeAttr( )
.attr( ), attribute'ün yani atıf'ın kısaltmasıdır. Atıflar üzerinde manipülasyon için kullanılır. .removeAttr( ) ise atıfları siler.
<div class="resim-denemeleri">
<img />
</div>
<script>
$(".resim-denemeleri img").attr({
src: "~/Areas/web_tasarim2/Content/img/cicek.png",
title: "çiçek",
alt: "cicek resmi"
});
</script>
resim-denemeleri adında bir sınıfımız olsun. Amacımız içinde boş bir <img /> etiketi tanımlayıp resim eklemek. $(".resim-denemeleri img") ile resim-denemeleri sınıfının içindeki img etiketini seçtikten sonra attr( ) ile atıfları oluşturmaya başlıyoruz.
![]()
Çıktımız ise bu şekilde olacaktır. jQuery görseli kendi ekleyecektir.
<div class="resim-denemeleri2">
<img src="~/Areas/web_tasarim2/Content/img/cicek1.jpg" title="eski açıklama" />
<img src="~/Areas/web_tasarim2/Content/img/cicek2.jpg" title="eski açıklama" />
<img src="~/Areas/web_tasarim2/Content/img/cicek3.jpg" title="eski açıklama" />
</div>
<script>
$(".resim-denemeleri2 img").removeAttr("title");
$(".resim-denemeleri2 img").attr("title","yeni açıklama");
</script>
Diyelim ki bir sayfamızda galerimiz var ve galerimizde de onlarca resim var. Bu resimlerde kullandığımız açıklamalar ise reklam niteliğinde ve hep aynı. Fakat eski bir reklam kullanıyoruz ve bu resimlerin açıklamalarını değiştirmek istiyoruz. Bunun için tek tek resimlerin açıklamalarını değiştirmek yerine iki satır kodla bu işi düzeltebiliriz. Bu örneğimizde ise "eski açıklama" yerine "yeni açıklama" yazdıracağız.
Resimlerin üzerine gelince artık "yeni açıklama" yazdığını fark edebilirsiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde jQuery'de Olaylar ve Efektler konusuna değineceğiz.