Browse Tag

class

jQuery ile Bir sınıftaki Öğelerden İstediğimizi Seçebilmek

Merhaba arkadaşlar bu yazımda sizlere kısaca jQuery kullanarak bir css sınıfındaki öğelerden yalnızca birini nasıl seçebileceğimizi anlatmaya çalışacağım. Bildiğiniz gibi eğer kullanmak istediğimiz öğeye özgü bir stil oluşturmak ya da yalnızca o öğeyle ilgili işlemler yapmak istiyorsa id kullanmak daha mantıklı bir yoldur, ancak bazı durumlarda sınıf olarak belirtilmiş bir öğe üzerinde de işlem yapmamız gerekebilir. Bunu nasıl yapabileceğimizi aşağıdaki kodla anlatmaya başlıyorum.

Öncelikle boş bir HTML sayfası oluşturup en başına da aşağıdaki css kodlarını yazalım

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>

CSS kodumuzda önemli olan iki sınıfımız var. Birinci sag adını verdiğim sınıf ve bunlarla divlerimi oluşturacağım sınıf; ikincisi de sol_baslik sınıfı ki üzerinde işlem yapacağım sınıf. Ayrıca fark ettiğiniz gibi sol_baslik için bir de üzerine fare ile gelince farklı efekt vermek için hover kullandım ancak bu örneğimizin daha pekişmesi için yoksa jQuery de bu hover seçicisine ihtiyacım olmayacak.

Şimdi de bu kodların altına aşağıdaki html kodumuzu ekleyelim

<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Kodumuzu bu haliyle çalıştırdığımızda ekranda üç adet gri div ve onların içinde de sarımsı bir arkaplan rengine sahip yazılar göreceksiniz. Fare ile bu yazıların üzerine geldiğinizde o yazının arkaplan renginin pempeye döndüğünü göreceksiniz.

Peki biz o yazıların değil de başka bir şeyin mesela örneğimizde olduğu gibi divlerin üzerine geldiğimizde o divin içindeki yazının arkaplan renginin değişmesini isteseydik ne olacaktı? Basit anlatımla sag isimli sınıftaki divin üzerine fare ile gelince sol_baslik sınıfındaki yazının rengini değiştir dememiz gerekiyor ancak böyle bir durumda sol_baslik sınıfındaki bütün öğeler değişecek çünkü sınıfa ait bir özelliğin değişmesi sınıftaki bütün öğeleri değiştirecektir. Bunun için de jQuery kullanarak aşağıdaki kodda olduğu gibi this parametresi ve onun içindekileri seçmemizi sağlayan childeren parametresini kullanıyoruz.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         });	 
	});
</script>

Yukarıdaki jQuery kodunda önce jQuery kütüphanesini çağırıyoruz ardından da sayfamız yüklendikten sonra çalışmasını istediğimiz fonksiyonumuzu yazıyoruz. sag isimli sınıftaki bir öğenin üzerine fare ile gelindiğinde this ile o öğeyi seçiyoruz ve childeren ile de öğenin kapsadığı sol_baslik sınıfının (dikkat edin yalnızca üzerine gelinen sag isimli sınıfa sahip öğenin içinde bulunan sol_baslik sınıfını değiştiriyoruz) arkaplan rengini farklı bir renk yapıyoruz. jQuery kütüphanesinin temel yazım tekniğine göre oluşturduğumuz kodda yazdığımız ikinci fonksiyon da fare, ilgili öğenin üzerinden ayrılınca o öğenin farklı bir arkaplan rengini almasını sağlıyor.

En son tüm kodumuz aşağıdaki gibi olacak. Kodu kendiniz deneyerek ne demek istediğimi daha rahat anlayabilirsiniz.

<style type="text/css">
body,td,th {
	color: #000000;
}
body {
	background-color: #FFFFFF;
}

.sag {
	background-color:#E8E8E8;
}

.sol_baslik {
	background-color:#DFE0A9;
}

.sol_baslik:hover {
	background-color:#F491DE;
}

</style>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

 <script type="text/javascript">
	$(document).ready(function(){
	
		  $('.sag').hover(
         function () {
		   $(this).children(".sol_baslik").css({"background-color":"#900"});
         }, 
         function () {
           $(this).children(".sol_baslik").css({"background-color":"#3292b8"});
         }); 
	});
	
</script>
<div class="sag"><span class="sol_baslik">1.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">2.Div</span></div>
<br><br>
<div class="sag"><span class="sol_baslik">3.Div</span></div>

