[jQuery] CSS 선택자 (태그 선택자, ID 선택자, class 선택자)
2021. 8. 7. 01:33
728x90
01 태그 선택자 ("")
- 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택.
- 이것은 자바스크립트의
getElementsByTagName()메소드와 같은 동작을 함.
<head>
<script>
$(function(){
var arr = document.getElementsByTagName("p");
for (i=0; i<arr.length; i++){
arr[i].style.color = "red";
}
= 위 아래 코딩이 같은 결과를 출력
// getElementsByTagName() 메소드와 같은 동작
$("p").css("color","red");
});
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>태그 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="/resource/lib/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("p").css("color","red"); // <p> 요소를 모두 선택
$("h2").css("background-color","skyblue"); // <h2> 요소를 모두 선택
});
</script>
</head>
<body>
<h2>제목</h2>
<p>내용</p>
<p>내용</p>
<p>내용</p>
<div>
<p>div 내부 내용</p>
</div>
<p>내용</p>
<p>내용</p>
</body>
</html>
02 ID 선택자 ("#")
- 아이디(id)를 사용하여 특정 HTML 요소를 선택할 수도 있음.
- 이것은 자바스크립트의
getElementsById()메소드와 같은 동작을 함.
<head>
<script>
$(function(){
var id = document.getElementById("id");
id.value = "아이디를 입력하세요";
= 위 아래 코딩이 같은 결과를 출력
// getElementsById() 메소드와 같은 동작
$("#id").val("아이디 입력하세요");
});
</script>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>아이디 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
//id 속성이 id인 태그를 선택
//val(값) --> value 속성에 값을 저장
$("#id").val("아이디 입력하세요");
//버튼 선택
$("button").click(function(){
//val() --> value 속성에 있는 값을 읽어옴
var pass =$("#password").val() ;
$("#result").html("입력하신 암호는 "+ pass + "<br>");
});
});
</script>
</head>
<body>
<input type="text" id="id"> <input type="password" id="password">
<button>로그인</button>
<hr>
<div id="result"></div>
</body>
</html>※ val(값) : value 속성에 값을 저장 / val() : value 속성에 있는 값을 읽어옴
03 class 선택자 (".")
- 클래스(class)를 사용하여 같은 클래스에 속하는 HTML 요소를 모두 선택할 수 있음.
- 이것은 자바스크립트의
getElementsByClassName()메소드와 같은 동작을 함.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>클래스 선택자</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
//클래스 tit를 선택 css 글꼴을 두껍게
$(".tit").css("font-weight","bold");
//클래스 under 선택 밑줄, 테두리 1px solid blue;
$(".under").css("text-decoration","underline").css("border","1px solid black");
}) ;
</script>
</head>
<body>
<a id="top" href="#bottom">맨아래로</a>
<a href="#middle">중간 지점으로 이동</a>
<p>모든 국민은 직업선택의 <span class="tit"></span>자유</span>를 가진다.
모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.</p>
<p>저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다.</p>
<p class="under">한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는
정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다.</p>
<p id="middle">헌법재판소는 법관의 자격을 가진 9인의 재판관으로 구성하며,
재판관은 대통령이 임명한다.</p>
<p>국회의 회의는 공개한다. 다만, 출석의원 과반수의 찬성이 있거나 의장이 국가의
안전보장을 위하여 필요하다고 인정할 때에는 공개하지 아니할 수 있다.</p>
</p>
<!-- <a id="bottom"></a><a href="#top">맨위로</a> -->
<a id="bottom" href="#top">맨위로</a>
</body>
</html>
※ $(".under").css("text-decoration","underline").css("border","1px solid black"); : 여러개의 css 동시 가능
728x90
'jQuery > Study' 카테고리의 다른 글
| [jQuery] 자손 요소의 탐색 (.children, .find) (0) | 2021.08.07 |
|---|---|
| [jQuery] 조상 요소의 탐색 (.parent, .parents, .parentsUntil, .closest) (0) | 2021.08.07 |
| [jQuery] 형제 요소의 탐색 (.next, .prev, .nextAll, .prevAll, .nextUntil, .prevUntil, .siblings) (0) | 2021.08.07 |
| [jQuery] CSS 선택자 (자식 선택자">", 하위 선택자" ") (0) | 2021.08.07 |
| [jQuery] 제이쿼리 적용 (파일 다운로드, CDN) (0) | 2021.08.06 |
