코밍이의 하루
[JQuery] 선택자 - 직접선택자 본문
1. 개발 환경
구분 | 내용 |
사용 언어 | HTML5, JS, jQuery |
개발환경 | Visual Studio Code |
참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
웹브라우저 | Chrome |
2. 주요 문법
1) 직접 선택자
- 멀리 떨어진 요소를 직접 선택할 때 사용하는 선택자
- 종류 : 전체(*), 아이디(#), 클래스(.), 요소명, 그룹(,) 선택자
1-1) 전체 선택자
- 전체 요소를 선택할 때 사용
- 현재 HTML의 모든 태그 선택
기본형 |
$("*") |
1-2) 아이디 선택자
- 아이디 속성에 지정한 값을 포함하는 요소 선택
기본형 |
$("#아이디명") |
1-3) 클래스 선택자
- 클래스 속성에 지정한 값을 포함한 요소 선택
기본형 |
$(".클래스명") |
1-4) 요소명 선택자
- 지정한 요소명과 일치하는 요소를 모두 선택
기본형 |
$("요소명") |
1-5) 그룹 선택자
- 한 번에 여러 개의 요소를 선택할 때 사용
기본형 |
$("요소 선택1, 요소 선택 2, ... 요소 선택 n") |
1-6) 종속 선택자
- 선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용
기본형 |
$("요소명#id 값") $("요소명.class 값") |
3. 소스 코드 및 실행 결과
- jq_selec1_1_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("*").css("border","1px solid blue");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
- jq_selec1_2_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#tit").css("background-color","#ff0")
.css("border", "2px solid #f00");
//체이닝 기법으로 선택한 요소의 css 메서드를 연속해서 2회 적용
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
※ 체이닝 기법 : 선택한 요소에 메소드를 연속해서 사용하는 것
- jq_selec1_3_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.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>
- jq_selec1_4_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.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>
- jq_selec1_5_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#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>
- jq_selec1_6_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 선택자 </title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("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>
'웹언어 공부 > JQuery' 카테고리의 다른 글
[JQuery] jQuery 배열 메소드 (0) | 2021.08.18 |
---|---|
[JQuery] 탐색 선택자 - 위치 탐색 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 - 인접 관계 선택자 (0) | 2021.08.17 |
[JQuery] 선택자 (0) | 2021.08.17 |
[JQuery] 제이쿼리 기본 다지기 (0) | 2021.08.17 |