[jQuery] 상태 선택자
2022. 6. 9. 21:48ㆍJavaScript/jQuery
1. 상태 선택자
- 태그의 상태에 따라 선택하는 선택자
- :header : h1~h6 태그를 선택한다
- :focus : 현재 포커스가 주어진 태그를 선택합니다.
- :contains(”문자열”) : 지정된 문자열이 포함되어 있는 태그를 선택합니다.
- :has(선택자) : 지정된 선택자를 포함한 태그를 선택합니다.
2. :header
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(function(){
$(":header").css("color", "red");
});
});
</script>
</head>
<body>
<p>p 태그</p>
<h1>h1 태그</h1>
<h3>h3 태그</h3>
</body>
</html>
3. :focus
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":focus").css("background-color", "yellow");
});
</script>
</head>
<body>
<input type="text" autofocus/>
<input type="text"/>
</body>
</html>
4. :contains(문자열)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("div:contains('Hello')").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>Hello World</div>
<div>Hello World</div>
<div>Hi World</div>
</body>
</html>
5. :has(선택자)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 실습</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("div:has(p)").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p>p 태그를 가지고 있는 div 태그</p>
</div>
<div>
<div>div 태그를 가지고 있는 div 태그</div>
</div>
</body>
</html>
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/StatusSelector/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] jQuery 이벤트 함수 (0) | 2022.06.10 |
|---|---|
| [jQuery] Form 태그 선택자 (0) | 2022.06.10 |
| [jQuery] 속성 선택자 (0) | 2022.06.09 |
| [jQuery] 인덱스 필터 선택자 (0) | 2022.06.09 |
| [jQuery] 순서 필터 선택자 (0) | 2022.06.09 |