선택자
선택자는 HTML 요소를 선택하여 가져온다
직접선택자
-
전체 선택자
전체(Universal ' * ' ) 선택할 때 사용
즉 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택, body script 모든 태그들 -
아이디 선택자
아이디 선택자는 아이디 속성에 지정한 값을 포함하는 요소를 선택
기본형 : $("#아이디명") -
클래스 선택자
클래스 선택자는 클래스 속성에 지정한 값을 포함하는 요소를 선택
기본형 : $(".아이디명") -
요소명 선택자
지정한 요소명(Tag Name) 과 일치하는 요소를 모두 선택
기본형 $("요소명") -
그룹 선택자
지정한 요소명(Tag Name) 과 일치하는 요소를 모두 선택
기본형 $("요소명")
-
종속 선택자
선택한 요소의 id 또는 class 값이 일치하는 요소를 선택할 때 사용
기본형 : $("요소명#id 값")
$("요소명.class 값")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () { // 문서가 다 로딩 된 후에 실행
$("*").css("border", "1px solid blue") // $("요소 선택").css("속성", "값");
});
$(function () { // 문서가 다 로딩 된 후에 실행
$("#tit").css("background-color", "#f00").css("border", "2px solid #f00") // $("요소 선택").css("속성", "값");
});
$(function () { // 문서가 다 로딩 된 후에 실행
$("h1 .tit").css("background-color", "#f00").css("border", "2px solid #f00") // $("요소 선택").css("속성", "값");
//h1 .tit - h1 안의 자식요소들 중에 클래스가 tit 인것
//h1.tit - 많은 h1 태그들 중에 클래스가 tit 인것
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
