:visible 선택자는 눈에 보이는 요소를 찾아 줍니다.
원문 링크 
http://api.jquery.com/visible-selector/
- jQuery(':visible')
예 제
div 중에 보이는 요소라면 클릭시에 노란색으로 변경한다. 버튼을 클릭하면 보이지 않는 요소를 보이게 한다.
<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
<script>
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
</script>
</body>
</html>
미리보기
소스는 별거 없네요. 그런데 예제는 재미있습니다. 한번씩 해보세요.
:visible 이 있으니 :hidden 도 있겠죠. 이전 포스트에 있습니다. 한번 더 보셔도 좋을 듯 해요.
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| jquery API 정복 - innerHTML 과 같은 표현, html() (10) | 2011.03.10 |
|---|---|
| jQuery API 정복 - 클래스가 있나 찾기, hasClass() (5) | 2011.03.03 |
| jQuery API 정복 - attr(), 속성을 제어하기 (2) | 2011.02.25 |
| jQuery API 정복 - addClass(), 클래스 추가하기 (5) | 2011.02.25 |
| jQuery API 정복 - text 박스 찾기 : text (3) | 2011.02.24 |
| jQuery API 정복 - submit 버튼 찾기 : submit (4) | 2011.02.22 |
| jQuery API 정복 - select 박스에서 선택된 것 찾기 : selected (4) | 2011.02.22 |
| jQuery API 정복 - reset 버튼 찾기 : reset (2) | 2011.02.21 |