[jQuery] 기본 선택자(basic selector)
2022. 6. 8. 14:15ㆍJavaScript/jQuery
1. 선택자
- HTML 문서에 있는 태그 객체 중 필요한 태그 객체를 가져오기 위한 방법
- jQuery 함수에 문자열을 넣어주면 작성된 문자열의 양식에 따라 해당하는 태그 객체를 가져 올 수 있습니다.
- 태그 객체를 가져오기 위해 작성하는 문자열 선택자(selector)라고 부른다.
- jQuery에서는 선택자를 CSS의 선택자와 동일한 문법을 사용합니다.
2. 기본 선택자
- jQuery 선택자중 가장 기본이 되는 선택자이며 다른 선택자는 기본 선택자를 조합하여 만들게 됩니다.
- 전체 선택자(*) : HTML 문서 내의 모든 태그를 선택합니다.
- 태그이름 선택자(태그이름) : 지정한 태그 이름에 해당하는 태그 객체를 가져옵니다.
- 아이디 선택자(#아이디) : id 속성을 통해 태그 객체를 가져옵니다.
- 클래스 선택자(.클래스) : class 속성을 통해서 태그 객체를 가져옵니다.
<!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(){
// 전체 선택자(*)
// 모든 객체의 배경을 노란색으로 설정
$("*").css("background-color","yellow");
// 태그 이름 선택자(태그이름)
// $("p") 호출시 배열이 반환되고 css 적용시
// 배열안에 모든 요소들에게 css 적용함
$("p").css("background-color", "blue");
$("div").css("background-color", "green");
// 아이디 선택자(#아이디)
// id속성은 두개 이상 존재할 수 없음
$("#test1").css("color", "white");
$("#test2").css("color", "red");
// 클래스 선택자(.클래스)
// $(".test3") 호출시 배열 형태로 반환
$(".test3").css("color", "orange");
});
</script>
</head>
<body>
<p>문자열1</p>
<p>문자열2</p>
<div>문자열3</div>
<div>문자열4</div>
<div id="test1">문자열5</div>
<div id="test2">문자열6</div>
<div class="test3">문자열7</div>
<div class="test3">문자열8</div>
</body>
</html>
3. 학습정리
- 선택자는 HTML 문서에 있는 태그 객체를 가져올 수 있는 방법
- 기본 선택자의 종류
- 전체 선택자(*)
- 아이디 선택자(#아이디이름)
- 태그이름 선택자(태그이름)
- 클래스 선택자(.클래스이름)
Reference
source code : https://github.com/yonghwankim-dev/jQuery_study/tree/main/BasicSelector/src/main/webapp
윤재성의 처음 시작하는 jQuery Programming
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] 인덱스 필터 선택자 (0) | 2022.06.09 |
|---|---|
| [jQuery] 순서 필터 선택자 (0) | 2022.06.09 |
| [jQuery] 기본 선택자(basic selector) 조합 (0) | 2022.06.08 |
| [jQuery] jQuery 함수와 Ready (0) | 2022.06.08 |
| [jQuery] jQuery 개발환경 준비 (0) | 2022.06.08 |