селектор hidden
Описание: Выбирает все скрытые элементы.
jQuery(':hidden')
Добавлена в версию: 1.0
Элементы можно считать скрытыми по нескольким причинам:
- Они имеют CSS
displayв значенииnone. - Они элементы формы с
type="hidden". - Их ширина и высота равны 0.
- Предок элемента скрыт, поэтому элемент не отображается на странице.
Элементы с visibility: hidden или opacity: 0 считаются видимыми, так как они по-прежнему занимают место на странице. Во время анимации, которая скрывает элемент, элемент считается видимым до конца анимации. Во время анимации, которая показывает элемент, элемент считается видимым с начала анимации.
Как :hidden, определяется без изменения с jQuery 1.3.2. Элемент считается скрытым, если он или любой из его родителей не занимает пространства в документе. CSS видимость, не принимается во внимание (поэтому $(elem).css('visibility','hidden').is(':hidden') == false).
Примеры
Показывает все скрытые элементы div и подсчитывает количество скрытых элементов input.
// in some browsers :hidden includes head, title, script, etc...
// so limit to body
$("span:first").text("Found " +
$(":hidden", document.body).length +
" hidden elements total.");
$("div:hidden").show(3000);
$("span:last").text("Found " + $("input:hidden").length +
" hidden inputs.");
Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ // in some browsers :hidden includes head, title, script, etc... // so limit to body $("span:first").text("Found " + $(":hidden", document.body).length + " hidden elements total."); $("div:hidden").show(3000); $("span:last").text("Found " + $("input:hidden").length + " hidden inputs."); }); </script> <style> div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; } span { display:block; clear:left; color:red; } .starthidden { display:none; } </style> </head> <body> <span></span> <div></div> <div style="display:none;">Hider!</div> <div></div> <div class="starthidden">Hider!</div> <div></div> <form> <input type="hidden" /> <input type="hidden" /> <input type="hidden" /> </form> <span> </span> </body> </html>
Была ли эта информация полезной?
