[jQuery] 태그의 자손, 자식, 형제 범위 설정하는 법
태그의 자손 자식 형제 범위 설정시
- span ~ b : span의 모든 형제만
- div b : div의 모든 자손b태그만
- div > b : div의 자식중 1번째만
- span.cls :span 태그중 cls 클래스만
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 3px solid #999;
margin: 30px auto;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("span ~ b").css("background","#ff0");// 모든 형제
$("div b").css("color","tomato");// 모든 자손
$("div > b").css("border","2px solid #333");// 자식만(1단계)
$("span.cls").css("background","blue"); // span태그이면서 class명이 cls인 태그
});
</script>
</head>
<body>
<div>
<b>자바</b>
<span class="cls">객체지향</span><br>
<b>HTML</b>
<b>JAVASCRIPT</b>
<span>웹프로그램</span><br>
<b class="cls">스프링</b>
<span>프레임워크</span><br>
<p>
<b>css</b>
<span class="cls">스타일</span>
</p>
</div>
</body>
</html>
|
cs |
'Web > jQuery' 카테고리의 다른 글
| [jQuery] 셀렉터(2) (0) | 2020.11.17 |
|---|---|
| [jQuery] 주요 셀렉터 & 필터 셀렉터 (0) | 2020.11.17 |
| [jQuery] 제이쿼리를 이용하여 css 접근하기 (0) | 2020.11.16 |
| [jQuery] 제이쿼리의 기본 속성 (1) -window.onload와의 유사점 (0) | 2020.11.16 |
| [jQuery] 제이쿼리란? (0) | 2020.11.13 |
댓글