728x90
제이쿼리란
- 쉽고 편리한 애니메이션 효과 기능 구현
- 자바스크립트를 이용해 만든 라이브러리 언어
제이쿼리 연동 - 다운로드 방식
https://cdnjs.com/libraries/jquery
- 버전 : 1.12.4
- 2번째거 url 복사 : https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js
- 적당한 곳에 저장해서 놔둠
연동 - 네트워크 전송방식
선택자 - 문서 객체 모델
$붙여서 사용
<예제>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#title").css("color","red");
});
</script>
</head>
<body>
<h1 id="title">제목</h1>
</body>
</html>
|
cs |
기본 선택자 - 직접 선택자
<예제>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("*").css("border","1px solid blue");
//5개의 테두리 생성
// h1~h3까지 3개, body 1개, html 1개
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
|
cs |
<예제>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#tit").css("background-color","#ff0").css("border","2px solid #f00");
//스타일 추가하고 싶으면 계속 .css붙이면 됨
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2 id="tit">선택자</h2>
<h3>직접 선택자</h3>
</body>
</html>
|
cs |
- 선택자에 그냥 h2같은 요소에 적용해도 실행됨
<예제>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$(".tit, #tit3, h1").css("background-color","#0ff")
.css("border","2px dashed #f00");
});
</script>
</head>
<body>
<h1>제이쿼리</h1>
<h2>선택자</h2>
<h3 id="tit3">직접 선택자</h3>
<h3 class="tit">인접 선택자</h3>
</body>
</html>
|
cs |
기본 선택자 - 인접
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#list_1").parent().css("border","2px dashed #f00");
//li의 부모인 ul에 스타일 적용됨
});
</script>
</head>
<body>
<h1>인접 관계 선택자</h1>
<ul>
<li>리스트1</li>
<ul>
<li id="list_1">리스트1-1</li>
<li>리스트1-2</li>
</ul>
<li>리스트2</li>
<li>리스트3</li>
</ul>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#wrap h1").css({"background-color":"yellow",
"border":"2px dashed #f00"});
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용 1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용 2</p>
</section>
</div>
</body>
</html>
|
cs |
$(function(){
$("#wrap > h1").css("border","2px dashed #f00");
$("#wrap > section").css("border","2px dashed #f00");
});
- 이런 방식 혹은 위의 방식 사용
- 자식과 손자까지도 모두 적용
- #wrap > h1으로 한다면 첫번째 h1요소만 적용(자식까지만 적용)
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$("#wrap > h1").css("border","2px dashed #f00");
$("#wrap > section").children().css("border","2px dashed #f00")
.css("background-color","yellow");
//자식들 각각에 분리되어 적용
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용 1</p>
<section>
<h1>하위 요소 선택자</h1>
<p>내용 2</p>
</section>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt").css(style_1);
});
//변수 값으로 스타일 적용하기
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용 1</p>
<p class="txt">내용 2</p>
<h3>내용3</h3>
<p>내용 4</p>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
var style_2={
"background-color":"#ff0",
"border":"2px dashed #f00"
}
$(".txt").prev().css(style_1);
//이전 값에 적용되도록
//$(".txt + p").css(style_2);
//붙어 있는 다음거에 적용(+된 요소가 다음에 있어야 적용됨)
$(".txt").next().css(style_2);
//다음거에 적용
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용 1</p>
<p class="txt">내용 2</p>
<h3>내용3</h3>
<p>내용 4</p>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
var style_2={
"background-color":"#ff0",
"border":"2px dashed #f00"
}
// $(".txt").css(style_1);
$(".txt").prevAll().css(style_1);
//전에꺼 모두에 스타일 적용
// $(".txt").css(style_2);
$(".txt").nextAll().css(style_2);
//다음꺼 모두에 스타일 적용
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt").siblings().css(style_1);
//자신을 제외한 형제들에 스타일 적용
});
</script>
</head>
<body>
<div id="wrap">
<h1>인접 관계 선택자</h1>
<p>내용1</p>
<p class="txt">내용2</p>
<p>내용3</p>
<p>내용4</p>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
var style_1={
"background-color":"#0ff",
"border":"2px solid #f00"
}
$(".txt3").prevUntil(".title").css(style_1);
//내용 3번 이전, title클래스 앞까지 스타일 적용
$(".txt3").nextUntil(".txt6").css(style_1);
//내용 3번 다음, txt6클래스 앞까지 스타일 적용
});
</script>
</head>
<body>
<div id="wrap">
<h1 class="title">선택자</h1>
<p>내용1</p>
<p>내용2</p>
<p class="txt3">내용3</p>
<p>내용4</p>
<p>내용5</p>
<p class="txt6">내용6</p>
</div>
</body>
</html>
|
cs |
<예제>
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
// $(".txt1").css({"border":"2px dashed #00f"})
$(".txt1").parents().css({"border":"2px dashed #00f"})
//모든 부모들에 적용
// $(".txt2").css({"border":"2px solid #f00"})
//클래스에만 적용
$(".txt2").parents("div").css({"border":"2px solid #f00"})
//부모인 div에서 적용
});
</script>
</head>
<body>
<h1 class="title">선택자</h1>
<section>
<div>
<p class="txt1">내용</p>
</div>
</section>
<section>
<div>
<p class="txt2">내용</p>
</div>
</section>
</body>
</html>
|
cs |
<예제>
728x90
'학원 > JQuery - 학원' 카테고리의 다른 글
| 효과 및 애니메이션 메서드 (0) | 2022.04.08 |
|---|---|
| 이벤트 (0) | 2022.04.08 |
| 문제 (0) | 2022.04.07 |
| 제이쿼리 배열 관련 메소드 (0) | 2022.03.31 |
| 탐색 선택자 (0) | 2022.03.31 |
