jQuery селектор :hidden

jQuery селекторы

Определение и применение

jQuery селектор :hidden выбирает все элементы, которые скрыты (не занимают место в документе).

Под скрытыми элементами подразумевается:


Обращаю Ваше внимание на то, что этот селектор не выбирает следующие элементы:

Вышеуказанные элементы не выбираются по той причине, что они считаются видимыми, так как они все еще занимают место в макете страницы.


Селектор :hidden является противоположностью селектора :visible (каждый элемент, который был выбран одним селектором не будет выбран другим и наоборот).

jQuery синтаксис:

$(":hidden")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :hidden.</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	   $("button").click(function(){ // запускаем функцию при клике
	     $("div:hidden").show(2500); // выбираем все скрытые div и методом show() отображаем их за 2500 миллисекунд
           });
	          });
		</script>
	</head>
	<body>
	<button>Клик</button>
		<div style = "width:50px;height:50px; margin:5px; background:plum; display:none"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum"></div>
		<div style = "width:50px;height:50px; margin:5px; background:plum; display:none"></div>
	</body>
</html>

В этом примере при нажатии на кнопку мы запускаем функцию, в которой с использованием селектора :hidden мы выбираем все элементы <div>, которые скрыты (не занимают место в документе), а с помощью метода .show() отображаем их за 2500 миллисекунд.

Результат нашего примера:

Пример использования jQuery селектора :hidden.
Пример использования jQuery селектора :hidden.
jQuery селекторы