jQuery – Bir ID’nin Style Yapısına Müdahale
Bir önceki jQuery – HTML Tagın Style Yapısına Müdahale başlıklı makalemde jQuery ile HTML tagların style yapısına müdahaleyi irdelemiştik.Bu yazımızda ise herhangi bir id değerinin style yapısına müdahale etmeyi inceleyeceğiz.Hatırlarsanız eğer yukarıda belirttiğim yazımda HTML tagına style yapılandırması uygularken, o sayfa(document) içerisinde ki bütün ilgili HTML tagları bu yapılandırmadan etkileniyordu.Lakin idlerin style yapılandırmasında ise sadece ilgili id değerine sahip nesne etkilenecektir.Şimdi gelin bu olayı teknik olarak inceleyelim.
Konuya girmeden öncelikle aşağıdaki HTML kodunu inceleyiniz.
<html> <head> </head> <body> <p id="paragraf"> Bu bir paragraftır. </p> <br /> <input type="submit" value="Uygula" /> </body> </html>
Gördüğünüz gibi yukarıdaki kod bloğunda <p> tagına “paragraf” isimli bir id değeri atanmıştır.İşte jQuery ile “paragraf” id değerine sahip nesnenin style yapısına müdahale etme işini yapacağız.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function Uygula()
{
$("#paragraf").css("width","150px");
$("#paragraf").css("height","150px");
$("#paragraf").css("background-color","#CCC");
}
</script>
</head>
<body>
<p id="paragraf">
Bu bir paragraftır.
</p>
<br />
<input type="submit" value="Uygula" onClick="Uygula()" />
</body>
</html>
Yukarıdaki kod parçacığını incelerseniz eğer “paragraf” id değerine sahip nesnenin style yapısına jQuery ile müdahale etmiş bulunmaktayız.Uygula fonksiyonu tetiklendiği anda sayfadaki(document) id değeri “paragraf” olan HTML nesnesi etkilenecek diğer nesneler bu işleyişten muaf tutulacaktır.Burada ek bilgi olarak jQuery ile bir HTML nesnesine id değerinden ulaşırken ‘$(“#id değeri”)’ şeklinde ulaşmaktayız.(id olduğu için # işaretini koymayı unutmamak lazım)
Şimdide aşağıdaki kodu incelemenizi istiyorum
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function Uygula()
{
$("#paragraf").css("width","150px");
$("#paragraf").css("height","150px");
$("#paragraf").css("background-color","#CCC");
}
</script>
</head>
<body>
<p id="paragraf">
Bu bir paragraftır.
</p>
<p id="paragraf">
Bu ikinci bir paragraftır.
</p>
<br />
<input type="submit" value="Uygula" onClick="Uygula()" />
</body>
</html>
Yukarıdaki kod bloğunu incelediyseniz eğer idsi “paragraf” olan iki adet <p> tagı mevcuttur.Acaba Uygula fonksiyonu tetiklendiği zaman hangisi işleyişe tabii tutulacaktır.
| Uygulama Fonksiyonu Tetiklenmeden Önce | Uygulama Fonksiyonu Tetiklendikten Sonra |
|---|---|
 |
 |
Yukarıdaki görüntülerde gördüğünüz gibi satırsal olarak öncelikli olan <p> tagı işleyişe tabii tutulmuştur.Bunun sebebi de temel bir CSS bilgisine dayanmaktadır.HTML sayfalarında bir isimde tek id değeri olmaktadır.Yani id değeri “paragraf” olan iki HTML nesnesi teknik olarak mümkün değildir.Haliyle böyle bir teknik hatayla karşılaşan jQuery mimarisi satırsal olarak öncelikli olan nesneye işlevini gerçekleştirmekte ve diğer idsi aynı olan nesnelere müdahale etmemektedir.
Vee böylece bu yazımızında sonuna gelmiş bulunmaktayız.
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar dilerim…
Teşekkürler