# Селектор visible

Селектор `:visible` выбирает все видимые элементы на странице. Элементы с `visibility: hidden` или с `opacity: 0` считаются видимыми, поскольку занимают место в макете. Элементы считаются видимыми, если они занимают место в документе. Видимые элементы имеют высоту и ширину отличные от `0`. Так как `:visible` не относится к CSS спецификации, то для улучшения производительности в современных браузерах лучше в начале отфильтровать элементы с использованием чистого css-селектора, а затем применить `.filter(':visible')`. Отслеживание видимости элементов с помощью других методов, например, с помощью класса, может обеспечить лучшую производительность.

## Синтаксис

Так мы выбираем видимые элементы:

`$(':visible');`

## Пример

Давайте по клику на кнопку покажем невидимые квадратики. При нажатии на "видимые" квадратики их фон будет меняться на желтый:

`<button id="show">show</button> <div></div> <div style="display:none;"></div> <div></div> <div></div> <div style="display:none;"></div>` `div { width: 40px; height: 40px; margin: 5px; border: 2px outset green; float: left; }` `$('div:visible').click(function() { $(this).css('background', 'yellow'); }); $('#show').click(function() { $('div:hidden').show('slow'); });`

## Смотрите также

- селектор `hidden`,
  который выбирает все скрытые элементы на странице
- метод `filter`,
  который фильтрует элементы в наборе по заданному селектору
- метод `show`,
  который плавно показывает скрытые элементы

←→
↑