728x90
선택자는 HTML <body> 영역 요소를 선택하여 가져온다.
선택자를 사용하면 정적인 HTML를 동적으로 변경할 수 있다.
선택자 종류
기본 선택자
가장 일반적으로 사용되는 선택자, 특정 요소, 클래스, 아이디, 속성 등을 선택 할 수 있다.
$("p") 모든 <p> 태그를 선택
$(".class") 클래스 이름이 class인 요소를 모두 선택
$("#id") 아이디가 id인 요소를 선택 (id 요소는 중복이 불가능하다.)
$("[href]") href 속성을 가진 모든 요소를 선택
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#id").css("border","1px solid blue");
$(".class").css("border","2px solid blue");
$("h3").css("border","3px solid blue");
});
</script>
</head>
<body>
<h1 id="id">id 선택자</h1>
<h2 class="class">class 선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
인접 관계 선택자
특정 요소와 같은 부모를 가지며 뒤에 있는 자식 요소를 선택 할 수 있다.
CSS에서 사용되는 선택자 이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#wrap").children()
.css({
"background-color":"yellow",
"border":"2px dashed #f00"
});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용2</p>
</section>
</div>
</body>
</html>
탐색 선택자
직접 선택자를 사용해 요소를 선택한 다음 탐색 선택자를 사용해 세부적으로 요소를 선택할 수 있다.
위치 탐색자, 속성 탐색 선택자가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".txt1").last()
.css({
"border":"2px solid #f00"
});
});
</script>
</head>
<body>
<div>
<div>
<p class="txt1">내용</p>
<p class="txt1">내용2</p>
</div>
</div>
</body>
</html>'JavaScript' 카테고리의 다른 글
| 함수 정의 방식 (0) | 2023.12.06 |
|---|---|
| 웹브라우저에서 자바스크립트 실행 순서 (0) | 2023.12.05 |
| 제이쿼리(jQuery) (0) | 2023.11.21 |
| null, undefined 차이 (0) | 2023.10.06 |
| 프로퍼티(property) (0) | 2023.10.01 |