:visible Seçicisi

visible selector
Açıklama : Görünür tüm elemanları seçer.

jQuery( ":visible" ) Eklendiği Versiyon 1.0

Elemanlar sayfada yer kaplıyorsa görünürdür. Görünür elemanlar sıfırdan büyük bir yükseklik ve genişlik değerine sahiptir.

Öznitelik değerleri visibility: hidden ve opacity: 0 olan elemanlar hala yerleşimde yer kapladığı için görünür kabul edilir.

Dökümanın içine eklenmemiş elemanlar görünür kabul edilmez, jQuery onların dökümana eklendiğinde görünür olup olamayacağını bilemez.

Bu seçici :hidden seçicisinin tersidir. Bu yüzden :hidden ile seçilen elemanlar :visible ile seçilmeyenlerdir ya da tersi.

Tüm <option> elemanları selected değerlerinden bağımsız olarak görünmez kabul edilir.

Bir elemanın gizlenmesi için yapılan animasyon bitene kadar görünür olur. Gizli bir elemanın gösterilmesi için animasyon başladığı andan itibaren eleman görünür olur.

Versiyon 1.3.2 de :visible nasıl tayin edilir değişti. release notes sayfasına bakabilirsiniz.

JQuery 3 :visible (ve tabi ki :hidden) seçicisinde küçük bir değişim yapıldı. Bu versiyondan itibaren yerleşim kutusu olan elemanlar genişlik ve yüksekliği sıfır olsa bile :visible kabul edildi. Örneğin <br> elemanları ve içeriği boş olan inline elemanlar :visible seçicisi tarafından seçilir.


İlave Notlar :

  • Bu :visible seçicisi bir JQuery eklentisi olup standart CSS seçici olmadığı için, standart DOM querySelectorAll() metodunun performansında olamaz. Modern tarayıcılarda daha iyi performans için önce grup seçimini standart CSS ile yapıp .filter(":visible"). metodu ile filtreleyiniz.
  • Bu seçiciyi sık kullanmak ciddi performans sorunu üretebilir, görünebilirliği test etmek için tarayıcıyı sayfayı tekrar yayınlamaya zorlayabilir. Elemanların görünürlüğünü örneğin class üzerinden takip etmeniz daha doğru olacaktır.


Örnekler:

Tüm görünür <div> elemanları tıklayınca arka rengini sarı yap.

<style>
   div {
      width: 50px; height: 40px;
      margin: 5px; float: left;
      border: 3px outset green;
   }
   .starthidden { display: none; }
</style>
<button>Gizlileri göster ve tıklanamadığını gör</button>
<div></div>
<div class="starthidden"></div>
<div></div><div></div>
<div style="display:none;"></div>
 
<script>
   $("div:visible").on("click", function() {
      $(this).css("background", "yellow");
   });
   $("button").on("click", function() {
      $("div:hidden").show("fast");
   });
</script>

.

.