반응형
기타 필터
| 필터 | 설 명 |
| :hidden | 1) display : none 인 것 2) type=hidden 인 것 3) width=0 height=0 인 것 4)부모요소가 hidden 인 것 |
| :visible | 1) display :none 이 아니 것 2) type =hidden 이 아니 것 3) width=0 height=0 이 아닌 것 4) 부모요소가 hidden 이 아닌 것 5) Visibility =hidden opacity=0 인 것 |
- hidden, visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>:visible :hidden</legend>
<p>보이는 문단</p>
<p style="visibility: hidden;">숨겨진 문단</p>
<p style="display: none;">자리를 차지하지 못한 문단</p>
<p style="opacity: .2;">투명한 문단</p>
</fieldset>
</body>
</html>
=> visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend><a href="javascript:vsb()">:visible</a> <a href="javascript:hdn()">:hidden</a></legend>
<p>보이는 문단</p>
<p style="visibility: hidden;">숨겨진 문단</p>
<p style="display: none;">자리를 차지하지 못한 문단</p>
<p style="opacity: .2;">투명한 문단</p>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let vsb = function(){
$('p:visible').each(function(){ // 콜백함수에서 제공하는 두 매개변수는 활용시에만 선언해도 됨
console.log( this ); // display: none;으로 지정한 문단 제외 전부 찍힘
console.log(this.innerText); // innerText특성상 랜더링 이후의 정보를 제공함
console.log( $(this).text() );
});
};
let hdn = function(){
};
</script>
</body>
</html>
=> hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend><a href="javascript:vsb()">:visible</a> <a href="javascript:hdn()">:hidden</a></legend>
<p>보이는 문단</p>
<p style="visibility: hidden;">숨겨진 문단</p>
<p style="display: none;">자리를 차지하지 못한 문단</p>
<p style="opacity: .2;">투명한 문단</p>
</fieldset>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
let vsb = function(){
};
let hdn = function(){
$('p:hidden').each(function(i, v){ // 첫번째 인자는 무조건 index 혹은 key로 들어옴
console.log(v);
});
};
</script>
</body>
</html>
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 8장 get/set 메소드2 (0) | 2024.02.22 |
|---|---|
| [jQuery] 7장 get/set 메소드1 (0) | 2024.02.22 |
| [jQuery] 5장 내용 필터 (0) | 2024.02.21 |
| [jQuery] 4장 필터 및 기본 필터 (0) | 2024.02.21 |
| [jQuery] 3장 jQuery 선택자 (0) | 2024.02.21 |