jQuery :first-child nedir ? nasıl kullanılır ? – aycan.net

:first-child

Girilen seçiciye göre barındırılan ilk nesneyi verir. Her zaman ki gibi daha iyi anlaşılır olabilmesi için basit bir örnek verelim.

HTML Kodlarımız

<div>
  <span>Ozan</span>
  <span>Erkan</span>
  <span>Emin</span>
</div>
<div>
  <span>OZAN</span>
  <span>ERKAN</span>
  <span>EMİN</span>
</div>

<div>

<span>Erkan</span>

</div>

<div>

<span>ERKAN</span>

</div>

CSS Kodlarımız

span{
    color: #000;
    display: block;  
}
span.hover {
    color: green;
    font-weight: bolder;  
}
div {
	margin-top:20px
}

span{

color: #000;

display: block;

}

span.hover {

color: green;

font-weight: bolder;

}

div {

margin-top:20px

}

JS Kodlarımız

$( "div span:first-child" )
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  });

$( "div span:first-child" )

.css( "text-decoration", "underline" )

.hover(function() {

$( this ).addClass( "hover" );

}, function() {

$( this ).removeClass( "hover" );

});

Js de yazdığım kod kısmında her div içindeki spanların css’lerini alt çizili yapıyoruz ilk önce sonra hover durumuna geçtiğinde ise tüm spanlara hover classının özelliklerini ekliyoruz.

See the Pen jQuery .first() by Aycan BÜLBÜL (@AycanB) on CodePen.

Post Views: 1.808

Bir yanıt yazın Yanıtı iptal et