반응형
CSS 선택자를 이용한 HTML 요소 선택
적용 방법
- 선택한 요소에 지정한 스타일을 적용
$("CSS선택자").css("스타일 속성명", "값");
- 선택한 요소에 지정한 속성을 적용
$("CSS선택자").attr("속성명", "값");
선택자 종류
| 종류 | 사용법 | 설명 |
| 전체선택자 | $(" * ") | 모든 요소를 선택 |
| 아이디 선택자 | $("#아이디명") | id 속성에 지정한 값을 가진 요소를 선택 |
| 클래스 선택자 | $(".클래스명") | class 속성에 지정한 값을 가진 요소를 선택 |
| 요소 선택자 | $("요소명") | 지정한 요소명과 일치하는 요소들만 선택 |
| 그룹 선택자 | $("선택1, 선택2, 선택3...") | 지정된 요소들을 한번에 선택 |
| 종속 선택자 | $("요소.클래스명") $("요소#아이디명") |
요소들중 클래스 or 아이디인 요소를 선택 |
| 속성 선택자 | $("요소[속성='속성값']") | 지정한 요소 중에서 지정한 속성의 속성값인 요소를 모두 선택 |
1. 전체 선택자 $(" * ")
<script>
$(function(){
$("*").css("color", "blue");
});
</script>
<body>
<h3> 제이쿼리 전체 선택자 예시</h3>
<p> p태그입니다 </p>
<a> a태그입니다 </a>
</body>▼result
2. 요소 선택자 $("요소명")
(= 자바스크립트 getElementsByTagName() )
<script>
$(function() {
$("p").on("click", function() { // <p>요소를 모두 선택함.
$("span").css("fontSize", "28px"); // <span>요소를 모두 선택함.
});
});
</script>
<body>
<h1>HTML 태그 선택자</h1>
<p>이제부터 <span>제이쿼리</span>를 다 같이 공부해보죠!!<br>
마우스로 글씨를 클릭해보세요!!</p>
</body>▼result
3. 아이디 선택자 $("#아이디명")
( = 자바스크립트 getElementsById())
<script>
$(function(){
$("#jq, #ajq").css("border", "solid red");
});
</script>
<body>
<h1>제이쿼리 아이디 선택자</h1>
<p>제이쿼리</p>
<p>아이디 선택자</p>
<p id="jq">$("#아이디명")</p>
<a id="ajq">연습하기</a>
</body>▼result
4. 클래스 선택자 $(".클래스명")
( = 자바스크립트getElementsByClassName() )
<script>
$(function(){
$(".jq").css("backgroundColor", "yellow");
});
</script>
<body>
<h1>제이쿼리 클래스 선택자</h1>
<p class="jq">제이쿼리</p>
<p>클래스 선택자</p>
<p class="jq">$(".클래스명")</p>
</body>▼result
반응형
5. 그룹 선택자 $("선택1, 선택2, 선택3...")
<script>
$(function(){
$("#jq, h1").css("color", "blue").css("backgroundColor", "lightgray");
});
</script>
<body>
<h1>제이쿼리 그룹 선택자</h1>
<h3>제이쿼리</h3>
<h2>그룹 선택자</h2>
<p id="jq"> $("선택1, 선택2, 선택3...")</p>
</body>▼result
6. 종속 선택자 $("요소.클래스명") or $("요소#아이디명")
<script>
$(function(){
$("h2#jq").css("color", "blue")
});
</script>
<body>
<h1>제이쿼리 종속 선택자</h1>
<h3>제이쿼리</h3>
<h2 id="jq">종속 선택자</h2>
<p id="jq"> $("요소#아이디명")</p>
<p> $("요소.클래스명")</p>
</body>▼result
7. 속성 선택자
<script>
$(function() {
$("button").on("click", function() {
// <img>요소 중에서 alt 속성값이 "flower"인 요소를 모두 선택함.
$("img[alt='flower']").attr("src", "/examples/images/img_monalisa.png");
});
});
</script>
<body>
<h1>속성 선택자</h1>
<img src="/examples/images/img_flower.png" alt="flower"><br>
<button>속성을 바꾸죠!!</button>
</body>▼result
반응형
'프로그래밍 > jQuery' 카테고리의 다른 글
| [제이쿼리] jQuery 요소의 외부에 추가(.before(), .after(), .insertBefore(), insertAfter()) (0) | 2023.01.25 |
|---|---|
| [제이쿼리] jQuery 요소의 내부에 추가 (append, prepend, appendTo, prependTo) (0) | 2023.01.24 |
| [제이쿼리] jQuery 메소드 체이닝, getter / setter, width() / height(), .attr() 메소드 (2) | 2023.01.24 |
| [제이쿼리] jQuery 선택자 (요소저장, 필터링, input선택자) (0) | 2023.01.24 |
| [제이쿼리] jQuery 적용 및 기본 문법 (0) | 2023.01.23 |