Burada biz bir divin üzerine geldiğimizde içindeki başka bir sınıfa ait öğenin değişerek aynı sınıftaki diğer öğelerin sabit kalmasını sağladık. Siz isterseniz daha farklı senaryolar deneyebilirsiniz. Örneğin bir düğmeye basıldığında yukarıdaki bir başlığı değiştirmek gibi yani değiştirilecek öğenin mutlaka bir üst elemanın üzerine gelince değişmesi gibi bir şart yok. Değişik bir örnek olarak deneme ismini verdiğimiz bir idye sahip bir divin içeriğiyle ilgili işlem yapabilmek için kodumuzu aşağıdaki gibi değiştirmemiz gerekecekti.

  $(this).children(".sol_baslik").css({"background-color":"#900"});
         },

Konunun daha iyi anlaşılabilmesi için aşağıdaki video anlatımımdan da yararlanabilirsiniz. Şimdilik hoşçakalın.

“Class” ile Öğelere İstenen Stillerin Atanması

Bir önceki yazıda bir HTML etiketi için bir stil yaratıp bundan sonra o etiket için hep o stilin geçerli olmasını sağlamayı öğrenmiştik.

Şimdi ise daha farklı bir konuya geçiyoruz. Her zaman aynı stili kullanmak istemezsek ne olacak? Yani sayfamızdaki bütün linklerin aynı şekilde görünmesini istemiyorsak… O zaman HTML etiketleri için farklı class yani sınıflar oluşturarak istediğimiz zaman istediğimizi kullanabiliriz..

Önce aşağıdaki gibi bir dosya oluşturalım ve buna main.css adını verelim.

FONT {
FONT-SIZE: 10px; FONT-FAMILY: Tahoma
}
TD {
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
border-right-style: none;
border-bottom-style: none;
}
BODY {
SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #cccccc;
SCROLLBAR-ARROW-COLOR: #cccccc;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #cccccc;
font-family: Tahoma;
font-size: 10px;
color: #666666;
}
A:link {
FONT-SIZE: 10pt;
COLOR: #619ED4;
FONT-FAMILY: "Tahoma";
TEXT-DECORATION: none;
font-weight: normal;
}
A:visited {
FONT-SIZE: 10pt;
COLOR: #619ED4;
FONT-FAMILY: "Tahoma";
TEXT-DECORATION: none;
font-weight: normal;
}
A:hover {
COLOR: #FF9900; TEXT-DECORATION: underline
}
A.Sol:link {
FONT-SIZE: 10pt;
COLOR: #000066;
FONT-FAMILY: "Arial Narrow";
TEXT-DECORATION: none;
font-weight: normal;
}
A.Sol:visited {
FONT-SIZE: 10pt;
COLOR: #000066;
FONT-FAMILY: "Arial Narrow";
TEXT-DECORATION: none;
font-weight: normal;
}
A.Sol:hover {
COLOR: #CC3333; TEXT-DECORATION: underline
}
A.ust:link {
FONT-SIZE: 8pt;
COLOR: #619ED4;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.ust:visited {
FONT-SIZE: 8pt;
COLOR: #619ED4;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.ust:hover {
COLOR: #FFFFFF; TEXT-DECORATION: underline
}
A.orta:link {
FONT-SIZE: 8pt;
COLOR: #CC3333;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.orta:visited {
FONT-SIZE: 8pt;
COLOR: #CC3333;
FONT-FAMILY: Verdana;
TEXT-DECORATION: none;
font-weight: normal;
}
A.orta:hover {
COLOR: #000066; TEXT-DECORATION: underline
}
FONT {
FONT-SIZE: 9px; FONT-FAMILY: Tahoma
}
TD {
border-top-style: none;
border-left-style: none;
font-family: Tahoma;
font-size: 11px;
color: #666666;
}
HR {
COLOR: #1194FF;
HEIGHT: 1pt;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
width: 95%;
}
INPUT {
FONT-SIZE: 8pt;
COLOR: #000000;
FONT-FAMILY: Verdana;
border: 1px double #3a93d0;
background-color: whitesmoke;
}
TEXTAREA {
BORDER-RIGHT: #3a93d0 1px solid;
BORDER-TOP: #3a93d0 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #3a93d0 1px solid;
COLOR: #000000;
BORDER-BOTTOM: #3a93d0 1px solid;
FONT-FAMILY: tahoma;
}
.DUGME {
BORDER-RIGHT: 2px inset #999999; BORDER-TOP: 2px inset #CCCCCC; FONT-WEIGHT: bold; FONT-SIZE: 8pt; BORDER-LEFT: 2px inset #CCCCCC; COLOR: #000099; BORDER-BOTTOM: 2px inset #999999; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #E0DFE3
}
.BASLIK {
FONT-SIZE: 8pt;
FONT-FAMILY: Verdana;
font-weight: bold;
}
SELECT {
BORDER-RIGHT: #3a93d0 1px solid;
BORDER-TOP: #3a93d0 1px solid;
FONT-SIZE: 8pt;
BORDER-LEFT: #3a93d0 1px solid;
COLOR: #000000;
BORDER-BOTTOM: #3a93d0 1px solid;
FONT-FAMILY: Tahoma;
background-color: whitesmoke;
}
.BASLIK2 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: normal;
color: #FF6600;
}
.BASLIK3 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #FFFFFF;
}
.BASLIK4 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #FE8D12;
}
.BASLIK5 {
FONT-SIZE: 8pt;
FONT-FAMILY: Tahoma;
font-weight: normal;
color: #999999;
}
.BASLIK6 {
FONT-SIZE: 9pt;
FONT-FAMILY: Tahoma;
font-weight: bold;
color: #000000;
}
.yazimavi {
FONT-SIZE: 8pt;
FONT-FAMILY: Verdana;
font-weight: normal;
color: #619ED4;
}
.BASLIK_tre_gri {
FONT-SIZE: 9pt;
FONT-FAMILY: "Trebuchet MS";
font-weight: bold;
color: #666666;
}

