선택자는 HTML의 요소, 문서 객체들을 지목하는 키워드이다.
제목에 기입한 만큼 다양한 선택자가 있다.
그 중 자식과 후손은 의미를 알아야 한다.
자식은 바로 하위 요소를 말하고 후손은 하위 요소(들)을 말한다.
그리고 요소에 부여한 속성값을 이용해서 선택하는 방법은 다양한데 다음과 같다.
요소[속성] : 특정 속성을 가지고 있는 객체 선택
요소[속성=값] : 속성 안의 값이 특정 값과 같은 객체 선택
요소[속성~=값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택
요소[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택
요소[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택
요소[속성*=값] : 속성 안의 값이 특정 값을 포함하는 객체 선택
예를 통해 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>기본선택자</h1>
<h3>전체선택자 : *</h3>
<p>HTML 페이지에 있는 모든 문서객체를 선택하는 선택자이다.</p>
<script type="text/javascript">
/*
$(function name() {
$("*").css("color", "red");
});
*/
</script>
<hr>
<h3>태그선택자</h3>
<h4>안녕? 난 뽀로로야!</h4>
<p>노는게 제일좋아 친구들 모여라 언제나 즐거워 개구쟁이 뽀로로</p>
<h4>안녕? 난 뽀로로야!</h4>
<p>노는게 제일좋아 친구들 모여라 언제나 즐거워 개구쟁이 뽀로로</p>
<script type="text/javascript">
$(function name() {
$("h4").css("color", "orangered");
$("h4, p").css("background", "yellowgreen");
});
</script>
<hr>
<h3>아이디 선택자</h3>
<p>특정한 아이디 속성을 가지고 있는 문서 객체를 선택하는 선택자이다.</p>
<h1>테스트1</h1>
<h1 id="test2">테스트2</h1>
<h1>테스트3</h1>
<script type="text/javascript">
$(function() {
$("#test2").css("color", "yellowgreen");
});
</script>
<hr>
<h3>클래스 선택자</h3>
<p>특정한 클래스 속성을 가진 문서 객체를 선택하는 선택자이다.</p>
<h1 class="item">테스트1</h1>
<h1 class="item select">테스트2</h1>
<h1 class="item">테스트3</h1>
<script type="text/javascript">
$(function() {
$(".item").css("color", "orange");
// 두 개 클래스 속성을 모두 갖는 문서 객체를 선택하고 싶을 때
$(".item.select").css("background", "red");
});
</script>
<hr>
<h3>자식 선택자와 후손 선택자</h3>
<p>기본 선택자의 앞에 붙여 사용하며 기본 선택자의 범위 제한</p>
<div>
<ul>
<li><h3>apple</h3></li>
<li>banana</li>
<li>orange</li>
<li>fineapple</li>
<li>peach</li>
</ul>
<h3>child h3</h3>
</div>
<script type="text/javascript">
$(function() {
// 자식 선택자(한개만 지목), >
$("div>h3").css("color", "red");
// 후손 선택자(아래 전부), 띄어쓰기
$("div h3").css("background", "orange");
})
</script>
<hr>
<h3>속성 선택자</h3>
<p>기본선택자 뒤에 붙여 사용한다.</p>
<p>
요소[속성] : 특정 속성을 가지고 있는 객체 선택<br>
요소[속성=값] : 속성 안의 값이 특정 값과 같은 객체 선택<br>
요소[속성~=값] : 속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택<br>
요소[속성^=값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택<br>
요소[속성$=값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택<br>
요소[속성*=값] : 속성 안의 값이 특정 값을 포함하는 객체 선택
</p>
<input type="text"><br>
<input type="password" class="test test1"><br>
<input type="radio"><br>
<input type="checkbox" class="test2"><br>
<input type="file"><br>
<script type="text/javascript">
$(function() {
$("input[type=text]").val("change value");
$("input[class~=test]").val("123456");
$("input[type^=ra]").attr("checked", true);
$("input[type$=box]").attr("checked", true);
$("input[class*=st2]").css("width", "100px").css("height", "100px");
// 바로 위의 연달아 변경하는 함수를 체이닝 방식이라고 한다.
})
</script>
</body>
</html>