1. 전체 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// 전체 요소 선택자(*)로 스타일 지정
$("*").css("border", "1px solid blue");
}
);
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
2. 아이디 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// 아이디 선택자(#)를 사용하여 스타일 지정
$("#tit").css("background-color", "#ff0")
.css("border", "2px solid #f00");
}
);
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
3. 클래스 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// 클래스 선택자(.)를 사용하여 스타일 지정
$(".tit").css("background-color", "#ff0")
.css("border", "2px dashed #f00");
}
);
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 class="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
4. 요소명 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// 요소명(태그)을 선택하여 스타일 지정
$("h2").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
}
);
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
5. 그룹 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// 그룹으로 선택하여 스타일 지정
// 아이디 tit3을 가진 요소와 h1 요소가 모두 바뀜
$("#tit3, h1").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
}
);
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접 선택자</h3>
<h3>인접 선택자</h3>
</body>
</html>
6. 종속 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제</title>
<script src="js/jquery.min.js"></script>
<script>
$(
function() {
// h1 태그의 tit라는 class를 가진 요소를 변경
$("h1.tit").css("background-color", "#0ff")
.css("border", "2px dashed #f00");
}
);
</script>
</head>
<body>
<h1 class="tit">제이쿼리</h1>
<h2>선택자</h2>
<h3 class="tit">직접 선택자</h3>
</body>
</html>
'제이쿼리' 카테고리의 다른 글
| [제이쿼리] 위치 탐색 선택자 (0) | 2020.05.26 |
|---|---|
| [제이쿼리] 기본 선택자 (0) | 2020.05.25 |
| [제이쿼리] 인접 관계 선택자 (0) | 2020.05.25 |
| [제이쿼리] Chainning (0) | 2020.05.22 |
| [제이쿼리] 설치하기 (0) | 2020.05.22 |