Yukarıdaki dosyanın uzunluğu ilk bakışta gözünüzü korkutmasın. Şimdilik sadce küçük bir kısmını kullanacağız.

Her şeyden önce dosyamızı nasıl kullanacağımıza karar vermemiz gerekiyor. CSS kodları oluşturacağımız sayfada mı olacak yoksa farklı bir sayfadan mı ithal edeceğiz. Bu yöntemleri daha önceki yazılarımda açıklamaya çalışmıştım. Eğer aynı sayfada kullanmak istiyorsanız şu yazıyı; ya da dışardan çağırmak istiyorsanız da şu yazıyı okuyabilirsiniz.

Yukarıdaki koddan anlaşıldığı gibi BASLIK2, 3, 4 vs vs gibi bir kaç başlık sitilimiz ve orta ve üst gibi değişik link kodlarımız var. Şimdi bunları istediğimiz şekilde nasıl kullanacağımıza örnek verelim.

<p class="BASLIK2">www.hayaletinyeri.com</p>
<p class="BASLIK6"&gt;www.hayaletinyeri.com</p>

Görüldüğü gibi her iki satırda da aynı ibareyi yazdırmamıza rağmen sayfa kaydedilp çalıştırıldığı takdirde sonuç iki ayrı renkte yazı olacaktır. Böylece sayfamızda görüntülemekm istediğimiz objelerin başına class ifadesini ekleyip sonra sınıfı belirtince görünüm o sınıfa göre değişmektedir. Bu örneği bir de linklerle deneyelim.

<a href="https://www.hayaletinyeri.com" class="orta">www.hayaletinyeri.com</a>
<a href="https://www.hayaletinyeri.com" class="Sol">www.hayaletinyeri.com</a>

Burada da iki aynı ifadeyi içeren link görülüyor ancak her ikisinin rengi ve fare üzerine geldiğinde değişen renkleri birbirlerinden farklı. Birine sol diğerine de orta sınıfını atayınca sonuç böyle oldu. Bu şekilde Sayfamızın sol tarafı ve üst tarafı gibi farklı alanlarında farklı şekilde linkler gösterebiliriz. Aynı şeyi sadece yazı ya da bağlantılarda değil istediğimiz her öğede uygulayabiliriz.

“Class” ifadesiyle gördüğünüz gibi istediğimiz öğeye istediğimiz stili uygulayabiliyoruz.

Daha önceki CSS ile HTML Etiketlerini Yeniden Düzenlemek yazısında HTML etiketlerini düzenleyip artık o etikete nasıl yeni bir stil vereceğimizi öğrenmiştik. Eğer etikete class eklentisini yazmazsak hep o yeni şekliyle görünüyordu şimdi de istediğimiz şekilde görülüyor. Yalnız aradaki farka dikkat edin CSS kodunda HTML etiketini tanımlarken direk HTML karşılığını yazarak adlandırıyoruz. (P HR TD gibi) Fakat bir class oluştururken onu her yerde kullanabileceğimiz için istediğimiz adı verebiliyoruz ancak vereceğiniz adın başına nokta koymayı unutmayın. (.BASLIK6 gibi.)